Google Chrome er ikke kun en hurtig forbrugerbrowser - den skjuler også en række udviklerfunktioner under sin hætte. Du kan afsløre nogle af denne magt med "Inspekt" værktøjet. Selvom det oprindeligt er overvældende, giver værktøjet dig indblik i, hvordan hjemmesider er opbygget, og det kan hjælpe dig med at fejle dine egne websteder.

Adgang til inspektionsværktøjet

Inspektionsværktøjet findes i Chrome's kontekstmenu.

Højreklik på et element i din browser og klik på "Inspicer" i kontekstmenuen.

Et vindue kommer frem i siden af ​​Chrome-browseren som vist nedenfor. Dette kaldes DevTools panelet. Hvis du nogensinde har brugt Firebug på Firefox, kan du genkende nogle dele af det.

Der er meget her, så lad os undersøge de enkelte stykker.

Inspektion af inspektøren

Inspektionspanelet er opdelt i flere forskellige faner, som er synlige øverst i vinduet. Vi vil fokusere på fanen Standardelementer.

Der er to nyttige knapper ud for disse faner. Den første er værktøjet Inspektionselement.

Dette værktøj giver dig mulighed for at musen over og vælge forskellige DOM elementer til at inspicere.

Den anden knap tændes for tilstanden Forhåndsvisning af enhed. I denne tilstand kan du se, hvad din webside ser ud til ved forskellige opløsninger og skærmstørrelser.

Hvis du klikker på den knap, kan du se din webside se nærmere på en ny visning.

Du kan derefter bruge rullemenuen over sidevisningen eller håndtagene på siderne af forsiden af ​​siden til at ændre størrelsen på enhedens forhåndsvisningsvindue.

HTML View

Det meste af fanen DevTools er optaget af HTML-panelet.

Denne rude er som en superdrevet "View Source". Den er struktureret i henhold til DOM, med elementer indlejret inde i deres overordnede elementer.

Du kan se, at det element du "inspicerede" i begyndelsen automatisk fremhæves med en grå eller blå baggrund. Her har jeg inspiceret et billede, der er indeholdt i et link. Som forventet ser jeg en fremhævet anker tag.

Men hvor er mit billede? Jeg kan afsløre eventuelle DOM-elementer, der er anbragt i ankeretiketten, ved at klikke på trekanten ved siden af. I dette tilfælde afslører pilen tag jeg forventede at finde.

Du vil også bemærke en lille menulinje nederst i HTML-ruden.

Dette kaldes breadcrumb trail, og det viser dig alle de overordnede elementer af det valgte element. For at navigere til et af disse elementer skal du blot klikke på det.

styles

Under HTML-oversigten ser vi også en rude, der viser CSS-regler, der gælder for vores element. Dette kaldes stilpanelet, og i dette tilfælde ser vi alle de regler, der gælder for ankeretiketten, jeg inspicerede tidligere.

Du kan skifte en regel til og fra ved at svinge over den og klikke på afkrydsningsfeltet ud for den.

Du får se denne ændring, der afspejles i sideforhåndsvisningen med det samme. Og hvis du klikker direkte på en regel, kan du ændre navn og værdi.

Du kan også søge efter bestemte regler ved hjælp af filter-søgefeltet.

Ruten Styles er i stand til meget mere end bare det. Tjek Google's dokumentation for en fuldstændig forklaring på stilpanelets mange funktioner.

Box Model og Computed Style

Ved siden af ​​stilvisningen er boksemodellen for mit valgte element. Hvis du ikke er bekendt, er boksemodellen en abstrakt billede af margen, grænsen, polstring og indholdsstørrelse, der er anvendt på et bestemt element.

I dette tilfælde kan jeg se, at mit element har en primær størrelse på 461 x 209 pixels. Den indeholder ingen margen-, grænse- eller polstring-regler, så disse felter er tomme.

Hvis du vælger et element med nogle positioner, margen, grænse eller polstring, kan din boksmodel se mere ud her.

Du kan også se en in situ box model, hvis du mus over DOM elementer med Inspect Element værktøjet aktiveret.

Nedenfor er boksemodellen en liste over alle de stylingregler, der gælder for dette bestemte element. Dette er lidt anderledes i vinduet Styles. Det viser ikke de faktiske linjer af CSS - kun virkningerne af disse regler. Dette kaldes objektets "beregnede stil", og det er det kombinerede resultat af dit CSS.

Endelig kan du søge efter bestemte regler ved at skrive i filterboksen.

Konklusion

Hvis du ofte arbejder med websider, er Chrome's Inspect-værktøj værd at udforske. Og de andre faner i DevTools, som Console og Network, kan være uvurderlige for udviklere. Der er mere til det end vi kan dække lige nu, men Googles egen dokumentation er grundig og nyttig.