Verwenden Sie die Console, um JavaScript-Webanwendungen zu testen und zu debuggen.
Übersicht
Auf dieser Seite wird erläutert, wie Sie mit der Console in den Chrome DevTools die Entwicklung von Webseiten vereinfachen. Die Konsole hat zwei Hauptfunktionen: Geloggte Nachrichten ansehen und JavaScript ausführen.
Konsole öffnen
Sie können die Konsole als Steuerfeld oder als Tab im Navigationsbereich öffnen. Weitere Informationen finden Sie in der Feature-Referenz unter Console öffnen.
Geloggte Nachrichten ansehen
Webentwickler loggen häufig Nachrichten in der Konsole, 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 Ihr JavaScript ausführt und einen solchen Ausdruck sieht, weiß er, dass die Meldung in der Konsole protokolliert werden soll. Angenommen, Sie schreiben gerade 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 Console nach dem Laden der Seite und einem Warten von 3 Sekunden aussieht. Versuchen Sie, herauszufinden, welche Codezeilen dazu geführt haben, dass der Browser die Meldungen protokolliert hat.
Abbildung 1. Der Bereich Console (Konsole):
Webentwickler protokollieren Nachrichten aus zwei allgemeinen Gründen:
- Sie sorgen dafür, dass der Code in der richtigen Reihenfolge ausgeführt wird.
- Prüfen der Variablenwerte zu einem bestimmten Zeitpunkt
Unter Erste Schritte mit Logging von Nachrichten können Sie praktische Erfahrungen mit der Protokollierung sammeln. Eine vollständige Liste der console-Methoden finden Sie in der Console API-Referenz. Der Hauptunterschied zwischen den Methoden besteht darin, wie die 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 Seite zu interagieren, die Sie prüfen. In Abbildung 2 ist beispielsweise die Konsole neben der DevTools-Startseite zu sehen. Abbildung 3 zeigt dieselbe Seite, nachdem der Titel über die Konsole geändert wurde.
Abbildung 2. Im Bereich Console neben der Startseite der DevTools.
Abbildung 3. Über die Console den Titel der Seite ändern
Die Seite kann über die Console geändert werden, da die Console vollen Zugriff auf die window der Seite hat. Die Entwicklertools bieten einige praktische Funktionen, 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.
Eine vollständige Liste der Dienstfunktionen finden Sie in der Console Utilities API-Referenz.
Wenn Sie JavaScript ausführen, müssen Sie nicht mit der Seite interagieren. Sie können die Console verwenden, um neuen Code auszuprobieren, der nichts mit der Seite zu tun hat. Angenommen, Sie haben gerade die integrierte JavaScript-Array-Methode map() kennengelernt und möchten damit experimentieren. In der Console können Sie die Funktion ausprobieren.
Unter Erste Schritte mit dem Ausführen von JavaScript finden Sie eine praktische Anleitung zum Ausführen von JavaScript in der Console.