Voer JavaScript uit in de console

Kayce Basques

Deze interactieve handleiding laat zien hoe je JavaScript uitvoert in de Chrome DevTools- console. Zie Aan de slag met het loggen van berichten om te leren hoe je berichten naar de console kunt loggen. Zie Aan de slag met het debuggen van JavaScript om te leren hoe je JavaScript-code kunt pauzeren en regel voor regel kunt doorlopen.

Afbeelding 1. De console .

Overzicht

De console is een REPL , wat staat voor Read, Evaluate, Print en Loop. Het leest de JavaScript-code die je typt, evalueert je code, print het resultaat van je expressie en keert vervolgens terug naar de eerste stap.

DevTools instellen

Deze handleiding is zo ontworpen dat u de demo kunt openen en alle workflows zelf kunt uitproberen. Door de stappen fysiek te volgen, is de kans groter dat u de workflows later onthoudt.

1. Druk op Command+Option+J (Mac) of Control+Shift+J (Windows, Linux, ChromeOS) om de console te openen, direct hier op deze pagina.

   

   Afbeelding 2. Deze handleiding aan de linkerkant en DevTools aan de rechterkant.

Bekijk en wijzig de JavaScript of DOM van de pagina.

Bij het bouwen of debuggen van een pagina is het vaak handig om commando's in de console uit te voeren om het uiterlijk of de werking van de pagina te wijzigen.

1. Let op de tekst in de knop hieronder.

   Hallo wereld!

2. Typ in de console document.getElementById('hello').textContent = 'Hello, Console!' en druk op Enter om de expressie te evalueren. Let op hoe de tekst in de knop verandert.

   

   Afbeelding 3. Hoe de console eruitziet na het evalueren van de bovenstaande expressie.

   Onder de code die je hebt geëvalueerd zie je "Hello, Console!" . Denk aan de 4 stappen van de REPL: lezen, evalueren, afdrukken, herhalen. Na het evalueren van je code print een REPL het resultaat van de expressie. Dus "Hello, Console!" moet het resultaat zijn van het evalueren document.getElementById('hello').textContent = 'Hello, Console!' .

Voer willekeurige JavaScript-code uit die geen verband houdt met de pagina.

Soms wil je gewoon een code-speeltuin waar je code kunt testen of nieuwe JavaScript-functies kunt uitproberen waar je nog niet bekend mee bent. De console is daarvoor de perfecte plek.

1. Typ 5 + 15 in de console. Het resultaat 20 verschijnt onder je expressie (tenzij de evaluatie van je expressie te lang duurt).
2. Druk op Enter om de expressie te evalueren. De console print het resultaat van de expressie onder uw code. Figuur 4 hieronder laat zien hoe uw console eruit zou moeten zien na het evalueren van deze expressie.

3. Typ de volgende code in de console . Probeer de code teken voor teken over te typen in plaats van te kopiëren en plakken.

   function add(a, b=20) {
     return a + b;
   }
   

4. Roep nu de functie aan die je zojuist hebt gedefinieerd.

   add(25);
   

   

   Afbeelding 4. Hoe de console eruitziet na het evalueren van de bovenstaande expressies.

   add(25) evalueert naar 45 omdat wanneer de add functie wordt aangeroepen zonder tweede argument, b standaard 20 is.

Je kunt in deze consolesessie geen code uitvoeren totdat je functie is teruggekeerd. Als dat te lang duurt, kun je de tijdrovende berekening annuleren via Taakbeheer ; dit zal er echter ook voor zorgen dat de huidige pagina niet meer wordt weergegeven en alle ingevoerde gegevens verloren gaan.

Volgende stappen

Zie JavaScript uitvoeren voor meer informatie over het uitvoeren van JavaScript in de console.

Met DevTools kun je een script pauzeren tijdens de uitvoering. Terwijl het script gepauzeerd is, kun je de console gebruiken om het window of DOM van de pagina op dat moment te bekijken en aan te passen. Dit zorgt voor een krachtige workflow voor het debuggen. Zie Aan de slag met het debuggen van JavaScript voor een interactieve handleiding.

De console ondersteunt ook een aantal opmaakspecificaties. Zie ' Berichten opmaken en stylen in de console' voor een overzicht van alle methoden om consoleberichten op te maken en te stylen.

Daarnaast beschikt de console ook over een aantal handige functies die de interactie met een pagina vereenvoudigen. Bijvoorbeeld:

• In plaats van document.querySelector() te typen om een ​​element te selecteren, kun je $() typen. Deze syntax is geïnspireerd op jQuery, maar het is niet daadwerkelijk jQuery. Het is slechts een alias voor document.querySelector() .
• debug(function) plaatst effectief een breakpoint op de eerste regel van die functie.
• keys(object) retourneert een array met de sleutels van het opgegeven object.

Raadpleeg de API-referentie voor consolehulpprogramma's om alle handige functies te ontdekken.