Auf dieser Seite wird erläutert, wie die Entwicklertools-Konsole von Chrome die Entwicklung von Webseiten erleichtert. Die Console bietet zwei Hauptzwecke: zum Aufrufen protokollierter Nachrichten und zum Ausführen von JavaScript.
Protokollierte Nachrichten ansehen
Webentwickler protokollieren häufig Meldungen in der Console, um sicherzustellen, dass ihr JavaScript wie erwartet funktioniert. Um eine Nachricht zu protokollieren, fügen Sie einen Ausdruck wie console.log('Hello, Console!') in Ihren JavaScript-Code ein. Wenn der Browser Ihren JavaScript-Code ausführt und einen solchen Ausdruck findet, weiß er, dass er die Nachricht in der Konsole protokollieren soll. Angenommen, Sie schreiben den HTML- und JavaScript-Code für eine Seite:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
Abbildung 1 zeigt, wie die Konsole aussieht, nachdem die Seite geladen wurde und drei Sekunden gewartet wurde. Versuchen Sie herauszufinden, durch welche Codezeilen der Browser die Meldungen protokolliert hat.
Abbildung 1. Das Steuerfeld „Console“
Webentwickler protokollieren Meldungen aus zwei allgemeinen Gründen:
- Es wird sichergestellt, dass der Code in der richtigen Reihenfolge ausgeführt wird.
- Prüfen der Variablenwerte zu einem bestimmten Zeitpunkt
Lesen Sie den Artikel Erste Schritte mit Logging von Nachrichten, um praktische Erfahrungen mit der Protokollierung zu sammeln. In der Console API-Referenz finden Sie eine vollständige Liste der console-Methoden. Der Hauptunterschied zwischen den Methoden besteht darin, wie sie die von Ihnen protokollierten Daten darstellen.
JavaScript ausführen
Die Konsole ist auch eine REPL. Sie können JavaScript in der Konsole ausführen, um mit der Seite zu interagieren, die Sie untersuchen. Beispiel: In Abbildung 2 ist die Konsole neben der Startseite der Entwicklertools und in Abbildung 3 dieselbe Seite, nachdem der Seitentitel über die Konsole geändert wurde.
Abbildung 2. Der Konsolenbereich neben der Startseite der Entwicklertools.
Abbildung 3. Verwenden der Konsole zum Ändern des Seitentitels
Sie können die Seite über die Console ändern, da die Console vollständigen Zugriff auf die window der Seite hat. Die Entwicklertools bieten einige Komfortfunktionen, die das Prüfen einer Seite erleichtern. Angenommen, Ihr JavaScript-Code enthält eine Funktion namens hideModal. Wenn Sie debug(hideModal) ausführen, wird Ihr Code in der ersten Zeile von hideModal beim nächsten Aufruf pausiert.
Die vollständige Liste der Dienstprogrammfunktionen finden Sie in der Console Utilities API-Referenz.
Wenn Sie JavaScript ausführen, müssen Sie nicht mit der Seite interagieren. Sie können mit der Console neuen Code
ausprobieren, der nichts mit der Seite zu tun hat. Angenommen, Sie haben gerade die integrierte JavaScript-Array-Methode map() kennengelernt und möchten damit experimentieren. Die Console ist ein guter Ort,
um die Funktion zu testen.
Unter Erste Schritte mit der Ausführung von JavaScript können Sie praktische Erfahrungen mit dem Ausführen von JavaScript in der Console sammeln.