Op deze pagina wordt uitgelegd hoe de Chrome DevTools Console het eenvoudiger maakt webpagina's te ontwikkelen. De console heeft twee belangrijke toepassingen: het bekijken van geregistreerde berichten en het uitvoeren van JavaScript .
Gelogde berichten bekijken
Webontwikkelaars loggen vaak berichten in de console om er zeker van te zijn dat hun JavaScript naar verwachting werkt. Om een bericht te loggen, voegt u een expressie als console.log('Hello, Console!') in uw JavaScript in. Wanneer de browser uw JavaScript uitvoert en een dergelijke uitdrukking ziet, weet hij dat hij het bericht naar de console moet loggen. Stel dat u bijvoorbeeld bezig bent met het schrijven van de HTML en JavaScript voor een pagina:
<!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>
Figuur 1 laat zien hoe de console eruit ziet nadat de pagina is geladen en 3 seconden is gewacht. Probeer erachter te komen welke regels code ervoor zorgden dat de browser de berichten registreerde.
Figuur 1 . Het consolepaneel.
Webontwikkelaars loggen berichten om twee algemene redenen:
- Ervoor zorgen dat de code in de juiste volgorde wordt uitgevoerd.
- Het inspecteren van de waarden van variabelen op een bepaald moment.
Zie Aan de slag met het loggen van berichten voor praktische ervaring met loggen. Zie de Console API Reference om door de volledige lijst met console te bladeren. Het belangrijkste verschil tussen de methoden is de manier waarop ze de gegevens weergeven die u registreert.
JavaScript uitvoeren
De console is ook een REPL . U kunt JavaScript in de console uitvoeren om te communiceren met de pagina die u inspecteert. Figuur 2 toont bijvoorbeeld de console naast de startpagina van DevTools, en figuur 3 toont diezelfde pagina nadat de console is gebruikt om de titel van de pagina te wijzigen.
Figuur 2 . Het Console-paneel naast de DevTools-startpagina.
Figuur 3 . De console gebruiken om de titel van de pagina te wijzigen.
Het wijzigen van de pagina vanuit de console is mogelijk omdat de console volledige toegang heeft tot het window van de pagina. DevTools heeft een aantal gemaksfuncties die het gemakkelijker maken om een pagina te inspecteren. Stel dat uw JavaScript een functie bevat met de naam hideModal . Het uitvoeren van debug(hideModal) pauzeert uw code op de eerste regel van hideModal de volgende keer dat deze wordt aangeroepen. Zie Console Utilities API Reference voor de volledige lijst met hulpprogrammafuncties.
Wanneer u JavaScript gebruikt, hoeft u geen interactie met de pagina te hebben. U kunt de console gebruiken om nieuwe code uit te proberen die geen verband houdt met de pagina. Stel dat u zojuist de ingebouwde JavaScript Array-methode map() hebt leren kennen en ermee wilt experimenteren. De console is een goede plek om de functie uit te proberen.
Zie Aan de slag met het uitvoeren van JavaScript voor praktische ervaring met het uitvoeren van JavaScript in de console.