Google Chrome är inte bara en snabb konsumentwebbläsare - den döljer också en mängd utvecklingsfunktioner under huven. Du kan avslöja en del av denna kraft med verktyget "Inspektera". Medan överhuvudtaget överväldigande ger verktyget dig insikt i hur webbplatser konstrueras, och det kan hjälpa dig att felsöka dina egna webbplatser.

Åtkomst till inspektionsverktyget

Inspektionsverktyget finns i Chrome: s sammanhangsmeny.

Högerklicka på något element i din webbläsare och klicka på "Inspektera" i snabbmenyn.

Ett fönster kommer att dyka upp från sidan av Chrome-webbläsaren, som visas nedan. Detta kallas DevTools-panelen. Om du någonsin använt Firebug på Firefox kanske du känner igen vissa delar av det.

Det finns mycket här, så låt oss undersöka de enskilda bitarna.

Inspekterar inspektören

Kontrollpanelen är uppdelad i flera olika flikar som är synliga längst upp i fönstret. Vi fokuserar på fliken Standardelement.

Det finns två användbara knappar bredvid dessa flikar. Det första är verktyget Inspect Element.

Med det här verktyget kan du musen över och välja olika DOM-element för inspektion.

Den andra knappen slår på förhandsvisning av enheten. I det här läget kan du se hur din webbsida ser ut i olika upplösningar och skärmstorlekar.

Om du klickar på den knappen ser du din webbsida i en ny vy.

Du kan sedan använda rullgardinsmenyn ovanför sidförhandsgranskningen eller handtagen på sidorna av sidförhandsgranskningen för att ändra storlek på enhetsförhandsgranskningsfönstret.

HTML View

De flesta av devTools-fliken är upptagna av HTML-panelen.

Den här rutan är som en superdriven "View Source". Den är strukturerad enligt DOM, med element som är inbädda inuti deras moderelement.

Du ser att det element du "inspekterade" i början markeras automatiskt med en grå eller blå bakgrund. Här har jag inspekterat en bild som finns i en länk. Som förväntat ser jag en markerad ankerkod.

Men var är min bild? Jag kan avslöja några DOM-element som är inbädda i ankaretiketten genom att klicka på triangeln vid sidan av. I detta fall avslöjar pilen taggen som jag förväntade mig att hitta.

Du märker också en liten menyrade längst ner i HTML-panelen.

Detta kallas breadcrumb-spåret, och det visar dig alla överordnade element i det valda elementet. För att navigera till ett av dessa element, klicka bara på det.

Styles

Under HTML-vyn ser vi också en ruta som visar några CSS-regler som gäller för vårt element. Detta kallas Styles-rutan, och i det här fallet ser vi alla regler som gäller för ankerkoden som jag inspekterade tidigare.

Du kan växla en regel till och från genom att sväva över den och klicka på kryssrutan bredvid den.

Du får se den här ändringen som återspeglas i sidförhandsgranskningen omedelbart. Och om du klickar direkt på en regel kan du ändra namn och värde.

Du kan också söka efter specifika regler med hjälp av sökrutan Filtrera.

Stilfönstret kan dock mycket mer än bara det. Kolla in Googles dokumentation för en fullständig förklaring av stilpanelens många funktioner.

Boxmodell och beräknad stil

Bredvid stilvyn är rutmodellen för mitt valda element. Om du inte är bekant är lådmodellen en abstrakt bild av marginal-, kant-, vadderings- och innehållsstorleken som tillämpas på ett visst element.

I det här fallet kan jag se att mitt element har en primär storlek på 461 x 209 pixlar. Det innehåller inga marginaler, gränser eller vadderingsregler, så de är tomma.

Om du väljer ett element med vissa positioner, marginaler, gränser eller vadderingsregler kan din rutmodell se mer ut så här.

Du kan också se en in situ- boxmodell om du mus över DOM-element med verktyget Inspect Element aktiverat.

Under rutan är en lista över alla stilregler som gäller för det här elementet. Det här är något annorlunda i rutan Styles. Den visar inte de faktiska linjerna för CSS - bara effekterna av dessa regler. Detta kallas objektets "beräknade stil", och det är det kombinerade resultatet av din CSS.

Slutligen kan du söka efter specifika regler genom att skriva i filterfältet.

Slutsats

Om du ofta arbetar med webbsidor är Chrome-inspektionsverktyget väl värt att utforska. Och de andra flikarna i DevTools, som Console och Network, kan vara ovärderliga för utvecklare. Det finns mer än det vi kan täcka just nu, men Googles egen dokumentation är grundlig och användbar.