Voer JavaScript uit in de console

Kayce Basques

Deze interactieve tutorial laat zien hoe u JavaScript uitvoert in de Chrome DevTools Console. Zie Aan de slag met het loggen van berichten voor informatie over het loggen van berichten in de console. Zie Aan de slag met het debuggen van JavaScript voor informatie over hoe u JavaScript-code kunt onderbreken en er regel voor regel doorheen kunt gaan.

Figuur 1 . De console .

Overzicht

De console is een REPL , wat staat voor Read, Evaluate, Print en Loop. Het leest het JavaScript dat u erin typt, evalueert uw code, drukt het resultaat van uw expressie af en keert vervolgens terug naar de eerste stap.

DevTools instellen

Deze tutorial is zo ontworpen dat u de demo kunt openen en alle workflows zelf kunt uitproberen. Wanneer u fysiek meevolgt, 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, precies hier op deze pagina.

   

   Figuur 2 . Deze tutorial aan de linkerkant en DevTools aan de rechterkant.

Bekijk en wijzig het JavaScript of DOM van de pagina

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

1. Let op de tekst in de onderstaande knop.

   Hallo, Wereld!

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

   

   Figuur 3 . Hoe de console eruitziet na evaluatie van de bovenstaande uitdrukking.

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

Voer willekeurig JavaScript uit dat niet gerelateerd is aan de pagina

Soms wil je gewoon een codespeelplaats waar je wat code kunt testen, of nieuwe JavaScript-functies kunt uitproberen waarmee je niet bekend bent. De Console is een perfecte plek voor dit soort experimenten.

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

3. Typ de volgende code in de console . Probeer het karakter voor karakter uit te typen, in plaats van het te kopiëren en te plakken.

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

   Zie standaardwaarden definiëren voor functieargumenten als u niet bekend bent met de b=20 -syntaxis.

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

   add(25);
   

   

   Figuur 4 . Hoe de console eruitziet na evaluatie van de bovenstaande uitdrukkingen.

   add(25) resulteert in 45 omdat wanneer de functie add wordt aangeroepen zonder een tweede argument, b standaard 20 wordt.

U kunt in deze consolesessie geen code uitvoeren totdat uw functie is teruggekeerd. Als dat te lang duurt, kunt u Taakbeheer gebruiken om de tijdrovende berekening te annuleren; Het zal er echter ook voor zorgen dat de huidige pagina mislukt en dat alle gegevens die u hebt ingevoerd verloren gaan.

Volgende stappen

Zie JavaScript uitvoeren voor meer functies met betrekking tot het uitvoeren van JavaScript in de console.

Met DevTools kunt u een script pauzeren terwijl het wordt uitgevoerd. Terwijl u bent gepauzeerd, kunt u de console gebruiken om het window of de DOM van de pagina op dat moment te bekijken en te wijzigen. Dit zorgt voor een krachtige foutopsporingsworkflow. Zie Aan de slag met het debuggen van JavaScript voor een interactieve tutorial.

De console ondersteunt ook een reeks formaatspecificaties. Zie Berichten in de console opmaken en opmaken om alle methoden voor het opmaken en opmaken van consoleberichten te verkennen.

Daarnaast beschikt de console ook over een aantal gemaksfuncties die de interactie met een pagina vergemakkelijken. Bijvoorbeeld:

• In plaats van document.querySelector() te typen om een ​​element te selecteren, kunt u $() typen. Deze syntaxis is geïnspireerd door jQuery, maar is niet echt jQuery. Het is slechts een alias voor document.querySelector() .
• debug(function) stelt effectief een breekpunt in op de eerste regel van die functie.
• keys(object) retourneert een array met de sleutels van het opgegeven object.

Zie Console Utilities API Reference om alle gemaksfuncties te verkennen.