En titt på viktige Firefox-verktøy for webutviklere

Firefox har lenge vært den foretrukne nettleseren for webutvikling. Det er en rekke nyttige tilleggsprogrammer for å gjøre jobben. I dette innlegget skal vi se nærmere på noen tilføyelser som jeg mener er viktig for å bli installert hvis du skal gjøre webutvikling. Vi skal også avdekke noen av funksjonene i disse tilleggene som kan hjelpe.

Først av alt, må vi installere Firebug.

Firebug

Firebug er et must-install tillegg for webutvikling. Forutsatt at du ikke vet hvor du skal få Firebug, kan du installere den her. Sannsynligvis må du starte Firefox på nytt før den er aktivert.

Deretter kan du se Firebug på en av følgende måter: Følg denne menyen Verktøy> Webutviklere> Firebug, høyreklikk på nettsiden og velg “Inspiser Element med Firebug”.

Alternativt kan du finne et Firebug-ikon i Firefox og klikke på det, dette vil vise firebug-vinduet;

Firebug er ganske identisk med Chrome Utviklerverktøy. den har et panel for å se HTML-strukturen og stilene, og også et konsollpanel for å se feilene, advarslene og loggene. Men jeg har noen flere tips som forhåpentligvis kan være nyttige.

Juster boksstørrelsen

HTML-elementet består av CSS-boksemodell som består av margin, polstring og objektdimensjon (bredde / høyde). Det er tider når vi må endre disse egenskapene. I så fall kan du velge en av elementene du vil at den skal endres, og deretter gå til Oppsett panel.

I dette panelet finner du en illustrasjon av en CSS boks modell sammen med informasjonen, inkludert bredde og høyde. Selv om disse to egenskapene ikke er spesifisert i CSS, dette verktøyet er smart nok til å bestemme verdien. Hvis du trenger å endre dem, kan du bare klikke på verdien og bruke piltastene opp eller ned for å øke eller redusere verdien.

Beregnede stiler

I mange situasjoner lurer du sannsynligvis på hvorfor visse stilarter ikke blir brukt. En av de enklere og raskere måtene, spesielt når du har tusenvis av linjestykker, er ved å inspisere den fra Beregnet stil panel. Dette eksemplet viser at tekstfargene til ankeretiketten er overskrevet av .knapp klasse, mens bakgrunnen til .knapp klassen er overskrevet av .button.add.

Inspisere Font Family (den enkle måten)

Du finner sannsynligvis ofte noe som dette i font-family eiendom i CSS med forskjellige fontfamilier. Dessverre vil dette ikke fortelle oss spesifikt hvilken skrifttype nettleseren tar. For å gjøre identifikasjonen enklere kan vi installere denne Firebug-utvidelsen nemlig FireFontFamily.

Etter at installasjonen er ferdig, last inn nettsiden din, og nå kan vi tydelig se hvilken skrifttypefamilie som brukes. I vårt tilfelle er det faktisk Helvetica Neue (se skudd).

Analysere ytelse

Dette kan være platitude, men Site Speed ​​er nå en av Google-parametere (algoritme) ved å bestemme nettstedskvalitet; Nettstedet som lastes raskere anses å være godt utviklet og rangert høyere når det gjelder innhold. Så fart er ikke noe som bør overses.

Nettverkspanel

Det første stedet du kanskje trenger å besøke for å inspisere nettstedet ditt, er Nett panel. Dette panelet registrerer HTTP-forespørselen på nettstedet ditt når det er lastet inn. Dette skjermbildet nedenfor viser en nettside som laster 42 forespørsel og tar rundt 4,36 sekunder å laste.

Du kan deretter sortere HTTP-forespørselen på deres type som HTML, CSS og Bilder.

YSlow!

Videre kan du også installere YSlow, en utvidelse for Firebug fra Yahoo !. Etter at den er aktivert, finner du et ekstra panel som kalles uttrykkelig Yslow!.

Lik Nett panel, Yslow! vil registrere nettsidens forestillinger når den lastes, men da vil den også fortelle deg hvorfor nettsiden er treg og hva kan vi gjøre for å løse det. I dette eksemplet kjører vi en test på en nettside, og den blir scoret 86 for total ytelse, som regnes som OK.

Sidens hastighet

Alternativt kan du også installere sidens hastighet fra Google. Lik YSlow!, Det tester nettsidehastighetsytelsen, om enn testresultatet kan være litt annerledes. Dette eksemplet viser at den samme nettsiden scoret 82 etter sidens hastighet.

Webutviklerverktøy

Webutviklerverktøy er åpenbart for webutviklere, og den har en rekke funksjoner pakket i denne verktøylinjen. Men denne under er en av mine favoritter.

Bildeinspeksjon

Det er tider når vi må kanskje få bildeinformasjon fra nettsiden. Jeg ser vanligvis folk gjør dette ved å snuble over nettleseren eller ved å høyreklikke på bildet og velge Se bildeinformasjon, som så:

Men denne måten er ikke helt effektiv når vi trenger å få informasjonen fra mange bilder. I så fall kan vi bruke Bilder funksjon fra tillegget. Denne funksjonen er lett tilgjengelig fra bildemenyen fra verktøylinjen.

Og dette eksempelet viser hvordan vi viser bildedimensjonen og bildefilstørrelsen samtidig:

Firefox innebygde verktøy

I nyere versjoner har Firefox forbedret sine innebygde funksjoner for webutviklere, noen av dem er:

Native Inspect Element

Dette innfødte Inspisér element fra Firefox kan det lignes på “Inspiser Element i Firebug”, men det virker faktisk på forskjellige måter.

Denne gangen vil jeg ikke gå gjennom denne funksjonen lenger, da den er i hovedsak identisk med Firebug HTML og CSS panel, om enn med en forskjell i layout og design. Men det er en særegen egenskap som er verdt å prøve ut 3D-visning.

Ved hjelp av 3D-visning Du kan se websidestrukturen i dybden. For å aktivere denne visningen, kan du finne knappen nederst til høyre på “Firefox Native Inspect Element”. Dette er hvordan 3D-visning ser ut som.

Jeg bruker det ikke så ofte som andre funksjoner, men det er en ganske nyskapende funksjon fra Mozilla jeg innrømmer, og sikkert veldig nyttig i visse situasjoner.

Webdesignvisning

Siden den økende populariteten i Responsive Web Design har Firefox startet en Responsive Bookmarklet til nettleseren. Dette verktøyet tillater oss å teste vår responsive nettside i ulike visningsporte uten å endre størrelsen på nettleservinduet.

Denne visningen er tilgjengelig fra denne menyen: Verktøy> Webutvikler> Webdesignvisning. Og dette, hvordan visningen ser ut.

Style Editor

Til slutt, hvis du jobber med CSS ofte, vil du sannsynligvis bli forelsket i denne funksjonen. Siden versjonen av 11, hadde Firefox lagt til Style Editor i sine innfødte utviklerverktøy.

Denne funksjonen er like kult som Webdesignvisning, det lar deg redigere CSS, se effekten umiddelbart i nettleseren og lagre endringene som direkte påvirker CSS kildefilen.

Style Editor er tilgjengelig fra følgende meny: Verktøy> Webutvikler> Style Editor.

Endelig tanke

Det er en rekke funksjoner som er pakket i disse Firefox-tilleggene, og de som diskuteres her, er bare noen av funksjonene jeg bruker ganske ofte under webutvikling. Likevel kan du ha noen andre tips som kan være nyttige for å øke webutviklingsproduktiviteten i Firefox.

Hvilke funksjoner bruker du ofte? Du kan dele dine tanker i kommentarfeltet nedenfor.