Einführung
In modernen Browsern sind Entwicklungstools für die Arbeit mit JavaScript und anderen Webtechnologien integriert. Diese Tools umfassen die Konsole, die einer Shell-Oberfläche ähnelt, sowie Tools zum Überprüfen des DOM, Debuggen und Analysieren der Netzwerkaktivität.
Die Konsole kann verwendet werden, um Informationen im Rahmen des JavaScript-Entwicklungsprozesses zu protokollieren und um mit einer Webseite zu interagieren, indem JavaScript-Ausdrücke im Seitenkontext ausgeführt werden. Im Wesentlichen bietet Ihnen die Konsole die Möglichkeit, JavaScript bei Bedarf zu schreiben, zu verwalten und zu überwachen.
In diesem Tutorial wird erläutert, wie Sie mit der Konsole in JavaScript im Kontext eines Browsers arbeiten. Außerdem erhalten Sie einen Überblick über andere integrierte Entwicklungstools, die Sie im Rahmen Ihres Webentwicklungsprozesses verwenden können.
Arbeiten mit der Konsole in einem Browser
Die meisten modernen Webbrowser, die standardbasiertes HTML und XHTML unterstützen, bieten Ihnen Zugriff auf eine Entwicklerkonsole, in der Sie in einer Oberfläche ähnlich einer Terminal-Shell mit JavaScript arbeiten können. Wir werden uns ansehen, wie Sie in Firefox und Chrome auf die Konsole zugreifen.
Feuerfuchs
Um die Web Console in FireFox zu öffnen, können Sie zum Menü ☰ in der oberen rechten Ecke neben der Adressleiste navigieren.
Klicken Sie dort auf die Entwicklerschaltfläche, die durch das Schraubenschlüsselsymbol symbolisiert wird, um das Web Developer-Menü zu öffnen. Klicken Sie in diesem Fall auf den Menüpunkt Webkonsole.
image: https://assets.digitalocean.com/articles/eng_javascript/js-console/firefox-web-console-menu.png [Firefox Web Console-Menüelement]
Sobald Sie dies tun, öffnet sich eine Taskleiste am unteren Rand Ihres Browserfensters:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/firefox-web-console-tray.png [Firefox Web Console Tray Item]
Sie können die Webkonsole auch mit der Tastenkombination "+ STRG " + " UMSCHALT " + " K " unter Linux und Windows oder " BEFEHL " + " OPTION " + " K +" unter macOS aufrufen.
Nachdem wir auf die Konsole zugegriffen haben, können wir mit der Arbeit in JavaScript beginnen.
Chrom
Um die JavaScript Console in Chrome zu öffnen, navigieren Sie zum Menü oben rechts in Ihrem Browserfenster, das durch drei vertikale Punkte gekennzeichnet ist in einer Reihe. Von dort aus können Sie Weitere Tools und dann Entwicklertools auswählen.
image: https://assets.digitalocean.com/articles/eng_javascript/js-console/chrome-developer-tools-menu.png [Menüelement der Chrome-Entwicklertools]
Dadurch wird ein Bereich geöffnet, in dem Sie in der oberen Menüleiste auf * Konsole * klicken können, um die JavaScript-Konsole aufzurufen, sofern sie nicht bereits markiert ist:
image: https://assets.digitalocean.com/articles/eng_javascript/js-console/chrome-console-tray.png [Chrome Developer Tools-Menüelement]
Sie können die JavaScript-Konsole auch mit der Tastenkombination "+ STRG " + " UMSCHALT " + " J " unter Linux oder Windows oder " BEFEHL " + " WAHL " + " J +" unter MacOS aufrufen. Dadurch wird der Fokus sofort auf die Konsole gelegt.
Nachdem wir auf die Konsole zugegriffen haben, können wir mit der Arbeit in JavaScript beginnen.
In der Konsole arbeiten
In der Konsole können Sie JavaScript-Code eingeben.
Beginnen wir mit einer Warnung, die die Zeichenfolge "+ Hallo, Welt! +" Ausgibt:
alert("Hello, World!");Sobald Sie die Taste "+ ENTER +" in Ihrer JavaScript-Zeile gedrückt haben, sollte das folgende Popup-Fenster in Ihrem Browser angezeigt werden:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [Beispiel für JavaScript-Konsolenwarnung]
Beachten Sie, dass die Konsole auch das Ergebnis der Auswertung eines Ausdrucks ausgibt, der als "+ undefined +" gelesen wird, wenn der Ausdruck nicht explizit etwas zurückgibt.
Anstatt Popup-Warnungen zu haben, aus denen wir weiterhin klicken müssen, können wir mit JavaScript arbeiten, indem wir es mit + console.log + in der Konsole protokollieren.
Um die Zeichenfolge "+ Hello, World! +" Zu drucken, können Sie Folgendes in die Konsole eingeben:
console.log("Hello, World!");Innerhalb der Konsole erhalten Sie folgende Ausgabe:
OutputHello, World!Wir können auch JavaScript verwenden, um Berechnungen in der Konsole durchzuführen:
console.log(2 + 6);Output8Sie können auch etwas kompliziertere Mathematik ausprobieren:
console.log(34348.2342343403285953845 * 4310.23409128534);Output148048930.17230788Zusätzlich können wir mit Variablen in mehreren Zeilen arbeiten:
let d = new Date();
console.log("Today's date is " + d);OutputToday's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)Wenn Sie einen Befehl ändern müssen, den Sie über die Konsole übergeben haben, können Sie die Aufwärtspfeiltaste ↑ auf Ihrer Tastatur eingeben, um den vorherigen Befehl abzurufen. Auf diese Weise können Sie den Befehl bearbeiten und erneut senden.
In der JavaScript-Konsole können Sie JavaScript-Code in Echtzeit ausprobieren, indem Sie eine Umgebung verwenden, die einer Terminal-Shell-Oberfläche ähnelt.
Mit einer HTML-Datei arbeiten
Sie können auch im Kontext einer HTML-Datei oder einer dynamisch gerenderten Seite in der Konsole arbeiten. Dies bietet Ihnen die Möglichkeit, mit JavaScript-Code im Kontext von vorhandenem HTML, CSS und JavaScript zu experimentieren.
Denken Sie daran, dass sobald Sie eine Seite nach dem Ändern mit der Konsole neu laden, diese vor dem Ändern des Dokuments in den ursprünglichen Zustand zurückkehrt. Speichern Sie daher alle Änderungen, die Sie an einem anderen Ort behalten möchten.
Nehmen wir ein leeres HTML-Dokument, z. B. die folgende Datei "+ index.html +", um zu verstehen, wie Sie die Konsole zum Ändern verwenden:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>Wenn Sie die obige HTML-Datei speichern und in einen Browser Ihrer Wahl laden, sollte eine leere Seite mit dem Seitentitel "+ Heutiges Datum +" angezeigt werden.
Sie können dann die Konsole öffnen und mit JavaScript arbeiten, um die Seite zu ändern. Wir beginnen mit der Verwendung von JavaScript, um eine Überschrift in den HTML-Code einzufügen.
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"Sie erhalten die folgende Ausgabe auf der Konsole:
Output"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"Und zu diesem Zeitpunkt sollte Ihre Seite ungefähr so aussehen:
image: https://assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-plain.png [Beispiel für einfaches Datum der JavaScript-Konsole]
Wir können auch den Stil der Seite ändern, z. B. die Hintergrundfarbe:
document.body.style.backgroundColor = "lightblue";Output"lightblue"Sowie die Farbe des Textes auf der Seite:
document.body.style.color = "white";Output"white"Jetzt sieht Ihre Seite ungefähr so aus:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-style.png [Beispiel für Datum in JavaScript-Konsolenstil]
Von hier aus können Sie ein "+ <p> +" - Absatzelement erstellen:
let p = document.createElement("P");Nachdem dieses Element erstellt wurde, können Sie einen Textknoten erstellen, den Sie dem Absatz hinzufügen können:
let t = document.createTextNode("Paragraph text.");Wir fügen den Textknoten hinzu, indem wir ihn an die Variable "+ p +" anhängen:
p.appendChild(t);Und schließlich hängen Sie "+ p " mit dem Absatz " <p> +" und dem angehängten Textknoten an das Dokument an:
document.body.appendChild(p);Sobald Sie diese Schritte ausgeführt haben, sieht Ihre HTML-Seite "+ index.html +" folgendermaßen aus:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-with-paragraph.png [JavaScript-Konsolendatum mit Absatzbeispiel]
In der Konsole können Sie mit dem Ändern von HTML-Seiten experimentieren. Beachten Sie jedoch, dass Sie das HTML-Dokument nicht ändern, wenn Sie Aufgaben in der Konsole ausführen. In diesem Fall wird nach dem erneuten Laden der Seite ein leeres Dokument angezeigt.
Grundlegendes zu anderen Entwicklungstools
Je nachdem, welche Entwicklungstools des Browsers Sie verwenden, können Sie andere Tools zur Unterstützung Ihres Webentwicklungs-Workflows verwenden. Sehen wir uns einige dieser Tools an.
DOM - Dokumentobjektmodell
Jedes Mal, wenn eine Webseite geladen wird, erstellt der Browser, in dem er sich befindet, ein D -Okument O -Objekt M odel oder * DOM * der Seite.
Das DOM ist ein Baum von Objekten und zeigt die HTML-Elemente in einer hierarchischen Ansicht. Der DOM-Baum kann im Bereich * https: //developer.mozilla.org/en-US/docs/Tools/Page_Inspector [Inspector] * in Firefox oder im Bereich * https: //developers.google.com/web angezeigt werden / tools / chrome-devtools / inspect-styles / [Elements] * in Chrome.
Mit diesen Werkzeugen können Sie DOM-Elemente untersuchen und bearbeiten sowie den HTML-Code identifizieren, der sich auf einen Aspekt einer bestimmten Seite bezieht. Das DOM kann Ihnen mitteilen, ob ein Textausschnitt oder ein Bild ein ID-Attribut enthält, und Sie können den Wert dieses Attributs bestimmen.
Die Seite, die wir oben geändert haben, würde eine DOM-Ansicht haben, die ähnlich aussieht, bevor wir die Seite neu laden:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-dom-example.png [JavaScript-DOM-Beispiel]
Darüber hinaus werden CSS-Stile in einem Seitenbereich oder unter dem DOM-Bereich angezeigt, sodass Sie sehen können, welche Stile im HTML-Dokument oder über ein CSS-Stylesheet verwendet werden. So sieht der Body-Style unserer Beispielseite im Firefox-Inspektor aus:
image: https: //assets.digitalocean.com/articles/eng_javascript/js-console/javascript-css-example.png [JavaScript CSS Example]
Um einen DOM-Knoten live zu bearbeiten, doppelklicken Sie auf ein ausgewähltes Element und nehmen Sie die gewünschten Änderungen vor. Zum Starten können Sie beispielsweise ein + <h1> + Tag ändern und es zu einem + <h2> + Tag machen.
Wie bei der Konsole kehren Sie beim erneuten Laden der Seite zum gespeicherten Status des HTML-Dokuments zurück.
Netzwerk
Über die Registerkarte "Netzwerk" der integrierten Entwicklungstools Ihres Browsers können Sie Netzwerkanforderungen überwachen und aufzeichnen. Auf dieser Registerkarte werden die Netzwerkanforderungen angezeigt, die der Browser vornimmt, einschließlich des Ladens einer Seite, der Dauer jeder Anforderung und der Details zu jeder dieser Anforderungen. Dies kann verwendet werden, um die Seitenladeleistung zu optimieren und Probleme mit Debuganforderungen zu beheben.
Sie können die Registerkarte Netzwerk neben der JavaScript-Konsole verwenden. Das heißt, Sie können das Debuggen einer Seite mit der Konsole starten und dann zur Registerkarte "Netzwerk" wechseln, um die Netzwerkaktivität anzuzeigen, ohne die Seite neu zu laden.
Weitere Informationen zur Verwendung der Registerkarte "Netzwerk" finden Sie unter working with Firefox’s Network Monitor oder https://developers.google. com / web / tools / chrome-devtools / network-performance / [Erste Schritte zum Analysieren der Netzwerkleistung mit den DevTools von Chrome].
Sich anpassendes Design
Wenn Websites reagieren, werden sie so entworfen und entwickelt, dass sie auf einer Reihe verschiedener Geräte ordnungsgemäß aussehen und funktionieren: Mobiltelefone, Tablets, Desktops und Laptops. Bildschirmgröße, Pixeldichte und unterstützende Berührungen sind Faktoren, die bei der geräteübergreifenden Entwicklung berücksichtigt werden müssen. Als Webentwickler ist es wichtig, die Prinzipien des reaktionsschnellen Designs zu berücksichtigen, damit Ihre Websites für Benutzer uneingeschränkt verfügbar sind, unabhängig davon, auf welches Gerät sie zugreifen können.
Sowohl Firefox als auch Chrome bieten Modi, mit denen Sie sicherstellen können, dass beim Erstellen und Entwickeln von Websites und Apps für das Web die Prinzipien des reaktionsschnellen Designs berücksichtigt werden. Diese Modi emulieren verschiedene Geräte, die Sie im Rahmen Ihres Entwicklungsprozesses untersuchen und analysieren können.
Weitere Informationen zu Firefox unter Responsive Design Mode oder zu Chrome unter https://developers.google.com/web/tools/chrome-devtools/device- Im Modus / [Gerätemodus] erfahren Sie, wie Sie diese Tools nutzen, um einen gerechteren Zugang zu Webtechnologien zu gewährleisten.
Fazit
Dieses Tutorial bietet einen Überblick über das Arbeiten mit einer JavaScript-Konsole in modernen Webbrowsern sowie einige Informationen zu anderen Entwicklungstools, die Sie in Ihrem Workflow verwenden können.
Weitere Informationen zu JavaScript finden Sie unter data types oder https://www.digitalocean.com/ community / tutorials / eine-einführung-in-jquery [jQuery] oder https://www.digitalocean.com/community/tutorials/how-to-make-a-bar-chart-with-javascript-and-the-d3 -Bibliothek [D3] Bibliotheken.