En titt på viktiga Firefox-verktyg för webbutvecklare

Firefox har länge varit den föredragna webbläsaren för webbutveckling. Det finns ett antal användbara tillägg för att göra jobbet. I det här inlägget kommer vi att undersöka några tillägg som jag tycker är viktigt att installeras om du ska göra webbutveckling. Också vi kommer att avslöja några av funktionerna i dessa tillägg som kan hjälpa till.

Först och främst måste vi installera Firebug.

Pyroman

Firebug är en måste installera tillägg för webbutveckling. Förutsatt att du inte vet var du ska få Firebug, kan du installera den här. Förmodligen måste du starta om din Firefox innan den är aktiverad.

Därefter kan du se Firebug på något av följande sätt: följ den här menyn Verktyg> Webbutvecklare> Firebug, högerklicka på webbsidan och välj “Inspektera element med Firebug”.

Alternativt kan du hitta en Firebug-ikon i Firefox och klicka på den, detta kommer att visa firebug-fönstret;

Firebug är ganska identisk med Chrome Utvecklarverktyg. den har en panel för att se HTML-strukturen och stilerna, och även en konsolpanel för att se fel, varningar och loggar. Men jag har några fler tips som förhoppningsvis kan tyckas vara användbara.

Justera rutans storlek

HTML-element består av CSS-boxmodell som består av marginal, vaddering och objektdimension (bredd / höjd). Det finns tillfällen då vi kanske behöver ändra dessa egenskaper. I det fallet kan du välja ett av de element du vill ändra det och gå sedan till Layout panel.

I den här panelen hittar du en illustration av en CSS-boxmodell tillsammans med dess information, inklusive bredd och höjd. Även om dessa två egenskaper inte anges i CSS, detta verktyg är smart nog att bestämma värdet. Om du behöver ändra dem kan du helt enkelt klicka på värdet och använda upp- eller nedåtpilknappen för att öka eller minska värdet.

Beräknade stilar

I många situationer undrar du förmodligen varför vissa stilar inte tillämpas. Ett av de enklare och snabbare sätten, särskilt när du har tusentals linjer av stilar, är genom att inspektera den från Beräknad stil panel. I det här exemplet visas att textfärgen för ankare tagits över av .knapp klass, medan bakgrunden av .knapp klassen skrivs över av .button.add.

Inspektera Font Family (det enkla sättet)

Du hittar förmodligen ofta något liknande här i typsnittsfamilj egendom i CSS med olika fontfamiljer. Tyvärr kommer det inte att berätta för oss vilken typ av webbläsare webbläsaren tar. För att göra identifieringen enklare kan vi installera denna Firebug-förlängning nämligen FireFontFamily.

När installationen är klar ladda din webbsida, och nu kan vi tydligt se vilken typsnittfamilj som tillämpas. I vårt fall är det faktiskt Helvetica Neue (se skott).

Analysera prestanda

Detta kan vara platitude, men Site Speed ​​är nu en av Google-parametrar (algoritm) för att bestämma webbplatsens kvalitet. Webbplatsen som laddas snabbare anses vara välutvecklad och rankad högre i innehåll. Så hastighet är inte något som bör förbises.

Net Panel

Den första platsen som du kanske behöver besöka för att inspektera din webbplatsprestanda är Netto panel. Den här panelen registrerar HTTP-begäran från din webbplats när den laddas. Denna skärmdump nedan visar en webbsida som laddas 42 begäran och tar runt 4,36 sekunder att ladda.

Du kan sedan sortera HTTP-förfrågan på deras typ som HTML, CSS och bilder.

YSlow!

Dessutom kan du också installera YSlow, en förlängning för Firebug från Yahoo !. När den är aktiverad hittar du en extra panel kallad Yslow!.

Liknande Netto panel, Yslow! registrerar webbsidans prestanda när den laddas, men då kommer det också att berätta varför webbsidan är långsam och vad kan vi göra för att lösa det. I det här exemplet kör vi ett test på en webbsida och det görs 86 för övergripande prestanda, vilket anses vara OK.

Sidhastighet

Alternativt kan du också installera sidhastighet från Google. Liknande YSlow!, Det testa webbplatsens hastighetsprestanda, om än testresultatet kan vara något annorlunda. Detta exempel visar att samma webbsida gjorde 82 enligt sidhastigheten.

Web utvecklare verktyg

Webutvecklare Verktyg är självklart för webbutvecklare och det har en massa funktioner packade i den här verktygsfältet. Men den här nedan är en av mina favoriter.

Bildinspektion

Det finns tillfällen då vi kan behöva få bildinformation från webbsidan. Jag brukar se att folk gör det här genom att snubbla över webbläsaren eller högerklicka på bilden och välj Visa bildinformation, såhär:

Men det här sättet är inte riktigt effektivt när vi behöver få informationen från många bilder. I så fall kan vi utnyttja Bilder funktionen från tillägget. Den här funktionen är lättillgänglig från bildmenyn från verktygsfältet.

Och detta exempel visar hur vi visar bilddimensionen och bildfilstorleken samtidigt:

Firefox Inbyggda Verktyg

I senaste versioner har Firefox kraftigt förbättrat sina inbyggda funktioner för webbutvecklare, några av dem är:

Native Inspection Element

Detta infödda Inspektera elementet från Firefox kan likna “Inspektera element i Firebug”, men det verkar faktiskt på olika sätt.

Den här gången kommer jag inte att gå igenom den här funktionen längre eftersom den är väsentligen identisk med Firebug HTML och CSS-panelen, om än med skillnad i layout och design. Men det finns en särskiljande egenskap som är värt att prova, den 3D-vy.

Använder sig av 3D-vy Du kan se webbsidans struktur i djupet. För att aktivera denna vy kan du hitta knappen längst ner till höger om “Firefox Native Inspect Element”. Så här 3D-vy ser ut som.

Jag använder det inte så ofta som andra funktioner, men det är en ganska nyskapande funktion från Mozilla jag erkänner, och det är verkligen mycket användbart i vissa situationer.

Webdesignvy

Sedan den ökande populariteten i Responsive Web Design har Firefox initierat en Responsive Bookmarklet till webbläsaren. Med det här verktyget kan vi testa vår responsiva webbplats i olika visningsportar utan att ändra storlek på webbläsarfönstret.

Denna vy är tillgänglig från den här menyn: Verktyg> Webbutvecklare> Webdesignvy. Och, hur ser utsikten ut.

Style Editor

Slutligen, om du arbetar med CSS ofta kommer du sannolikt att bli kär i denna funktion. Sedan versionen av 11 hade Firefox lagt till Style Editor i sina egna utvecklingsverktyg.

Den här funktionen är lika cool som Webdesignvy, det låter dig redigera CSS, se effekten direkt i webbläsaren och spara ändringarna som direkt påverkar CSS-källfilen.

Style Editor finns på följande meny: Verktyg> Webbutvecklare> Style Editor.

Slutlig tanke

Det finns en massa funktioner packade i dessa Firefox-tillägg och de som diskuteras här är bara några av de funktioner jag använder ganska ofta under webbutveckling. Ändå kan du ha några andra tips som kan vara användbara för att öka webbutvecklingsproduktiviteten i Firefox.

Vilka funktioner använder du ofta? Du kan dela dina tankar i kommentarfältet nedan.