Auf dieser Seite wird erläutert, wie die DevTools-Konsole von Chrome die Entwicklung von Webseiten erleichtert. Die Console wird hauptsächlich für zwei Zwecke verwendet: zum Aufrufen protokollierter Nachrichten und zum Ausführen von JavaScript.
Protokollierte Nachrichten ansehen
Webentwickler protokollieren oft Meldungen in der Console, um zu prüfen, ob 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 erkennt, weiß er, dass er die Nachricht in der Console protokollieren soll. Angenommen, Sie sind dabei, den HTML- und JavaScript-Code für eine Seite zu schreiben:
<!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>
In Abbildung 1 sehen Sie, wie die Konsole nach dem Laden der Seite und einer Wartezeit von 3 Sekunden aussieht. Versuchen Sie herauszufinden, durch welche Codezeilen der Browser die Meldungen protokolliert hat.
Abbildung 1. Das Konsolenfenster.
Es gibt zwei allgemeine Gründe für Webentwickler-Protokollmeldungen:
- Sicherstellen, dass der Code in der richtigen Reihenfolge ausgeführt wird.
- Überprüfen der Werte von Variablen zu einem bestimmten Zeitpunkt
Unter Erste Schritte mit dem Logging von Nachrichten erfahren Sie, wie Sie das Logging in die Praxis umsetzen. In der Console API-Referenz finden Sie eine vollständige Liste der console-Methoden. Der Hauptunterschied zwischen den Methoden besteht darin, wie die von Ihnen protokollierten Daten angezeigt werden.
JavaScript ausführen
Die Konsole ist auch eine REPL. Sie können JavaScript in der Console ausführen, um mit der zu prüfenden Seite zu interagieren. Abbildung 2 zeigt die Konsole neben der Startseite der Entwicklertools. Abbildung 3 zeigt dieselbe Seite, nachdem der Seitentitel mithilfe der Console geändert wurde.
Abbildung 2. Im Bereich „Console“ neben der Startseite der Entwicklertools
Abbildung 3. Seitentitel über die Console ändern
Sie können die Seite über die Console ändern, da sie vollständigen Zugriff auf die window der Seite hat. DevTools bietet einige praktische Funktionen, mit denen Sie eine Seite einfacher überprüfen können. Angenommen, Ihr JavaScript-Code enthält eine Funktion namens hideModal. Wenn Sie debug(hideModal) ausführen, wird Ihr Code beim nächsten Aufruf in der ersten Zeile von hideModal pausiert.
Eine vollständige Liste der Dienstprogrammfunktionen finden Sie in der Referenz zur Console Utilities API.
Wenn Sie JavaScript ausführen, müssen Sie nicht mit der Seite interagieren. In der Console können Sie neuen Code ausprobieren, der keinen Bezug zur Seite hat. Angenommen, Sie haben gerade die integrierte JavaScript-Array-Methode map() kennengelernt und möchten damit experimentieren. Die Konsole ist ein guter Ort,
um die Funktion zu testen.
Unter Erste Schritte mit JavaScript ausführen finden Sie praktische Informationen zum Ausführen von JavaScript in der Console.