Slik inspiserer du elementer på en Chromebook

Inspeksjon av elementer på en Chromebook er et praktisk verktøy for å undersøke front-end-koden til et nettsted – HTML, CSS og til og med litt JavaScript. Det er hovedsakelig nyttig for feilsøking eller bare kuriøse justeringer, men husk at disse endringene bare er midlertidige. Last inn siden på nytt, og alt går tilbake til det normale. Prøv det hvis du tukler med webdesign eller til og med feilsøker noen layoutfeil. Siden Chromebooks kjører Chrome OS, er prosessen stort sett den samme som i vanlig Chrome, men noen ganger støter folk på rare blokkeringer – spesielt hvis de er på skole- eller jobbenheter der administratorbegrensninger spiller inn. Så det å vite hvordan man får tilgang til eller omgår noen av disse begrensningene kan være en livredder. Hvis den vanlige høyreklikkmetoden ikke holder – for eksempel hvis den er deaktivert eller blokkert – kan du prøve noen alternative måter. Her er noen alternativer for å få disse utviklerverktøyene til å fungere på Chromebooken din, enten du bare er lei av de irriterende begrensningene eller vil kikke på koden til et nettsted for moro skyld.

Slik inspiserer du elementer på Chromebook

Bruk av høyreklikk

Dette er den enkleste metoden – bare høyreklikk (eller trykk med to fingre hvis du er på en styreflate) på et hvilket som helst element du vil sjekke ut, og velg deretter Inspiser. I de fleste oppsett åpnes Verktøy-panelet for utviklere umiddelbart og koden for det elementet utheves. Ganske enkelt, ikke sant? Men noen ganger blokkerer nettsteder høyreklikk, spesielt hvis innholdseiere prøver å beskytte tingene sine. Hvis det er tilfelle, gå videre til de mer avanserte alternativene nedenfor. I mitt oppsett fungerer ikke høyreklikk på noen nettsteder i utgangspunktet, men etter en rask sideoppdatering eller deaktivering/skriptblokkering fungerer det plutselig. Merkelig hvordan disse beskyttelsene kan være så inkonsekvente.

Bruke snarveier

Hvis høyreklikk er deaktivert, eller du bare er lat, er Ctrl + Shift + C din venn. Det utløser den samme «Inspeksjon»-funksjonen umiddelbart. Når utviklerverktøyene dukker opp, ser du et lite pilikon øverst til venstre i verktøypanelet. Når du klikker på det, vises et trådkors – klikk på et hvilket som helst element på siden for å inspisere bare den delen. Ser ut som en rask måte å hoppe inn på uten å navigere i menyer. På noen nettsteder fungerer denne snarveien som magi med en gang, men på andre, spesielt tungt beskyttede nettsteder, kan det hende at den ikke gjør noe med mindre du har aktivert noen ekstra tillatelser. Fordi Chrome selvfølgelig må gjøre det vanskeligere enn nødvendig.

Bruk av Chrome-menyen

Hvis du foretrekker menyer, åpner du bare Chrome-menyen ved å klikke på de tre prikkene ( vertikal ellipse ) øverst til høyre. Naviger deretter til Flere verktøy > Utviklerverktøy. Det vil åpne utviklerpanelet til høyre eller nederst. Derfra klikker du på Elementer -fanen, og du er klar. For å inspisere bestemte elementer, klikker du på pilikonet i panelet og trykker på hvilken som helst del av siden du vil analysere. Enkelt, men igjen, hvis utviklerverktøy er blokkert, kan det hende at det ikke fungerer. Noen ganger kan det å bare starte Chrome på nytt eller tømme hurtigbufferen bidra til å oppdatere tillatelsene, men på skolenheter kan det bare mislykkes stille.

Oppheve blokkering av utviklerverktøy eller mer avanserte triks

Hvis du bruker en Chromebook med begrensede innstillinger – som en skole-Chromebook – er sjansen stor for at alle disse alternativene er låst. Men litt lurt finnes det en løsning hvis du trenger å sjekke noe grunnleggende. En ting jeg har sett fungere er å legge til et bokmerke som setter inn et lite skript på siden: som denne, måtte kopiere og lime inn i URL-en til et bokmerke:

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

I bunn og grunn gjør dette siden om til et slags redigerbart dokument, slik at du kan tukle med visningen. Det er ikke helt det samme som utviklerverktøy, men hvis du vil se hvordan forskjellige elementer er ordnet eller justere statisk innhold, er det en rask løsning. For å gjøre dette, opprett et nytt bokmerke (fra menyen, Bokmerker > Legg til bokmerke ) og lim inn koden i URL-feltet. Nå, hvis du klikker på det bokmerket på en hvilken som helst side, vil det bli redigerbart. Du vil fortsatt ikke få full CSS- og HTML-tilgang som i utviklerverktøy, men det er nok for litt tilfeldig tukling. Bare vær oppmerksom på at på låste enheter kan denne metoden være deaktivert eller ødelagt hvis administratoren strammet inn restriksjonene ytterligere.

Ærlig talt, det er litt frustrerende hvordan noen miljøer blokkerer grunnleggende funksjoner for webutviklere, men det finnes løsninger. Man må bare dykke ned i disse alternativene, og noen ganger prøve og feile litt. Hvis du prøver å omgå restriksjoner, husk at forsiktighet er konge, spesielt i administrerte miljøer. Likevel, for personlig bruk, kan disse triksene spare deg for mye hodebry når du bare vil kikke under panseret.