css, development, javascript, programming
Firefox Extensions For Web Developers
While I like to keep the software installs on my machines pretty vanilla, if there is a tool that helps my productivity I’m all for checking it out. While I’ve moved primarily to WebKit for web development, I often find myself using Firefox as well. I keep my Firefox install to the base plus three extensions.
Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug tends to be used the most by us. I can easily inspect the DOM and edit CSS inline. Those are key features for us. Also it immediately tells any JavaScript errors in the code. Another nice feature is you can print things out in the console. This helps quite a bit in debugging.
Web Developer Toolbar
Adds a menu and a toolbar with various web developer tools. Sometimes Firebug isn’t able to inspect the DOM so being able to view the generated source is nice. Also you are able to disable certain aspects of the page such as JavaScript or CSS or outline certain elements as well. It has a built in validator for checking your code.
YSlow
YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. YSlow is a nice extension to Firebug. Yahoo did a nice job of collecting some tips for improving the speed of a website. While in some sites, I can’t always get an A rating I try to make sure if there is anything I can do, that I at least make an attempt to do it.
Read the rest of this entry »