Sådan inspicerer du elementer på en Chromebook

Inspicere elementer på en Chromebook er et praktisk værktøj til at undersøge et websteds frontend-kode – HTML, CSS og endda noget JavaScript. Det er primært nyttigt til fejlfinding eller bare nysgerrige justeringer, men husk, at disse ændringer kun er midlertidige. Genindlæs siden, og alt vender tilbage til det normale. Prøv det, hvis du roder med webdesign eller endda fejlfinder nogle layoutfejl. Da Chromebooks kører Chrome OS, er processen stort set den samme som i almindelig Chrome, men nogle gange støder folk på mærkelige blokeringer – især hvis de er på skole- eller arbejdsenheder, hvor administratorbegrænsninger kommer i spil. Så det kan være en livredder at vide, hvordan man får adgang til eller endda omgår nogle af disse begrænsninger. Hvis den almindelige højreklikmetode ikke holder – f.eks.hvis den er deaktiveret eller blokeret – kan du prøve nogle alternative måder. Her er et par muligheder for at få disse udviklerværktøjer til at virke på din Chromebook, uanset om du bare er træt af de irriterende begrænsninger eller bare vil kigge på et websteds kode for sjov.

Sådan inspicerer du elementer på en Chromebook

Brug af højreklik

Dette er den nemmeste metode – højreklik blot (eller tryk med to fingre, hvis du bruger en trackpad) på et element, du vil tjekke, og vælg derefter Inspicer. I de fleste opsætninger åbner panelet Udviklerværktøjer med det samme, og koden for det pågældende element fremhæves. Ret ligetil, ikke? Men nogle gange blokerer websteder højreklik, især hvis indholdsejere forsøger at beskytte deres ting. Hvis det er tilfældet, skal du gå videre til de mere avancerede muligheder nedenfor. I min opsætning virker højreklik ikke i starten på nogle websteder, men efter en hurtig sideopdatering eller deaktivering/scriptblokering virker det pludselig. Mærkeligt, hvordan disse beskyttelser kan være så inkonsekvente.

Brug af genvejstaster

Hvis højreklik er deaktiveret, eller du bare er doven, er Ctrl + Shift + C din ven. Det udløser den samme “Inspekter”-funktion med det samme. Når udviklerværktøjerne dukker op, vil du se et lille pilikon i øverste venstre hjørne af værktøjspanelet. Når du klikker på det, vises et trådkors – klik på et hvilket som helst element på siden for at inspicere netop den del. Det ser ud til at være en hurtig måde at hoppe ind på uden at navigere i menuer. På nogle websteder fungerer denne genvej som magi med det samme, men på andre, især stærkt beskyttede websteder, gør den muligvis ikke noget, medmindre du har aktiveret nogle ekstra tilladelser. Chrome skal selvfølgelig gøre det sværere end nødvendigt.

Brug af Chrome-menuen

Hvis du foretrækker menuer, skal du blot åbne Chrome-menuen ved at klikke på de tre prikker ( lodrette ellipse ) i øverste højre hjørne. Naviger derefter til Flere værktøjer > Udviklerværktøjer. Det åbner udviklerpanelet i højre eller nederste hjørne. Derfra skal du klikke på fanen Elementer, og så er du klar. For at inspicere specifikke elementer skal du klikke på pilikonet i panelet og trykke på en hvilken som helst del af siden, du vil analysere. Nemt, men igen, hvis udviklerværktøjer er blokeret, virker det muligvis ikke. Nogle gange kan det at genstarte Chrome eller rydde cachen hjælpe med at opdatere tilladelser, men på skolenheder kan det bare mislykkes lydløst.

Fjernelse af blokering af udviklerværktøjer eller mere avancerede tricks

Hvis du bruger en Chromebook med begrænsede funktioner – f.eks.en i skolen – er der stor sandsynlighed for, at alle disse muligheder er låst. Men lidt lusket er der en løsning, hvis du har brug for at inspicere noget grundlæggende. En ting, jeg har set virke, er at tilføje et bogmærke, der indsætter et lille script på siden: som denne, skulle kopieres og indsættes i et bogmærkes URL:

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

Grundlæggende set forvandler dette siden til en slags redigerbart dokument, så du kan rode med dens visning. Det er ikke helt det samme som udviklingsværktøjer, men hvis du vil se, hvordan forskellige elementer er arrangeret, eller justere statisk indhold, er det en hurtig løsning. For at gøre dette skal du oprette et nyt bogmærke (fra menuen, Bogmærker > Tilføj bogmærke ) og indsætte koden i URL-feltet. Klik nu på bogmærket på en hvilken som helst side for at gøre det redigerbart. Du får dog ikke fuld CSS- og HTML-adgang som i udviklingsværktøjer, men det er nok til lidt almindelig justering. Vær blot opmærksom på, at denne metode på låste enheder kan være deaktiveret eller ødelagt, hvis administratoren har strammet restriktionerne yderligere.

Helt ærligt, det er lidt frustrerende, hvordan nogle miljøer blokerer grundlæggende webudviklerfunktioner, men der findes løsninger. Man skal bare dykke ned i disse muligheder, og nogle gange prøve sig frem lidt. Hvis du prøver at omgå begrænsninger, så husk bare – forsigtighed er konge, især i administrerede miljøer. Til personlig brug kan disse tricks dog spare dig for en masse hovedpine, når du bare vil kigge ind under motorhjelmen.