Auf dieser Seite wird erläutert, wie die Entwicklertools-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 häufig Meldungen in der Konsole, um sicherzustellen, dass ihr JavaScript
zu erwarten war. Um eine Nachricht zu protokollieren, fügen Sie einen Ausdruck wie console.log('Hello, Console!') in Ihr
JavaScript Wenn der Browser Ihren JavaScript-Code ausführt und einen solchen Ausdruck erkennt, weiß er,
die Meldung in der Console protokollieren soll. Angenommen, Sie befinden sich in der
den HTML- und JavaScript-Code für eine Seite 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>
Abbildung 1 zeigt, wie die Konsole aussieht, nachdem die Seite geladen wurde und drei Sekunden gewartet wurde. Versuchen Sie, herausfinden, welche Codezeilen dazu geführt haben, dass 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
Unter Erste Schritte mit Logging von Nachrichten können Sie praktische Erfahrungen mit der Protokollierung sammeln. Weitere Informationen finden Sie in der Console
API-Referenz, um die vollständige Liste der console-Methoden zu durchsuchen. Der Hauptunterschied zwischen den
Methode ist, wie sie die von Ihnen protokollierten Daten anzeigen.
JavaScript ausführen
Die Konsole ist auch eine REPL. Du kannst JavaScript in der Konsole ausführen, um mit der Seite zu interagieren die Sie prüfen. Auf Abbildung 2 ist beispielsweise die Konsole neben der Entwicklertools-Startseite zu sehen. und Abbildung 3 zeigt 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
Das Ändern der Seite über die Konsole ist möglich, da die Konsole vollen Zugriff auf die
window Die Entwicklertools bieten einige Komfortfunktionen, die das Prüfen einer Seite erleichtern. Für
Angenommen, Ihr JavaScript-Code enthält eine Funktion namens hideModal. Laufen
debug(hideModal) pausiert Ihren Code in der ersten Zeile von hideModal beim nächsten Aufruf.
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 die Konsole verwenden, um
neuen Code, der nichts mit der Seite zu tun hat. Angenommen, Sie haben gerade die integrierten
JavaScript-Array-Methode map(), die Sie ausprobieren möchten. Die Konsole ist eine gute
um die Funktion auszuprobieren.
Lesen Sie den Artikel Erste Schritte mit dem Ausführen von JavaScript, um praktische Erfahrungen mit der Ausführung von JavaScript in in der Konsole.