Expert talks | Devtools, elke webdeveloper's beste vriend

Om een website te testen en te tweaken, is het essentieel dat webdevelopers handige tools kunnen gebruiken die geïntegreerd zijn in een browser. Daarom bestaan er Devtools. Deze tools van Google Chrome en Mozilla Firefox kent iedere developer, maar over laatst heeft ook Microsoft Egde (de default browser van Windows 10) zijn devtools bijgewerkt. Proberen ze in de top league te komen?

In deze Expert talk worden verschillende tips en tricks uitgelegd die je misschien nog niet wist.

Core tools

Aangezien iedereen de devtools van Google Chrome, Mozilla Firefox en Microsoft Edge kent, gaan we hier niet te diep op ingaan. Hieronder geven we een korte opsomming van de core tools die elk van deze devtools bezit;

• De inspect tool / Elements tab

Deze tool wordt gebruikt om elementen te selecteren op de website en zo de HTML en CSS te kunnen manipuleren en uittesten tot je het gewenste resultaat bereikt. Natuurlijk moet je deze dan nog overnemen naar de code zelf.

• De mobile simulation / Device Emulation

De mobile simulation maakt het mogelijk om je website op verschillende schermgroottes te bekijken. Zit alles juist op mobile, tablet, desktop, custom width & height,...?

• De Console

Deze core tool wordt vooral gebruikt om JavaScript logs, warnings, errors te zien / uit te lezen.

• De Source tab

De source tab toont alle scripts en snippets die ingeladen worden op de pagina.

• De Network tab

De Network tab toont elk element dat wordt ingeladen, hoe ze inladen, het type bestand, de grootte van het bestand, de tijd die nodig is om te laden en een tijdlijn van het moment en de volgorde waarin de pagina wordt geladen. Deze core tool kan worden gebruikt om netwerkproblemen op te lossen, zoals knelpunten bij het laden van pagina's en slechte verzoeken.

• De Settings van de devtools

Hier kan je jouw devtools meer personaliseren. Waar plaats je ze in het scherm? Links, rechts, onderaan... Je kan ze aanpassen, volledig volgens jouw eigen voorkeuren.

Deze opgesomde features worden volgens ons het meest gebruikt, maar natuurlijk bestaat er nog zoveel meer.

Shortcuts + Tips & Tricks

Algemene

Hieronder worden enkele interessante shortcuts en tips & tricks opgelijst die gelden voor deze devtools.

• Het openen van de Command Menu (Chrome, Microsoft Edge)

Cmd Shift P / Ctrl Shift P : opent een zoekbalk voor alle tabs, features en pannels over de devtools.

Cmd P / Ctrl P : opent een zoekbalk voor alle files, zoals images, JavaScript etc.

• Het openen van de Settings:

Google Chrome : Shift ?

Firefox : F1

• Inspect element mode: Cmd Shift C / Ctrl Shift C
• Device modus / Responsive mode / Mobile scherm:

Google Chrome : Cmd Shift M / Ctrl Shift M

Firefox : Cmd Opt M / Ctrl Alt M

• om het formaat te veranderen van de kleurcode in de css debugger (naar HEX, RGBA of HSL): Shift Click op kleurbox (Chrome - Firefox)

Google Chrome

• Deze devtools hebben een ingebouwde "Prettier", tab resources > minified file > klik {} die onderaan staan. Zo gaan de devtools jouw file formatteren.
• Doorzoek jouw source code op kernwoorden, met: "Cmd Opt F / Ctrl Shift F".
• Een gekendere tip is het gebruik maken van Breakpoints bij het debuggen van de JavaScript. Activeer deze door te klikken op de lijn waar je jouw breakpoint wilt plaatsen en refresh dan de pagina. Nu zal deze runnen tot het punt van de breakpoint.
• Gebruik "Cmd Click / Ctrl Click" indien je op meerdere plaatsen tegelijk hetzelfde wil typen.
• Gebruik "Cmd Shift D / Ctrl Shift D" om jouw dock te verplaatsen i.p.v. telkens in de settings te moeten kijken.
• Toggle Element State om hidden styles, zoals :hover of :active weer te geven. Na het aanduiden van jouw keuze zie je de eigenschappen in de Style tab.
• Network filmstrip feature wordt gebruikt om in de network tab screenshots te zien van hoe jouw website laadt. Dit is handig om het laden van je fonts te checken.

Mozilla Firefox

• Hot & Cold Profiling kan je gebruiken om een visuele prestatie-analyse uit te voeren op de HTTP-verzoeken van je website. Met "Network tab > stopwatch icon >" laadt het Netwerk jouw website twee keer; één keer met een lege browsercache (Cold method) en één keer met een geprimede browsercache (Hot method).
• Net zoals bij Google Chrome is er een Breakpoint functionaliteit voorzien. Bij Mozilla Firefox is deze iets uitgebreider, waardoor je ook op een url een breakpoint kan plaatsen.
• Bij het inspecteren van een element kan je op de letter "h" drukken om het element te hidden of terug te tonen.
• Om snel naar een element te springen die nog niet in beeld is kan je hem selecteren in de elements tab en dan op de letter "s" drukken om hem in beeld te scrollen.
• "esc" opent de split console tab onder de elements tab.
• Schrijf "Ctrl Alt F" in de debugger om te zoeken in alle scripts.
• Bij het debuggen van CSS properties krijg je tips als de CSS regel genegeerd wordt, omdat die afhankelijk is van de waarde van een andere property. Bijvoorbeeld "width property" heeft geen effect omdat dit element op "display inline" staat, probeer in de plaats "display inline-block" of "display block".

Microsoft Edge

• F12 voor het openen van de devtools