Verwendung der JavaScript-Entwicklerkonsole

Einführung

Moderne Browser verfügen über integrierte Entwicklungstools zur Arbeit mit JavaScript und anderen Webtechnologien. Zu diesen Tools gehört die Konsole, die einer Shell-Schnittstelle ähnelt, sowie Tools zum Inspektieren des DOMs, Debuggen und Analysieren der Netzwerkaktivität.

Die Konsole kann im Rahmen des JavaScript-Entwicklungsprozesses verwendet werden, um Informationen zu protokollieren, sowie um mit einer Webseite zu interagieren, indem JavaScript-Ausdrücke im Kontext der Seite ausgeführt werden. Im Wesentlichen bietet die Konsole Ihnen die Möglichkeit, JavaScript bedarfsgerecht zu schreiben, zu verwalten und zu überwachen.

In diesem Tutorial wird erläutert, wie man mit der Konsole und JavaScript im Browser umgeht, und es wird ein Überblick über andere integrierte Entwicklungstools gegeben, 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 Zugriff auf eine Entwicklerkonsole, in der Sie mit JavaScript arbeiten können, ähnlich wie in einer Terminalshell. Dieser Abschnitt erläutert, wie Sie auf die Konsole in Firefox und Chrome zugreifen können.

Firefox

Um die Webkonsole in Firefox zu öffnen, navigieren Sie zum ☰-Menü oben rechts neben der Adressleiste.

Wählen Sie Weitere Tools aus. Wenn das geöffnet ist, klicken Sie auf den Punkt Webentwickler-Tools.

Wenn Sie das getan haben, wird ein Tablett am unteren Rand Ihres Browserfensters geöffnet:

Sie können auch mit der Tastenkombination STRG + UMSCHALT + K unter Linux und Windows oder COMMAND + OPTION + K auf macOS in die Webkonsole gelangen.

Jetzt, da Sie Zugriff auf die Konsole haben, können Sie darin mit JavaScript arbeiten.

Chrome

Um die JavaScript-Konsole in Chrome zu öffnen, können Sie zum Menü oben rechts in Ihrem Browserfenster navigieren, das durch drei vertikale Punkte gekennzeichnet ist. Von dort aus können Sie Weitere Tools und dann Entwicklerwerkzeuge auswählen.

Dadurch wird ein Panel geöffnet, auf dem Sie auf Konsole in der oberen Menüleiste klicken können, um die JavaScript-Konsole aufzurufen, falls sie noch nicht hervorgehoben ist:

Sie können auch über die Tastenkombination STRG + UMSCHALT + J unter Linux oder Windows oder COMMAND + OPTION + J unter macOS in die JavaScript-Konsole gelangen, wodurch der Fokus sofort auf die Konsole gelegt wird.

Jetzt, da Sie auf die Konsole zugegriffen haben, können Sie darin mit JavaScript arbeiten.

Arbeiten in der Konsole

In der Konsole können Sie JavaScript-Code eingeben und ausführen.

Beginnen Sie mit einem Alert, der den String Hallo, Welt! ausgibt:

alert("Hello, World!");

Nachdem Sie die ENTER-Taste nach Ihrer JavaScript-Zeile gedrückt haben, wird ein Alert-Popup in Ihrem Browser angezeigt:

Beachten Sie, dass die Konsole auch das Ergebnis der Auswertung eines Ausdrucks ausdruckt, was als undefined angezeigt wird, wenn der Ausdruck nicht explizit etwas zurückgibt.

Anstatt Pop-up-Benachrichtigungen zu haben, die Sie wegklicken müssen, können Sie mit JavaScript arbeiten, indem Sie es mit console.log in die Konsole protokollieren.

Um den String Hallo, Welt! zu drucken, geben Sie Folgendes in die Konsole ein:

console.log("Hello, World!");

In der Konsole erhalten Sie dann die folgende Ausgabe:

Output
Hello, World!

Sie können auch mathematische Operationen in der Konsole durchführen:

console.log(2 + 6);

Output
8

Sie können auch etwas kompliziertere Mathematik ausprobieren:

console.log(34348.2342343403285953845 * 4310.23409128534);

Output
148048930.17230788

Zusätzlich können Sie mit Variablen auf mehreren Zeilen arbeiten:

let today = new Date();
console.log("Today's date is " + today);

Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

Wenn Sie einen Befehl, den Sie durch die Konsole geschickt haben, ändern müssen, können Sie die Pfeiltaste nach oben (↑) auf Ihrer Tastatur drücken, um den vorherigen Befehl abzurufen. Dies ermöglicht es Ihnen, den Befehl zu bearbeiten und erneut zu senden.

Die JavaScript-Konsole bietet Ihnen einen Raum, um JavaScript-Code in Echtzeit auszuprobieren, indem Sie eine Umgebung ähnlich einer terminalähnlichen Shell-Schnittstelle verwenden können.

Arbeiten mit einer HTML-Datei

Sie können im Kontext einer HTML-Datei oder einer dynamisch gerenderten Seite in der Konsole arbeiten. Dies gibt Ihnen die Möglichkeit, mit JavaScript-Code im Kontext von vorhandenem HTML, CSS und JavaScript zu experimentieren.

Beachten Sie, dass eine Seite nach dem Neuladen nach der Modifizierung in der Konsole in ihren Zustand vor der Modifizierung zurückkehrt. Stellen Sie sicher, dass Sie alle Änderungen, die Sie behalten möchten, anderweitig speichern.

Nehmen Sie ein HTML-Dokument, wie das folgende index.html -Datei, um zu verstehen, wie Sie die Konsole verwenden können, um es zu ändern. Erstellen Sie in Ihrem bevorzugten Texteditor eine index.html -Datei und fügen Sie die folgenden HTML-Zeilen hinzu:

<!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 den Browser Ihrer Wahl laden, wird eine leere Seite mit dem Titel Heutiges Datum im Browser gerendert.

Öffnen Sie die Konsole und beginnen Sie mit der Arbeit mit JavaScript, um die Seite zu ändern. Beginnen Sie damit, JavaScript zu verwenden, um eine Überschrift in das HTML einzufügen.

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

Sie erhalten die folgende Ausgabe in der Konsole:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

Ihre Seite sollte ähnlich aussehen wie folgt:

Sie können das Styling der Seite ändern, wie 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 sollte Ihre Seite etwas Ähnliches wie folgt anzeigen:

Von hier aus können Sie ein <p> -Absatzelement erstellen:

let p = document.createElement("P");

Mit diesem erstellten Element können Sie dann einen Textknoten erstellen, der dem Absatz hinzugefügt werden kann:

let t = document.createTextNode("Paragraph text.");

Fügen Sie den Textknoten hinzu, indem Sie ihn an die Variable p anhängen:

p.appendChild(t);

Und fügen Sie schließlich p mit seinem Absatz <p> -Element und dem angehängten Textknoten dem Dokument hinzu:

document.body.appendChild(p);

Nachdem Sie diese Schritte abgeschlossen haben, enthält Ihre HTML-Seite index.html die folgenden Elemente:

Die Konsole bietet Ihnen einen Raum, um mit der Modifizierung von HTML-Seiten zu experimentieren, aber es ist wichtig zu beachten, dass Sie das HTML-Dokument selbst nicht ändern, wenn Sie Dinge in der Konsole tun. Sobald Sie die Seite neu laden, wird sie zu einem leeren Dokument zurückkehren.

Verständnis anderer Entwicklungstools

Je nachdem, welche Entwicklungstools des Browsers Sie verwenden, können Sie andere Tools verwenden, um Ihren Webentwicklungs-Workflow zu unterstützen.

DOM – Document Object Model

Jedes Mal, wenn eine Webseite geladen wird, erstellt der Browser, in dem sie sich befindet, ein Dokument-Objekt-Modell oder DOM der Seite.

Das DOM ist ein Baum von Objekten und zeigt die HTML-Elemente in einer hierarchischen Ansicht an. Der DOM-Baum ist im Inspector-Panel in Firefox oder im Elements-Panel in Chrome verfügbar.

Diese Tools ermöglichen es Ihnen, DOM-Elemente zu inspizieren und zu bearbeiten und Ihnen auch zu identifizieren, welche HTML mit einem bestimmten Aspekt einer bestimmten Seite zusammenhängt. Das DOM kann Ihnen sagen, ob ein Textausschnitt oder ein Bild ein ID-Attribut hat, und Ihnen helfen festzustellen, was der Wert dieses Attributes ist.

Die Seite, die Sie oben geändert haben, würde vor dem Neuladen der Seite eine DOM-Ansicht ähnlich dieser haben:

Zusätzlich sehen Sie CSS-Stile in einem Seitenbereich oder unterhalb des DOM-Panels, was es Ihnen ermöglicht zu sehen, welche Stile im HTML-Dokument oder über ein CSS-Stylesheet verwendet werden. Beachten Sie beispielsweise, was der Body-Stil Ihrer Beispielseite im Firefox Inspector enthält:

Um ein DOM-Element live zu bearbeiten, doppelklicken Sie auf ein ausgewähltes Element und nehmen Sie Änderungen vor. Sie können beispielsweise ein <h1>-Tag ändern und daraus ein <h2>-Tag machen.

Wie bei der Konsole kehren Sie beim Neuladen der Seite zum ursprünglichen gespeicherten Zustand des HTML-Dokuments zurück.

Netzwerk

Der Netzwerk-Tab der integrierten Entwicklungswerkzeuge Ihres Browsers kann Netzwerkanfragen überwachen und aufzeichnen. Dieser Tab zeigt die Netzwerkanfragen an, die der Browser macht, einschließlich des Ladens einer Seite, wie lange jede Anfrage dauert, und stellt die Details jeder dieser Anfragen bereit. Dies kann verwendet werden, um die Leistung des Seitenladens zu optimieren und Anfrageprobleme zu debuggen.

Sie können den Netzwerk-Tab neben der JavaScript-Konsole verwenden. Das heißt, Sie können das Debuggen einer Seite mit der Konsole starten und dann zum Netzwerk-Tab wechseln, um die Netzwerkaktivität zu sehen, ohne die Seite neu zu laden.

Um mehr darüber zu erfahren, wie Sie den Netzwerk-Tab verwenden können, können Sie über das Arbeiten mit dem Netzwerkmonitor von Firefox oder das Erste Schritte beim Analysieren der Netzwerkperformance mit den DevTools von Chrome lesen.

Responsives Design

Wenn Websites responsiv sind, werden sie so entworfen und entwickelt, dass sie auf einer Vielzahl von verschiedenen Geräten richtig aussehen und funktionieren: Mobiltelefone, Tablets, Desktops und Laptops. Bildschirmgröße, Pixeldichte und die Unterstützung von Touch sind Faktoren, die beim Entwickeln über Geräte hinweg zu berücksichtigen sind. Als Webentwickler ist es wichtig, responsives Design im Auge zu behalten, damit Ihre Websites unabhängig vom Gerät, auf das die Nutzer zugreifen, vollständig verfügbar sind.

Sowohl Firefox als auch Chrome bieten Ihnen Modi an, um sicherzustellen, dass den Prinzipien des responsiven Designs während des Erstellens und Entwickelns von Websites und Apps für das Web Aufmerksamkeit geschenkt wird. Diese Modi werden verschiedene Geräte emulieren, die Sie im Rahmen Ihres Entwicklungsprozesses untersuchen und analysieren können.

Erfahren Sie mehr über den Responsive Design Mode von Firefox oder den Device Mode von Chrome, um mehr darüber zu erfahren, wie Sie diese Tools nutzen können, um einen gerechteren Zugang zu Webtechnologien zu gewährleisten.

Fazit

Dieses Tutorial bietet einen Überblick über die Arbeit mit einer JavaScript-Konsole in modernen Webbrowsern sowie einige Informationen zu anderen Entwicklungstools, die Sie in Ihrem Arbeitsablauf verwenden können.

Um mehr über JavaScript zu erfahren, können Sie etwas über Datentypen oder die Bibliotheken jQuery oder D3 lesen.