Dingen die u waarschijnlijk niet wist, kunt u doen met de ontwikkelaarsconsole van Chrome

Chrome wordt geleverd met ingebouwde ontwikkelaarstools. Dit wordt geleverd met een breed scala aan functies, zoals elementen, netwerk en beveiliging. Vandaag concentreren we ons 100% op de JavaScript-console.

Toen ik begon met coderen, gebruikte ik de JavaScript-console alleen voor het loggen van waarden zoals reacties van de server of de waarde van variabelen. Maar na verloop van tijd, en met behulp van tutorials, ontdekte ik dat de console veel meer kan dan ik ooit had gedacht.

Hier zijn enkele nuttige dingen die u ermee kunt doen. Als u dit in Chrome (of een andere browser) op een desktop leest, kunt u zelfs de ontwikkelaarstools openen en deze onmiddellijk uitproberen.

1. Selecteer DOM-elementen

Als je bekend bent met jQuery, weet je hoe belangrijk de $ (‘. class’) en $ (‘# id’) selectors zijn. Ze selecteren de DOM-elementen afhankelijk van de klasse of ID die eraan is gekoppeld.

Maar als je geen toegang hebt tot jQuery in de DOM, kun je nog steeds hetzelfde doen in de ontwikkelaarsconsole.

$ (‘tagName’) $ (‘. class’) $ (‘# id’) en $ (‘. class #id’) zijn gelijk aan document.querySelector (‘‘). Dit retourneert het eerste element in de DOM dat overeenkomt met de selector.

U kunt $$ (‘tagName’) of $$ (‘. class’) gebruiken – let op de dubbele dollartekens – om alle elementen van de DOM te selecteren, afhankelijk van een bepaalde selector. Dit plaatst ze ook in een array. U kunt weer doorgaan en een bepaald element eruit selecteren door de positie van dat element in de array op te geven.

$$ (‘. className’) geeft je bijvoorbeeld alle elementen met class className, en $$ (‘. className’) [0] en $$ (‘. className’) [1] geeft je respectievelijk het eerste en het tweede element.

2. Verander uw browser in een editor

Hoe vaak heeft u zich afgevraagd of u tekst in de browser zelf zou kunnen bewerken? Het antwoord is ja, u kunt uw browser omzetten in een teksteditor. U kunt overal in de DOM tekst toevoegen en tekst verwijderen.

U hoeft het element niet meer te inspecteren en de HTML te bewerken. Ga in plaats daarvan naar de ontwikkelaarsconsole en typ het volgende:

Hierdoor wordt de inhoud bewerkbaar. U kunt nu bijna alles en nog wat in de DOM bewerken.

3. Vind gebeurtenissen die verband houden met een element in de DOM

Tijdens het debuggen moet u geïnteresseerd zijn in het vinden van de gebeurtenisluisteraars die zijn gebonden aan een element in de DOM. De ontwikkelaarsconsole maakt het gemakkelijker om deze te vinden.

getEventListeners ($ (‘selector’)) retourneert een reeks objecten die alle gebeurtenissen bevat die aan dat element zijn gebonden. U kunt het object uitvouwen om de gebeurtenissen te zien:

Om de luisteraar voor een bepaald evenement te vinden, kun je zoiets als dit doen:

Hierdoor wordt de luisteraar weergegeven die is gekoppeld aan een bepaalde gebeurtenis. Hier is eventName [0] een array die alle events van een bepaalde event weergeeft. Bijvoorbeeld:

… zal de luisteraar weergeven die is gekoppeld aan de klikgebeurtenis van het element met ID ‘firstName’.

4. Gebeurtenissen volgen

Als u de gebeurtenissen die aan een bepaald element in de DOM zijn gebonden wilt volgen terwijl ze worden uitgevoerd, kunt u dit ook in de console doen. Er zijn verschillende commando’s die u kunt gebruiken om enkele of al deze gebeurtenissen te volgen:

5. Zoek het tijdstip van uitvoering van een codeblok

De JavaScript-console heeft een essentiële functie genaamd console.time (‘labelName’) die een labelnaam als argument aanneemt en vervolgens de timer start. Er is nog een andere essentiële functie genaamd console.timeEnd (‘labelName’) die ook een labelnaam aanneemt en de timer beëindigt die aan dat specifieke label is gekoppeld.

Bijvoorbeeld:

De bovenstaande twee regels code geven ons de tijd die nodig is tussen het starten van de timer en het beëindigen van de timer.

We kunnen dit verbeteren om de tijd te berekenen die nodig is voor het uitvoeren van een codeblok.

Laten we bijvoorbeeld zeggen dat ik de tijd wil vinden die nodig is voor het uitvoeren van een lus. Ik kan als volgt doen:

6. Schik de waarden van een variabele in een tabel

Laten we zeggen dat we een reeks objecten hebben die er als volgt uitziet:

Wanneer we de variabelenaam in de console typen, geeft het ons de waarden in de vorm van een reeks objecten. Dit is erg handig. U kunt de objecten uitvouwen en de waarden zien.

Maar dit wordt moeilijk te begrijpen wanneer de eigenschappen toenemen. Om een ​​duidelijke weergave van de variabele te krijgen, kunnen we deze daarom in een tabel weergeven.

console.table (variableName) vertegenwoordigt de variabele en al zijn eigenschappen in een tabelstructuur. Hier is hoe dit eruit ziet:

7. Inspecteer een element in de DOM

U kunt een element rechtstreeks vanuit de console inspecteren:

8. Maak een lijst van de eigenschappen van een element

Als u alle eigenschappen van een element wilt weergeven, kunt u dat rechtstreeks vanuit de console doen.

dir ($ (‘selector’)) geeft een object terug met alle eigenschappen die zijn gekoppeld aan het DOM-element. U kunt deze uitvouwen om ze in meer detail te bekijken.

9. Haal de waarde van uw laatste resultaat op

U kunt de console als rekenmachine gebruiken. En wanneer u dit doet, moet u wellicht de ene berekening opvolgen met een tweede. Hier leest u hoe u het resultaat van een eerdere berekening uit het geheugen haalt:

Hier is hoe dit eruit ziet:

10. Wis de console en het geheugen

Als je de console en zijn geheugen wilt wissen, typ je gewoon:

Druk vervolgens op enter. Dat is alles.

Dit zijn slechts enkele voorbeelden van wat u kunt doen met de JavaScript-console van Chrome. Ik hoop dat deze tips je leven een beetje gemakkelijker maken.

Bedankt voor het lezen. Als je dit bericht leuk vond, voel je dan vrij om het aan andere mensen hier op Medium aan te bevelen door op de onderstaande hartknop te drukken. Je kunt meer over mij vinden, of volg me op Twitter, en hier op Medium.