Elementen inspecteren op een Chromebook

De functie ‘Elementen inspecteren’ op een Chromebook is een handig hulpmiddel om de front-end code van een website te bekijken – HTML, CSS en zelfs JavaScript. Het is vooral handig voor debuggen of gewoon om uit nieuwsgierigheid aanpassingen te maken, maar houd er rekening mee dat deze wijzigingen slechts tijdelijk zijn. Vernieuw de pagina en alles wordt teruggezet naar de normale staat. Probeer het eens uit als je bezig bent met webdesign of om lay-outproblemen op te lossen. Omdat Chromebooks op Chrome OS draaien, is het proces vrijwel hetzelfde als in de gewone Chrome, maar soms lopen mensen tegen vreemde blokkades aan – vooral op school- of werkapparaten waar beheerdersbeperkingen gelden. Weten hoe je toegang krijgt tot of zelfs sommige van die beperkingen kunt omzeilen, kan dus een redder in nood zijn. Als de normale rechtermuisklikmethode niet werkt – bijvoorbeeld omdat deze is uitgeschakeld of geblokkeerd – kun je een aantal alternatieve manieren proberen. Hier zijn een paar opties om de ontwikkelaarstools op je Chromebook te gebruiken, of je nu gewoon genoeg hebt van de vervelende beperkingen of voor de lol een kijkje wilt nemen in de code van een website.

Elementen inspecteren op een Chromebook

Met behulp van de rechtermuisknop

Dit is de eenvoudigste methode: klik met de rechtermuisknop (of tik met twee vingers als je een trackpad gebruikt) op een element dat je wilt bekijken en selecteer ‘Inspecteren’. In de meeste gevallen wordt het paneel ‘Ontwikkelaarstools’ direct geopend en wordt de code van dat element gemarkeerd. Vrij eenvoudig, toch? Maar soms blokkeren websites het klikken met de rechtermuisknop, vooral als contenteigenaren hun content willen beschermen. In dat geval kun je de meer geavanceerde opties hieronder bekijken. In mijn geval werkt de rechtermuisknop op sommige websites in eerste instantie niet, maar na een snelle paginaverversing of het uitschakelen/deblokkeren van scripts werkt het ineens wel. Vreemd hoe inconsistent die beveiligingen kunnen zijn.

Sneltoetsen gebruiken

Als de rechtermuisknop is uitgeschakeld of als je gewoon te lui bent, is Ctrl + Shift + C je beste vriend. Hiermee activeer je direct dezelfde ‘Inspecteren’-functie. Wanneer de ontwikkelaarstools verschijnen, zie je een klein pijltje linksboven in het toolpaneel. Klik daarop en er verschijnt een kruiscursor. Klik op een willekeurig element op de pagina om alleen dat onderdeel te inspecteren. Het lijkt een snelle manier om direct aan de slag te gaan zonder door menu’s te hoeven navigeren. Op sommige websites werkt deze sneltoets meteen, maar op andere, met name zwaar beveiligde websites, werkt het mogelijk niet tenzij je extra machtigingen hebt ingeschakeld. Want Chrome moet het natuurlijk altijd ingewikkelder maken dan nodig is.

Chrome-menu gebruiken

Als je liever menu’s gebruikt, open je het Chrome-menu door op de drie puntjes ( Vertical Ellipsis ) rechtsboven te klikken. Ga vervolgens naar Meer tools > Ontwikkelaarstools. Daarmee wordt het ontwikkelaarspaneel aan de rechter- of onderkant geopend. Klik daar op het tabblad Elementen en je bent klaar. Om specifieke elementen te inspecteren, klik je op het pijltje in het paneel en tik je op het gedeelte van de pagina dat je wilt analyseren. Eenvoudig, maar let op: als de ontwikkelaarstools geblokkeerd zijn, werkt het mogelijk niet. Soms helpt het om Chrome opnieuw op te starten of de cache te wissen om de machtigingen te vernieuwen, maar op schoolapparaten kan dat zomaar mislukken.

Ontwikkelaarstools deblokkeren of meer geavanceerde trucs

Als je een Chromebook met beperkingen gebruikt, bijvoorbeeld een school-Chromebook, is de kans groot dat al deze opties geblokkeerd zijn. Maar er is een slimme truc om dit te omzeilen als je toch iets basaals wilt bekijken. Een methode die ik heb gezien, is het toevoegen van een bookmarklet die een klein scriptje in de pagina injecteert, zoals deze. Je moet het script kopiëren en in de URL van een bladwijzer plakken.

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

In principe verandert dit de pagina in een soort bewerkbaar document, zodat je de weergave ervan kunt aanpassen. Het is niet helemaal hetzelfde als de ontwikkelaarstools, maar als je wilt zien hoe verschillende elementen zijn gerangschikt of statische content wilt wijzigen, is dit een snelle oplossing. Om dit te doen, maak je een nieuwe bladwijzer aan (via het menu Bladwijzers > Bladwijzer toevoegen ) en plak je de code in het URL-veld. Als je nu op die bladwijzer klikt op een willekeurige pagina, wordt deze bewerkbaar. Je hebt nog steeds geen volledige toegang tot CSS en HTML zoals in de ontwikkelaarstools, maar het is voldoende voor wat eenvoudige aanpassingen. Houd er wel rekening mee dat deze methode op vergrendelde apparaten mogelijk is uitgeschakeld of niet werkt als de beheerder de beperkingen verder heeft aangescherpt.

Eerlijk gezegd is het best frustrerend dat sommige omgevingen basisfunctionaliteiten voor webontwikkelaars blokkeren, maar er zijn wel oplossingen. Je moet alleen even in de opties duiken en soms is het een kwestie van uitproberen. Als je beperkingen probeert te omzeilen, onthoud dan: voorzichtigheid is geboden, vooral in beheerde omgevingen. Toch kunnen deze trucs voor persoonlijk gebruik een hoop kopzorgen besparen als je gewoon even onder de motorkap wilt kijken.