Ontwikkelaarsopties Google Chrome waar iedereen wat aan heeft

Start Google Chrome, ga naar het menu Instellingen, Meer hulpprogramma’s en naar Hulpprogramma’s voor ontwikkelaars. Je kunt ook op Ctrl+Shift+I drukken, maar met functietoets F12 gaat het net wat sneller. Aan verschillende kanten verschijnen vensters waarmee je een kijkje achter de webbrowser-schermen kunt nemen, en waarmee je Google Chrome speciale opdrachten kunt geven. Kijk om te beginnen eens naar de menu-optie Dock side, want daarmee bepaal je de positie van dat venster; boven, onder, links of recht.

Er zijn hier veel opties te vinden, maar we concentreren ons op een klein deel ervan, waar je veel plezier van zult hebben. We kijken in het bijzonder naar de keuze Run command en de bijbehorende toetscombinatie Ctrl+Shift+P. Die zorgt ervoor dat er een soort van opdrachtregel tevoorschijn springt waarmee je Google Chrome concrete commando’s kunt geven en waarmee je alvast door een pulldown-menu met mogelijkheden kunt scrollen.

Inderdaad, een hoop opties. We richten ons op de handigste commando’s!

Screenshots van websites

Begin met het typen van het trefwoord screenshot. In de pulldown-lijst met commando’s blijft dan uiteindelijk dit viertal over:

Capture area screenshot: Er verschijnt een cursor waarmee je precies kunt aangeven welk gedeelte van de pagina je wilt bewaren. Dit is bedoeld om alleen het meest noodzakelijke beeldmateriaal te bewaren, en achteraf knippen is niet meer nodig.

Capture full size screenshot: De complete webpagina wordt bewaard. Daarmee heb je in één keer alles te pakken.

Capture node screenshot: Een met behulp van de zogeheten Inspector geselecteerd element wordt individueel weggeschreven. Daarmee kun je bijvoorbeeld dat ene plaatje toch te pakken krijgen.

Capture screenshot: Wat je op dat moment in de webbrowser heeft staan, wordt bewaard. Dit is min of meer de standaard schermafbeelding, maar dan wel zonder hinderlijke randen.

Wissel tussen mobiele en desktopsite

De meeste moderne websites hebben een desktopvariant en een mobiele variant. Als webbouwer wil je webpagina’s op beide manieren kunnen testen en als bezoeker heb je weleens een website waarvan de mobiele variant gewoon prettiger wegleest.

Google Chrome heeft enkele commando’s die hiermee te maken hebben. Blader door het pulldown-menu of gebruik mobile als trefwoord:

Show/Hide device frame: Waar van toepassing krijg je een voorbeeld van het mobiele apparaat dat je hebt ingesteld.

Show/Hide rulers: Om de liniaal te tonen of weg te laten. Dit is bedoeld als hulpmiddel voor de ontwikkelaars die per se pixel perfect willen werken.

Show/Hide media queries: Om kenbaar te maken wanneer er speciale CSS-elementen worden gebruikt. Dit heeft meestal te maken met de breedte van het scherm.

Toggle device toolbar: Je kunt ook de toetscombinatie Ctrl+Shift+M gebruiken om te schakelen tussen de normale en de mobiele variant van de website.

Website opnieuw laden

Soms lijkt het alsof een webpagina vastloopt of weigert netjes te laden. Meestal grijp je dan naar de toetscombinatie Ctrl+Shift+Delete om de internetgeschiedenis weg te gooien, waarna je dezelfde webpagina nogmaals probeert te laden. Je kunt ook een van deze twee commando’s gebruiken die je te zien krijgt als je navigation als trefwoord gebruikt:

Hard reload page of Ctrl+Shift+R: De browser-cache voor de huidige pagina wordt geleegd en de pagina wordt opnieuw ingelezen.

Reload page of Ctrl+R: De huidige pagina wordt opnieuw ingelezen, maar er wordt rekening gehouden met de bestaande cache voor deze huidige pagina.

Overige opties

Gebruik nu het trefwoord network om te kijken welke commando’s er overblijven in het pulldown-menu. We noemen tot slot de volgende opties:

Go offline: Hiermee haal je Google Chrome van internet af. De webbrowser werkt vanaf dat moment offline. Kan weleens reuze handig zijn uit veiligheidsoverwegingen!

Go online: Hiermee zet je Google Chrome weer op internet. Je bent dan weer gewoon online.

Block ads on this site: Om waar mogelijk advertenties te blokkeren die op de huidige website worden getoond.

Enable/Disable cache: Hiermee kun je de cache van Google Chrome inschakelen of uitschakelen. Browsercache versnelt de surfervaring, maar zorgt soms ook voor ‘ruis’.

Show search: Hiermee opent een speciaal zoekvenster waarmee je achter de schermen in een webpagina kunt zoeken; bijvoorbeeld naar onzichtbaar html-commentaar.