24Aug
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
Dessa är alla tillägg som jag använder regelbundet för webbutveckling.
Firebug
Firebug är den mest kraftfulla förlängningen för felsökning av 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 års körning. 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 utvidgning 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
Med den här förlängningen kan du enkelt validera din HTML-sida och installeras i View Source-panelen.
Greasemonkey
Det är inte exakt en webbutvecklareutvidgning, men Greasemonkey är fantastisk, inte minst för möjligheten att automatisera vanliga handlingar, vilket är en bra tidsbesparare för webbutvecklare.
Mät 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 Visa
/ IE-fliken / OperaView / FirefoxView / Safari Visa / IE Visa Lite
Dessa tillägg( välj ditt val) låter dig enkelt se 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 cache-knapp
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
Tabell Mix Plus-förlängningen är en bra förlängning i allmänhet, men har några väsentligen användbara funktioner för webbutvecklare: Duplicate Tab och Copy Tab URL.
YSlow
YSlow-förlängningen är en ny tillägg från Yahoo som kommer att analysera din sida och berätta var du gör misstag. Det kommer även att ge dig en betyg på din webbplats prestanda. Du kommer att märka den lilla mätaren i nedre högra hörnet. .. det berättar om hela sidans storlek och laddningstiden. Mycket användbar förlängning, men det kräver Firebug-förlängningen.
Dummy Lorem Ipsum
Dummy Lipsum-generatorens förlängning genererar dummyinnehå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.
Screengrab!
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 här ä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 den här tiden har du nu gjort Firefox till det ultimata webbutvecklingsverktyget. Ta dig tid att lära dig hur du använder Firebug speciellt.