Hvis du noen gang har ønsket å vite hvordan dine favorittwebområder er strukturert, kan en nettleser "Inspekter" -tjenester være en skjult velsignelse. Vi har dekket Chrome's "Inspect" -verktøy, og Firefox kommer med et lignende tilbud også.

Firefox-verktøyet "Inspect Element" kan hjelpe deg med å undersøke grunnlaget for en nettsides operasjon, inkludert HTML- og CSS-elementene som den bruker, dens belastning på nettverket, latensen av lasteelementene, og filene det lagrer, for eksempel kapsler.

Erfarne utviklere kan ikke finne mye nytt i denne grunnen. Nybegynnere og daglige nettbrukere bør imidlertid finne en ny, kraftig side til Firefox-evner og en dyp brønn med filer og operasjoner som sitter under hvert nettsted på Internett.

Installasjon

Hvis du bruker Firefox, trenger du ikke å gjøre noe mer. Hvis du vil begynne å bruke Firefox, og du er på Windows, Linux, Mac, iOS eller Android, følg denne linken for å finne den nyeste versjonen av nettleseren. Installer de nedlastede installasjonsfilene som du normalt ville, ved å dobbeltklikke på dem eller trykke på hvis du er på en smarttelefon.

Store Linux distros sannsynligvis kommer med Firefox forhåndsinstallert eller har kopier av Firefox i deres programvare senter / pakke repositories som brukeren enkelt kan installere.

Åpning av "Inspeksjonselement"

Etter installasjon av Firefox kan du finne inspektøren ved å høyreklikke på et element på en nettside. Det vil vise deg en rullegardinmeny som den her vist nedenfor, der "Inspiser element" ligger nær bunnen av listen.

Inspektør

Ved å klikke på "Inspiser element" åpnes inspektøren umiddelbart nederst på skjermen. På dette tidspunktet blir titlene litt dumme siden inspektøren teknisk sett åpnet "Inspektør" -delen av sine tjenester.

I hvert fall vil elementet du klikket vises i midten av verktøyet, og når du kjører musen over det elementet - som for eksempel tag jeg svinger over i skjermbildet nedenfor - "Inspektør" vil markere det visuelle elementet på skjermen på selve websiden.

Dette gjør det enkelt å vite hvilke elementer du ser på. Det gjør det også enkelt å finne de forskjellige egenskapene til elementene. Hvis du ser til høyre side av "Inspektør", vil du se egenskapene til det aktuelle tag, inkludert innstillingene for margin, polstring, kantlinje, skriftstørrelse og vertikal justering.

Hvis du ruller gjennom det høyre panelet, kan du se egenskapene det arvet fra andre elementer. Du kan til og med endre egenskapene i vinduet og se dem vises på nettsiden i sanntid.

Style Editor

Du kan fortsette på reisen din til riket av cascading style sheets (CSS) ved å følge verktøylinjen øverst på inspektøren. Klikk hvor det står "Style Editor" for å åpne en ny dialog som viser tre nye paneler nederst på skjermen.

Her kan du se de to stilarkfilene DuckDuckGo bruker, elementene i det første valgte stilarket, og arkets forskjellige "@media" -regler, som styrer responsivt design for mindre og større skjermer.

Du kan redigere disse stilarkene, akkurat som du kan, i "Inspektør" -delen. I dette tilfellet er det mange regler å velge mellom - 1262 regler i det første stilarket alene.

Hvis du navigerer enda lenger i verktøylinjen til "Nettverksmonitor", finner du nettstedets forespørsler om disse filene og deres statuser. Andre elementer som bilder og skrifter kan også være til stede i den kategorien, og du kan se alle disse forespørslene og størrelsen på hver fil etter at forespørselen er behandlet.

Opptreden

Når du åpner fanen "Ytelse", må du klikke på "Start opptaksprestasjon" -knappen for å få inspektøren til å samle informasjon. Om noen få sekunder vil det oppdage rammene per sekund (FPS) siden din kjører på, DOM-hendelser (DOM) som fant sted og stilberegninger sammen med tiden (vanligvis i millisekunder) at den tok disse elementene til laste.

For dette nettstedet kan du se den uthevede DOM-hendelsen, en mouseover, tok 6, 03 millisekunder i varighet for å laste. Den gjennomsnittlige FPS for denne siden var ca 39. Og diagrammet som viste mitt spekter av responstider, nådde 9000 millisekunder for noen hendelser.

Hukommelse

I "Minne" -fanen må du også klikke på en knapp - "Ta øyeblikksbilde" - for å samle informasjon. For meg genererte det et kart over hendelser som viser ca 600 Kb av strenger, 1 Mb objekter og 1 Mb skript som finner deres veier i minnet. Du kan se de samme elementene på noen forskjellige måter ved å klikke på rullegardinmenyen der det står "Tree Map", som du kan se på dette skjermbildet.

Oppbevaring

Til slutt, hvis du klikker på "Lager" -fanen, kan du se permanente filer et nettsted kan ha plassert på datamaskinen. Relevant for de fleste brukere, dette inkluderer informasjonskapsler. Du kan se en lastet i bildet nedenfor.

Du kan se i panelet på høyre side at denne cookien utløper i midten av det neste tiåret, og at jeg åpnet den under økten med å skrive denne artikkelen.

Konklusjon

Det er mye å vade gjennom når du bruker Firefox-inspektøren. Denne introduksjonen til sine flere deler bør holde deg opptatt en stund.

Ta deg tid til å endre et nettsteds HTML-elementer. Besøk et par forskjellige nettsteder for å se sine lastetider. Finn ut hvor mange cookies en bestemt side prøver å lagre på maskinen din. Til tider kan denne informasjonen gi deg en pause.

Forhåpentligvis vil denne oppdagelsesreisen gi deg en større forståelse av hvilke nettsteder som gjør at de kan fungere som du forventer. Det kan være mye mer enn du tidligere skjønte.

Bilde kreditt: Firefox Quantum hjemmeside ved DepositPhotos