Skapa den ultimata Firefox webbutvecklingsprofilen

När det är korrekt konfigurerat kan Firefox bli det ultimata webbutvecklingsverktyget, vilket ger dig direkt tillgång till den sida du jobbar på så att du kan stila din sida i realtid, felsöka javascript eller redigera html.

Skapa separat profil för webbutveckling

Installera alla dessa utvecklingsverktyg gör Firefox till en mycket tung webbläsare, så vi bör först skapa en ny profil för Firefox.

Du kan starta en separat profil samtidigt som din vanliga profil genom att skapa en ny genväg med dessa argument och ersätta WebDev med namnet på din profil. Det finns också en mer detaljerad förklaring av hur man gör det här.

firefox.exe -P WebDev-no-remote

Nu när du har Firefox konfigurerad med en separat profil bara för webbutveckling, låt oss ta en titt på de tillägg som vi kan använda för att göra Firefox till det ultimata webbutvecklingsverktyget.

Måste ha Web Dev Extensions

Det här är alla tillägg som jag använder regelbundet för webbutveckling.

Pyroman

Firebug är den mest kraftfulla förlängningen för debugging javascript, visning av CSS och html. Du kan göra dynamiska ändringar i koden och CSS, och använda den för att felsöka din Ajax-kod. Det är verkligen den bästa förlängningen där ute.

Web Developer Extension

En av de bästa förlängningarna för x år. Detta är ett måste för alla utvecklare, men du har redan hört talas om det.

Aardvark Extension

Denna förlängning är en mycket lätt förlängning som enkelt visar dig elementen på sidan och deras tilldelade klass / id. Det är enklare att använda än webbutvecklarens förlängning för de tillfällen då du bara behöver snabbinformationen för ett element. Du kan också använda den för att ta bort element från sidan.

ColorZilla

Välj färger enkelt. Inget mer smärta att hitta färger inbäddade någonstans i ett stilark.

Visa källa med

Du kan ställa in flera visningskällaprofiler för att öppna källan i olika applikationer.

HTML Validator

Denna förlängning låter dig enkelt validera din HTML-sida och installeras i View Source-panelen.

Mekaniker

Det är inte precis en webbutvecklare, men Greasemonkey är fantastisk, inte minst för möjligheten att automatisera vanliga åtgärder, vilket är en bra tidsbesparare för webbutvecklare.

Mäta det

Mät enkelt avstånd på skärmen med denna förlängning. När du har mätt ett område kan du dra rektangeln runt skärmen för att användas som jämförelse.

IE View / IE-fliken / OperaView / FirefoxView / Safari View / IE View Lite

Dessa tillägg (välj) gör att du enkelt kan visa den aktuella sidan i olika webbläsare. IE-fliken kan till och med låta dig köra IE inuti en flik om du var så benägen.

Rensa cacheknapp

Rensar cacheminnet. Särskilt användbart för att kontrollera nya CSS-ändringar.

Starta om Firefox

Återstart Firefox-förlängningen är mycket användbar för att stänga och starta om Firefox med alla flikar och sessioner intakta.

Tab Mix Plus

Tab Mix Mix Plus-utvidgningen är en bra förlängning i allmänhet, men har några väsentliga användbara funktioner för webbutvecklare: Duplicera flik och kopiera flikadress.

YSlow

YSlow-tillägget är en ny tillägg från Yahoo som analyserar din sida och berättar var du gör misstag. Det kommer även att ge dig en betyg på din webbplats prestanda. Du märker den lilla mätaren i nedre högra hörnet ... det berättar om din totala storlek på sidan och belastningstiden. Mycket användbar förlängning, men det kräver Firebug-förlängningen.

Dummy Lorem Ipsum

Dummy Lipsum generator förlängningen kommer att generera dummy innehåll för dig baserat på den berömda Lorem Ipsum texten som är mycket användbar för att lägga ut falskt innehåll på din webbplats.

Screen!

Screengrab-förlängningen låter dig ta skärmdumpar av sidor, men kan göra något som ett vanligt skärmdumpverktyg inte kan - det kan ta en bild av hela sidan, inte bara den synliga delen.

 

Det finns massor av andra tillägg som du kan använda, men det är det bästa av det bästa från allt jag har sett. Om du har en annan anknytning som du använder regelbundet, lämna ett omnämnande i kommentarerna.

Vid denna tidpunkt har du nu gjort Firefox till det ultimata webbutvecklingsverktyget. Ta dig tid att lära dig hur du använder Firebug speciellt.