Et kig på vigtige Firefox-værktøjer til webudviklere

Firefox har længe været den foretrukne browser til webudvikling. Der er en række nyttige tilføjelser til at gøre jobbet. I dette indlæg skal vi undersøge nogle tilføjelser, som jeg mener er afgørende for at blive installeret, hvis du skal gøre webudvikling. Vi skal også afdække nogle af funktionerne i disse tilføjelser, der kan hjælpe.

Først og fremmest skal vi installere Firebug.

Firebug

Firebug er et must-install-add-on til webudvikling. Forudsat at du ikke ved, hvor du kan få Firebug, kan du installere det her. Sandsynligvis skal du genstarte din Firefox, før den er aktiveret.

Derefter kan du se Firebug'en på en af ​​følgende måder: Følg denne menu Værktøjer> Webudviklere> Firebug, højreklik på websiden og vælg “Undersøg Element med Firebug”.

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

Firebug er helt identisk med Chrome-udviklerværktøjer. den har et panel for at se HTML-strukturen og stilarterne og også et konsolpanel for at se fejlene, advarslerne og logfilerne. Men jeg har nogle flere tips, som forhåbentlig kan være nyttige.

Justering af boksstørrelsen

HTML-elementet består af CSS-boksemodel, der består af margin, polstring og objektdimension (bredde / højde). Der er tidspunkter, hvor vi måske skal ændre disse egenskaber. I så fald kan du vælge et af de elementer, du vil ændre det, og derefter gå til Layout panel.

I dette panel finder du en illustration af en CSS box model sammen med dens oplysninger, herunder bredde og højde. Selvom disse to egenskaber ikke er specificeret i CSS, dette værktøj er klog nok til at bestemme værdien. Hvis du har brug for at ændre dem, kan du blot klikke på værdien og bruge piletasterne op eller ned for at øge eller reducere værdien.

Beregnede stilarter

I mange situationer spekulerer du sikkert på, hvorfor visse stilarter ikke anvendes. En af de nemmere og hurtigere måder, især når du har tusindvis af linjer af stilarter, er ved at inspicere det fra Beregnet stil panel. Dette eksempel viser, at anker tagtekstfarven overskrives af .knap klasse, mens baggrunden for .knap klassen overskrives af .button.add.

Inspektion Font Family (den nemme måde)

Du finder sandsynligvis ofte noget som dette i font-family ejendom i CSS med forskellige fontfamilier. Desværre vil dette ikke fortælle os specifikt hvilken skrifttype browseren tager. For at gøre identifikationen nemmere kan vi installere denne Firebug udvidelse nemlig FireFontFamily.

Når installationen er færdig, skal du indlæse din webside, og nu kan vi tydeligt se, hvilken skrifttypefamilie der anvendes. I vores tilfælde er det faktisk Helvetica Neue (se skud).

Analysere ydeevne

Dette kan være platitude, men Site Speed ​​er nu et af Google-parametre (algoritme) til at bestemme hjemmesiden kvalitet; Websitet, der laster hurtigere, anses for at være veludviklet og rangeret højere med hensyn til indhold. Så hastighed er ikke noget, der skal overses.

Netpanel

Det første sted, som du måske skal besøge for at inspicere dit website, er Net panel. Dette panel registrerer HTTP-anmodningen på dit websted, når den er indlæst. Dette skærmbillede nedenfor viser en webside, der indlæser 42 anmodning og tager rundt 4,36 sekunder at indlæse.

Du kan derefter sortere HTTP-anmodningen på deres type som HTML, CSS og Images.

YSlow!

Desuden kan du også installere YSlow, en udvidelse til Firebug fra Yahoo !. Når den er aktiveret, finder du et ekstra panel, udtrykkeligt kaldet Yslow!.

Svarende til Net panel, Yslow! vil optage websidens forestillinger, når den bliver indlæst, men så vil den også fortælle dig, hvorfor websiden er langsom, og hvad kan vi gøre for at løse det. I dette eksempel kører vi en test på en webside, og den bliver scoret 86 for generelle præstationer, som betragtes som OK.

Sidens hastighed

Alternativt kan du også installere Page Speed ​​fra Google. Svarende til YSlow!, det tester website hastighed ydeevne, om end testresultatet kan være lidt anderledes. Dette eksempel viser, at den samme webside scorede 82 efter sidens hastighed.

Web Developer Tools

Webudviklerværktøjer er naturligvis til webudviklere, og det har en masse funktioner pakket i denne værktøjslinje. Men denne nedenfor er en af ​​mine favoritter.

Billedinspektion

Der er tidspunkter, hvor vi måske skal have billedoplysninger fra websiden. Jeg ser generelt folk gør dette ved at snuble over browseren eller ved at højreklikke på billedet og vælge Se billedinformation, ligesom:

Men denne måde er ikke ret effektiv, når vi skal hente informationen fra mange billeder. I så fald kan vi udnytte Billeder funktion fra tilføjelsen. Denne funktion er let tilgængelig fra billedmenuen fra værktøjslinjen.

Og dette eksempel viser, hvordan vi viser billeddimensionen og billedfilstørrelsen samtidigt:

Firefox indbyggede værktøjer

I nyere versioner har Firefox forbedret sine indbyggede funktioner til webudviklere, hvoraf nogle er:

Native Inspect Element

Denne indfødte Undersøg Element fra Firefox kan det ligne “Undersøg Element i Firebug”, men det virker faktisk på forskellige måder.

Denne gang vil jeg ikke gennemgå denne funktion yderligere, da den er i det væsentlige identisk med Firebug HTML og CSS panel, omend med en forskel i layout og design. Men der er en særpræg, der er værd at prøve, den 3D-visning.

Ved brug af 3D-visning Du kan se websidens struktur i dybden. For at aktivere denne visning kan du finde knappen nederst til højre på “Firefox Native Inspect Element”. Sådan er det 3D-visning ligner.

Jeg bruger det ikke så ofte som andre funktioner, men det er en ganske nyskabende funktion fra Mozilla jeg indrømmer, og bestemt meget nyttig i visse situationer.

Webdesign View

Siden den stigende popularitet i Responsive Web Design har Firefox startet en Responsive Bookmarklet til browseren. Dette værktøj gør det muligt for os at teste vores responsive hjemmeside i forskellige visningsporte uden at ændre størrelsen på browservinduet.

Denne visning er tilgængelig fra denne menu: Værktøjer> Webudvikler> Webdesignvisning. Og det her, hvordan udsigten ser ud.

Style Editor

Til sidst, hvis du arbejder med CSS ofte, vil du sandsynligvis blive forelsket i denne funktion. Siden versionen af ​​11 havde Firefox tilføjet Style Editor i sine native udvikler værktøjer.

Denne funktion er lige så cool som Webdesign View, det giver dig mulighed for at redigere CSS, se effekten øjeblikkeligt i browseren og gem de ændringer, der direkte påvirker CSS kildefilen.

Style Editor er tilgængelig fra følgende menu: Værktøjer> Webudvikler> Style Editor.

Endelig tanke

Der er en masse funktioner pakket i disse Firefox-tilføjelser, og de her diskuterede er blot nogle af de funktioner, jeg bruger ganske ofte under webudvikling. Ikke desto mindre kan du have nogle andre tip, der kan være nyttige for at øge produktudviklingsproduktiviteten i Firefox.

Hvilke funktioner bruger du ofte? Du kan dele dine tanker i kommentarfeltet nedenfor.