Google Chrome er ikke bare en rask forbrukerbrowser - den skjuler også en rekke utviklerfunksjoner under hetten. Du kan avsløre noe av denne kraften med "Inspiser" -verktøyet. Mens det først er overveldende, gir verktøyet deg innsikt i hvordan nettsteder bygges, og det kan hjelpe deg med å feilsøke dine egne nettsteder.

Tilgang til inspeksjonsverktøyet

Inspeksjonsverktøyet finnes i Chromes kontekstmeny.

Høyreklikk på et hvilket som helst element i nettleseren din og klikk på "Inspiser" i kontekstmenyen.

Et vindu vil komme ut av siden av Chrome-nettleseren som vist nedenfor. Dette kalles DevTools-panelet. Hvis du noen gang har brukt Firebug på Firefox, kan du kanskje kjenne igjen noen deler av det.

Det er mye her, så la oss undersøke de enkelte stykkene.

Inspisere inspektøren

Kontrollpanelet er delt inn i flere forskjellige faner som er synlige øverst i vinduet. Vi vil fokusere på standardelementer-fanen.

Det er to nyttige knapper ved siden av disse kategoriene. Den første er verktøyet Inspeksjonselement.

Dette verktøyet lar deg musen over og velge forskjellige DOM-elementer for å inspisere.

Den andre knappen slår på Forhåndsvisning av modus. I denne modusen kan du se hvordan websiden din ser ut til forskjellige resolusjoner og skjermstørrelser.

Hvis du klikker på den knappen, ser du at nettsiden din er i en ny visning.

Du kan deretter bruke rullegardinmenyen over forhåndsvisningen eller håndtakene på sidene av forhåndsvisningen for å endre størrelsen på forhåndsvisningsvinduet.

HTML View

Det meste av fanen DevTools er opptatt av HTML-panelet.

Denne ruten er som en superdrevet "View Source". Den er strukturert i henhold til DOM, med elementer som er nestet inne i deres foreldreelementer.

Du ser at elementet du "inspiserte" i begynnelsen automatisk blir markert med en grå eller blå bakgrunn. Her har jeg inspisert et bilde som er inneholdt i en lenke. Som forventet ser jeg en markert ankermerke.

Men hvor er bildet mitt? Jeg kan avsløre eventuelle DOM-elementer som er nestet i ankermerket ved å klikke på trekanten ved siden av. I dette tilfellet avslører pilen tag jeg forventet å finne.

Du vil også legge merke til en liten menylinje nederst i HTML-panelet.

Dette kalles breadcrumb-stien, og det viser deg alle de overordnede elementene i det valgte elementet. For å navigere til et av elementene klikker du bare på det.

Styles

Under HTML-visningen ser vi også en rute som viser noen CSS-regler som gjelder for vårt element. Dette kalles stilruten, og i dette tilfellet ser vi alle reglene som gjelder for ankermerket jeg inspiserte tidligere.

Du kan bytte en regel på og av ved å sveve over den og klikke i avmerkingsboksen ved siden av den.

Du får se denne endringen reflektert i forhåndsvisningen av siden. Og hvis du klikker direkte på en regel, kan du endre navn og verdi.

Du kan også søke etter bestemte regler ved hjelp av filter-søkeboksen.

Styles-panelet er i stand til mye mer enn bare det. Ta en titt på Googles dokumentasjon for en fullstendig forklaring på stilpanelets mange funksjoner.

Box Model og Computed Style

Ved siden av stilvisningen er boksemodellen for det valgte elementet mitt. Hvis du ikke er kjent, er boksemodellen en abstrakt bilde av marginen, grensen, polstring og innholdsstørrelse som er brukt på et bestemt element.

I dette tilfellet kan jeg se at elementet mitt har en primær størrelse på 461 x 209 piksler. Den inneholder ingen marginer, grenser eller utfyllingsregler, så de boksene er tomme.

Hvis du velger et element med noen posisjon, margin, kantlinje eller polstring, kan bokmodellen se mer ut som dette.

Du kan også se en in situ- boksemodell hvis du mus over DOM-elementer med Inspect Element-verktøyet aktivert.

Nedenfor boksemodellen er en liste over alle stylingsreglene som gjelder for dette bestemte elementet. Dette er litt annerledes danner stilruten. Den viser ikke de faktiske linjene i CSS - bare effektene av disse reglene. Dette kalles "beregnet stil" av objektet, og det er det kombinerte resultatet av CSS.

Til slutt kan du søke etter bestemte regler ved å skrive inn Filter-boksen.

Konklusjon

Hvis du ofte arbeider med nettsider, er Chrome-inspeksjonsverktøyet vel verdt å utforske. Og de andre kategoriene i DevTools, som Console og Network, kan være uvurderlige for utviklere. Det er mer enn det vi kan dekke akkurat nå, men Googles egen dokumentasjon er grundig og nyttig.