Tips & Tricks

10 tips voor Chrome DevTools

Debuggen is minstens even belangrijk als het schrijven van code. Developers moeten daarom zeer goed weten hoe ze het best debuggen. Toch is het niet altijd even vanzelfsprekend om te zoeken naar foutjes en bugs. Gelukkig is er Chrome DevTools, die debugging een pak makkelijker, sneller en effici?nter maakt.

Wij geven je onze top 10-tips om aan de slag te gaan met Chrome DevTools.

Tip 1:


Soms wil je de hover state of het focus effect van een bepaald onderdeel zien, zonder dit manueel na te bootsen. Chrome DevTools maakt het mogelijk om dit effect te simuleren. Daarnaast kan je ook kiezen voor ?Active?, ?Focus? en ?Visited?.

Tip 2:

Wanneer je een pagina stijlt, maak je doorgaans gebruik van CSS. Alle code wordt dan gebundeld in ??n document, wat het moeilijker maakt om de exacte lijn voor een CSS-rule terug te vinden. Je kan klikken op de file-link, waardoor de volledige file opent en niet enkel de rule die jij nodig hebt. Het is daarom beter om CTRL in te drukken wanneer je op een CSS-rule klikt, waarmee je meteen naar die specifieke rule gaat.

Tip 3:


Je kan jQuery of Vanilla-JavaScript gebruiken om een event listener aan een DOM-element toe te voegen. Zo kan je meteen checken wat er gebeurt. JavaScript heeft nog een andere interessante functie: monitorEvents (DOMelement,type). Deze functie maakt een opsomming van alle events en slaat deze op in de console.

Tip 4:


Wil je een DOM-element debuggen (zoals een klasse toe te voegen)? Dan gebruik je document.querySelector om dat specifieke item te bewerken. Dat is relatief eenvoudig wanneer dat item een ID is, maar soms heb je het derde item uit een rij nodig. Zonder Chrome DevTools moet je extra code schrijven om dit specifieke item te krijgen. Dat kost heel wat debug-tijd! Daarom kan je $0 gebruiken. $0 is altijd hetzelfde wanneer je het selecteert in het Elements-tabblad. Handig wanneer je extra code wil vermijden!

Tip 5:


Je kent het vast en zeker wel: tijdens het debuggen maak je een selector, je wijst er geen variabele aan toe, maar in de volgende functie heb je dezelfde selector opnieuw nodig. Dan moet je opnieuw beginnen en de variabele toewijzen? of je kan kiezen voor $_ om je vorige returnwaarde opnieuw te krijgen. Deze zal gelijk zijn aan $_. Var test= document.querySelector(?.mark?) hideDiv(test) document.querySelector(?.mark?) hideDiv($_)

Tip 6:


Dit probleem ken je ook zeker wel. Je wil een lang object dat kopi?ren, maar scrollen maakt het moeilijk om dit object volledig te selecteren. Of je wil gewoon fetchen en die data opslaan als een JSON. Chrome DevTools heeft hier een oplossing voor, waarbij je de parameter kan toevoegen aan je clipboard. Gedaan met vloeken en scroll-issues!

Tip 7:

Je wil een screenshot maken van een specifiek gedeelte van de website, of je wil verschillende mogelijkheden van een bepaald element (bv. een button) laten zien. Dan heb je drie mogelijkheden:?

  1. Je maakt een screenshot en bewerkt deze in PhotoShop
  2. Je gebruikt de cutting tool van Mac om het juiste gedeelte te selecteren
  3. Je gebruikt DevTools om een screenshot van het geselecteerde element te maken

Wij verkiezen C! ?

Tip 8:


Deze situatie ken je ook wel: je bent bezig aan een feature, maar de namen van je classes zijn gewijzigd. Hoe weet je dan waar iets veranderd is (denk maar aan andere libraries)? Je kan doorheen alle lijnen code gaan en die specifieke class zoeken. Wanneer je het probleem niet meteen vindt, kan debuggen veel tijd en geld kosten. Gelukkig kan je hiervoor een DOMelement aanpassen. Dit is mogelijk voor een wijziging van attributen (classes) en childs, maar ook wanneer je een DOMElement verwijdert.

Tip 9:


Chrome Canary (versie 59.x+) maakt het leven van developers een pak makkelijker. Je hebt tegenwoordig ?Intelligent Code Completion?. Een voorbeeld: wanneer je een DOMElement hebt, krijg je meteen ook toegang tot extra functies die je kan gebruiken. Handig wanneer je een functie vergeten bent! Daarnaast zijn we ook grote fan van de autocomplete, die parameters aanvult om het hele verhaal te laten werken.

Tip 10:

We eindigen met een kleine tip: een array loggen is doorgaans niet simpel. De console.log stuurt immers een ganse lijst terug met items die je apart moet openen en controleren. De functie Console.table vergemakkelijkt dit volledige proces. Die laat de array in een tabel zien, waardoor je deze makkelijker kan lezen en sneller ziet welk item je nodig hebt.

Bonus! Wist je dat…


Wanneer je comments plaatst met een kleur in de naam, deze meteen naar de juiste kleur aangepast worden? Wanneer je ?Blue? typt, wordt dit meteen gewijzigd in de kleur blauw.

Ook interessant:

Zo word je een Microsoft MVP

First things first: wat is een Microsoft MVP? Wanneer we er de officiële omschrijving van Microsoft’s MVP-site bijhalen,...

Lees verder

Redux vervangen door React Context?

React 16.3 zag niet zo heel lang geleden het levenslicht. Deze nieuwe release bracht verschillende nieuwe functies met...

Lees verder

Je app monitoren met Application Insights

Laten we heel eerlijk zijn: het was nog nooit zo gemakkelijk om een applicatie te creëren en te...

Lees verder