Hvis du nogensinde har ønsket at vide, hvordan dine yndlingswebsteder er struktureret, kan en browsers "Inspekt" -tjenester være en skjult velsignelse. Vi har dækket Chrome's "Inspect" -værktøj, og Firefox leveres med et lignende tilbud.

Firefox-værktøjet "Inspect Element" kan hjælpe dig med at undersøge grundlaget for en websteds operation, herunder de HTML- og CSS-elementer, den bruger, dens belastning på netværket, latensen af ​​dets indlæsningselementer og de filer, den lagrer, f.eks. cookies.

Erfarne udviklere kan ikke finde meget nyt i denne primer. Nybegyndere og daglige webbrugere bør dog finde en ny, kraftfuld side til Firefox's muligheder og en dyb brønd af filer og operationer, der sidder under alle websteder på internettet.

Installation

Hvis du bruger Firefox, behøver du ikke gøre noget mere. Hvis du vil begynde at bruge Firefox, og du er på Windows, Linux, Mac, iOS eller Android, skal du følge dette link for at finde den nyeste version af browseren. Installer de downloadede installationsfiler som du normalt ville ved at dobbeltklikke på dem eller trykke på, hvis du er på en smartphone.

Større Linux distros sandsynligvis kommer med Firefox forudinstalleret eller har kopier af Firefox i deres Softwarecenter / pakke repositories som brugeren nemt kan installere.

Åbning af "Inspektion Element"

Efter installation af Firefox kan du finde sin inspektør ved at højreklikke på et element på en webside. Det vil vise dig en dropdown-menu som denne nedenfor, hvor "Inspect Element" er placeret i bunden af ​​listen.

Inspektør

Ved at klikke på "Inspicer Element" åbnes inspektøren straks nederst på skærmen. På dette tidspunkt bliver titlerne lidt dovne, da inspektøren teknisk set har åbnet "Inspektør" -delen af ​​sine tjenester.

Under alle omstændigheder vises det element, du klikede på, midt i værktøjet, og når du kører musen over det pågældende element - som f.eks. tag jeg svæver over i skærmbilledet nedenfor - "inspektøren" vil fremhæve det visuelle element på din skærm på selve websiden.

Dette gør det nemt at vide, hvilke elementer du kigger på. Det gør det også nemt at finde de forskellige egenskaber ved disse elementer. Hvis du ser til højre for "Inspektør", vil du se egenskaberne for det pågældende tag, herunder dets indstillinger for margen, polstring, grænse, skriftstørrelse og lodret justering.

Hvis du ruller gennem det højre sidepanel, kan du se egenskaberne, der er arvet fra andre elementer. Du kan endda ændre egenskaberne i vinduet og se dem vises på websiden i realtid.

Style Editor

Du kan fortsætte på din rejse til randen af ​​cascading style sheets (CSS) ved at følge værktøjslinjen øverst på inspektøren. Klik, hvor der står "Style Editor" for at åbne en ny dialog, der viser tre nye paneler nederst på skærmen.

Her kan du se de to stilarkfiler DuckDuckGo bruger, elementerne i det første valgte stilark, og det arks forskellige "@media" regler, der styrer responsivt design til mindre og større skærme.

Du kan redigere disse stilark, ligesom du kan i afsnittet "Inspektør". I dette tilfælde er der mange regler at vælge imellem - 1262 regler i det første stilark alene.

Hvis du navigerer endnu længere i værktøjslinjen til "Netværksovervågning", finder du webstedets anmodninger om disse filer og deres status. Andre elementer som billeder og skrifttyper kan også være til stede i denne fane, og du kan se alle disse anmodninger og størrelsen af ​​hver fil, når anmodningen er blevet behandlet.

Ydeevne

Når du åbner fanen "Performance", skal du klikke på knappen "Start optagelse ydeevne" for at få inspektøren til at samle oplysninger. Om et par sekunder vil det opdage rammerne per sekund (FPS), din side kører på, DOM-begivenheder (DOM), der fandt sted og stilberegninger sammen med tiden (normalt i millisekunder), at den tog disse elementer til belastning.

For denne side kan du se den fremhævede DOM-begivenhed, en mouseover, tog 6, 03 millisekunder i varighed for at indlæse. Den gennemsnitlige FPS for denne side var omkring 39. Og diagrammet, der viste mit sortiment af svartider, nåede 9000 millisekunder for nogle arrangementer.

Hukommelse

På fanen "Hukommelse" skal du også klikke på en knap - "Tag snapshot" - for at indsamle oplysninger. For mig genererede det et kort over begivenheder, der viser ca. 600 Kb af strenge, 1 Mb objekter og 1 Mb scripts, der finder deres veje i hukommelsen. Du kan se de samme elementer på en række forskellige måder ved at klikke på rullemenuen, hvor den siger "Tree Map", som du kan se på dette screenshot.

Opbevaring

Endelig, hvis du klikker på fanen "Opbevaring", kan du se permanente filer, som et websted kan have lagt på din computer. Relevant for de fleste brugere, dette inkluderer cookies. Du kan se en indlæst i billedet nedenfor.

Du kan se i højre side at denne cookie udløber i midten af ​​det næste årti, og at jeg har fået adgang til det under sessionen med at skrive denne artikel.

Konklusion

Der er meget at vade igennem, når du bruger Firefox inspektøren. Denne introduktion til dens flere dele skal holde dig travlt i et stykke tid.

Tag lidt tid til at ændre et websteds HTML-elementer. Besøg et par forskellige websteder for at se deres indlæsningstider. Find ud af, hvor mange cookies en bestemt side forsøger at gemme på din maskine. Til tider kan disse oplysninger give dig en pause.

Forhåbentlig vil denne opdagelsesrejse give dig en større forståelse for, hvilke websteder der gør, så de kan fungere som forventet. Det kan være meget mere, end du tidligere har forstået.

Billedkredit: Firefox Quantum hjemmeside ved DepositPhotos