Beter klussen met de Chrome Developer Tools

-

Van een schilderijtje ophangen tot een badkamer verbouwen: we klussen met z’n allen heel wat af. Zelf ben ik niet ‘s werelds meest begaafde klusser, maar één ding heb ik wel geleerd: behalve handigheid (en motivatie) is goed gereedschap een belangrijk onderdeel om je project zo goed mogelijk te laten verlopen. Als frontend ontwikkelaar is dat eigenlijk niet anders. Goede tools, en goed gebruik daar van, zorgen ervoor dat je project beter en efficiënter kan verlopen.

Eén van de meest gebruikte tools die ik zelf, en waarschijnlijk vele frontend developers met mij, veel gebruik is de DevTools functionaliteit in Chrome. Inspect Element is een bekende functie, maar er is nog ontzettend veel meer uit deze tools te halen. Hierbij een lijstje met 10 handige functionaliteiten die je veel tijd kunnen besparen:

Slepen die content!

Even kijken of de geselecteerde div (inclusief content) niet beter buiten zijn huidige parent div kan staan? Geen probleem: je kunt de geselecteerde div gewoon naar de gewenste positie in je code slepen.

Chrome Developer Tools: sleep content

Verschillende linkstatussen zonder moeilijk te doen

De kleur van een link die aangepast wordt bij een hover. Om deze stijl te zien moet je over de link in kwestie hoveren en tegelijk in de devbar kijken. Vrij onhandig. Een stuk makkelijker is met je rechter muisknop op de link klikken in de code (in de elements tab) en via Force state element een link status te kiezen. Het forceren van een andere state kan ook door op de punaise te klikken nadat je de link hebt geselecteerd.

Chrome Developer Tools: verander link state

Waar zit dat element eigenlijk?

Wanneer je door de DOM-elementen loopt kun je ook bij elementen komen die niet op je scherm getoond worden. Bijvoorbeeld de footer. Om het betreffende element in beeld te krijgen is het een kwestie van een rechter muis klik en kiezen voor Scroll into view en voila! Daar is je element.

Chrome Developer Tools: scroll into view

Elementen zoeken in de console

Elementen snel zoeken en selecteren in de console is een andere handige functie. Er zijn verschillende opties:

  • $() is een korte versie van document.querySelector(). Wanneer je zoekt op bijvoorbeeld $(‘div’) zal het eerste div element in je console getoond worden. Zoeken op een classname kan natuurlijk ook: $('.className').
  • $$() is de variant voor document.querySelectorAll() en geeft alle matchende elementen terug.
  • $0 - $4 geeft de laatste 5 door jou in de DOM-inspector geselecteerde elementen terug. Waarbij $0 het meest recent geselecteerde element is.

Het gevonden of de gevonden element(en) wordt nu in de console getoond en geeft je de mogelijkheid om de code te bekijken. Wanneer je de gevonden code in de elements tab wilt zien is het een kwestie van rechter muisknop op de code en kiezen voor Reveal in elements panel.

Chrome Developer Tools: selecteer element in console

Weg met de minified scripts!

Als een echte frontend developer heb je natuurlijk je CSS en Javascript bestanden geminified. Enige uitdaging: even snel iets opzoeken in een minified versie van een CSS of JS bestand is geen pretje, zo niet onmogelijk. De Pretty print optie is een goede om te onthouden. Selecteer in de sources tab het geminifiede bestand en klik op het Pretty print symbool, {}, voor een leesbare versie van het bestand.

Chrome Developer Tools: pretty print

Kleuren aanpassen

Even kijken of de kleur van je achtergrond net even iets anders kan? De inspector biedt je alle mogelijke opties met een zeer uitgebreide color-picker. Je kunt zelfs kleuren op de huidige pagina op de pixel nauwkeurig selecteren en gebruiken voor het element.
Bonus tip: met SHIFT + klik op de kleur switch je tussen de HEX, rba en hsl notatie van die kleur.

Chrome Developer Tools: selecteer een kleur

Herladen kan op vele manieren

Wanneer je de Developer console open het staan kun je via de refresh button de pagina op verschillende manieren herladen. Om de opties te bekijken moet je heel de even de refresh button aangeklikt houden en de opties verschijnen. Spoiler alert: de beschikbare opties zijn:

  • Normaal herladen (vergelijkbaar met CTRL + R)
  • Geforceerd opnieuw laden (vergelijkbaar met CTRL + SHIFT + R)
  • Cache wissen en geforceerde opnieuw laden.

Chrome Developer Tools: reload

Afbeelding lokaal opslaan

Wanneer je een (achter)grond afbeelding lokaal wilt opslaan, dan kan dat op meerdere manieren. De meest makkelijke manier is de afbeelding in de resources tab bekijken en deze naar je bureaublad slepen.

Chrome Developer Tools: afbeelding opslaan

Een XHR request opnieuw uitvoeren

In de Network tab kun je alle netwerk requests vinden die er gemaakt worden. Zo ook de XHR requests. Soms wil je niet de hele pagina verversen, maar alleen even die ene specifieke ajax-call opnieuw uit laten voeren. Dit is gemakkelijk te doen door met je rechter muisknop te klikken op de request en te kiezen voor Replay XHR.

Chrome Developer Tools: replay xhr

Behoud je console log, ook na een nieuwe page load

Wanneer je een pagina aan het debuggen bent, dan is er niets zo irritant als een console log scherm dat telkens wanneer je naar een andere pagina navigeert, of de huidige pagina herlaadt, weer leeg gemaakt wordt. De oplossing is vrij simpel: zet de Preserve log functie aan in je console scherm.

Chrome Developer Tools: preserve log

Dit is nog maar een kleine greep uit de mogelijkheden die de Chrome DevTools biedt. Goed gebruik maken van de tools kan het debuggen van je code een stuk makkelijker en sneller maken. De regelmatige updates van Chrome zorgen ervoor dat de DevTools steeds krachtiger worden. Hou de updates dus goed in de gaten en ga vooral aan de slag met de tools, voor je het weet ben je volleerd ‘klusser’ met al het gereedschap dat Chrome je biedt.

Bron afbeelding Todd Quackenbush / Unsplash