Om du någonsin har velat veta hur dina favoritwebbplatser är uppbyggda kan en webbläsares "Inspect" -tjänster vara en dold välsignelse. Vi har täckt Chrome's "Inspect" -verktyg, och Firefox levereras med ett liknande erbjudande.

Firefox-verktyget "Inspect Element" kan hjälpa dig att undersöka grunden för en webbplatss operation, inklusive de HTML- och CSS-element som den använder, dess belastning på nätverket, latensen av dess laddningselement och filerna som lagras, t.ex. småkakor.

Erfaren utvecklare får inte hitta mycket nytt i denna primer. Nybörjare och vardagliga webbanvändare bör dock hitta en ny, kraftfull sida till Firefox-funktioner och en djup brunn i filer och operationer som sitter under alla webbplatser på Internet.

Installation

Om du använder Firefox behöver du inte göra någonting längre. Om du vill börja använda Firefox, och du är på Windows, Linux, Mac, IOS eller Android, följ den här länken för att hitta den senaste versionen av webbläsaren. Installera de nedladdade installationsfilerna som du normalt skulle göra genom att dubbelklicka på dem eller knacka om du är på en smartphone.

Större Linux distros kommer sannolikt att komma med Firefox förinstallerat eller ha kopior av Firefox i deras mjukvarucenter / paketförråd som användaren enkelt kan installera.

Öppnande "Inspektera element"

Efter installationen av Firefox kan du hitta dess inspektör genom att högerklicka på ett element på en webbsida. Det visar dig en rullgardinsmeny som den här bilden nedan, där "Inspekteringselement" ligger nära botten av listan.

Inspektör

Genom att klicka på "Inspektera element" öppnas inspektören omedelbart längst ner på skärmen. Vid denna tidpunkt blir titlarna lite dumma eftersom inspektören tekniskt har öppnat "Inspektör" -delen av sina tjänster.

I vilket fall som helst kommer det element du klickade att visas mitt i verktyget, och när du kör musen över det här elementet - som tagg Jag svävar över i skärmdumpen nedan - "Inspektören" markerar det visuella elementet på skärmen på webbsidan själv.

Detta gör det enkelt att veta vilka delar du tittar på. Det gör det också lätt att hitta de olika egenskaperna hos dessa element. Om du tittar till höger om "Inspektören" kommer du att se egenskaperna för den specifika tagg, inklusive dess inställningar för marginal, vaddering, kantlinje, teckensnittstorlek och vertikal anpassning.

Om du bläddrar genom den högra panelen kan du se egenskaperna som den ärvde från andra element. Du kan även ändra egenskaperna i det fönstret och se dem visas på webbsidan i realtid.

Style Editor

Du kan fortsätta på din resa till riket av cascading style sheets (CSS) genom att följa verktygsfältet högst upp på inspektören. Klicka där det står "Style Editor" för att öppna en ny dialog som visar tre nya paneler längst ner på skärmen.

Här kan du se de två stilarkfilerna DuckDuckGo använder, elementen i det första valda stilarket och det arkets olika "@media" -regler, som styr responsiv design för mindre och större skärmar.

Du kan redigera dessa stilark precis som du kan i avsnittet "Inspektör". I det här fallet finns det många regler att välja mellan - 1262 regler i det första stilarket ensamma.

Om du navigerar ännu längre i verktygsfältet till "Network Monitor" hittar du webbplatsens förfrågningar om dessa filer och deras statuser. Andra element som bilder och teckensnitt kan också finnas i den fliken, och du kan se alla dessa förfrågningar och storleken på varje fil efter att förfrågan har behandlats.

Prestanda

När du öppnar fliken "Prestanda" måste du klicka på "Starta inspelningsprestanda" -knappen för att inspektören ska samla information. Om några sekunder kommer det att upptäcka ramarna per sekund (FPS) som din sida körs på, DOM-händelser (DOM) som ägde rum och omräkning av stilen, tillsammans med tiden (vanligtvis i millisekunder) att den tog dessa element till ladda.

För den här webbplatsen kan du se den markerade DOM-händelsen, en mouseover, tog 6, 03 millisekunder i varaktighet för att ladda. Den genomsnittliga FPS för denna sida var cirka 39. Och diagrammet som visar mitt antal svarstider uppnådde 9000 millisekunder för vissa händelser.

Minne

På fliken "Minne" måste du också klicka på en knapp - "Ta snapshot" - för att samla information. För mig genererade den en karta över händelser som visar cirka 600 Kb av strängar, 1 Mb av objekt och 1 Mb av skript som finner sina sätt i minnet. Du kan se samma element på ett par olika sätt genom att klicka på rullgardinsmenyn där det står "Tree Map", som du kan se på den här skärmdumpen.

Lagring

Slutligen, om du klickar på fliken "Förvaring" kan du se permanenta filer som en webbplats kan ha placerat på din dator. Relevant för de flesta användare, det här inkluderar cookies. Du kan se en laddad i bilden nedan.

Du kan se i den högra panelen att den här kakan löper ut i mitten av det närmaste decenniet och att jag åtkomst till det under samtalet med att skriva den här artikeln.

Slutsats

Det är mycket att vada genom när du använder Firefox inspektören. Denna introduktion till dess flera delar borde hålla dig upptagen en stund.

Ta lite tid att ändra en webbplats HTML-element. Besök några olika webbplatser för att se deras lastningstider. Ta reda på hur många cookies en viss sida försöker lagra på din maskin. Ibland kan den informationen ge dig paus.

Förhoppningsvis kommer den här upptäckten att ge dig en större förståelse av vilka webbplatser som gör att de kan fungera som du förväntar dig. Det kan vara mycket mer än vad du tidigare förstod.

Bildkrediter: Firefox Quantum hemsida av DepositPhotos