One of the Add-ons that I’ve used regularly for Firefox over the last few years has been the Web Developer Add-on by developer Chris Pederick.
So, when I switched over from Firefox to Google Chrome a little over a year ago, those handy tools were surely missed. Every now and then I’d have to revert back to Firefox to debug a little JavaScript, troubleshoot a few CSS tweaks, or view some generated source markup. But life still went on.
So, when Chrome Extensions official came out of Beta earlier this year, I knew there was hope. And sure enough, I recently came across the official port of the Web Developer toolkit as a Chrome Extension. Happy dance. 🙂
A Little Deeper
Take a closer look at the features that I’ve found the most helpful to my workflow in both Firefox and now the Chrome version, here’s a list of the functions I use the most:
- Edit CSS – this option lets you view all the CSS references in your web page and make adjustments while seeing the results real-time.
- View Generated Source – haven’t found this in the Chrome Extension yet, but in Firefox, this one let you view all the HTML that was currently rendered on the page. This is helpful for any markup that’s generated dynamically using JavaScript or AJAX that isn’t part of the original markup sent to the browser.
- View JavaScript – let’s you view all the JavaScript files, local and external, referenced by your page all in one view.
- View Style Information – same deal as View JavaScript, and came in handy when I was just searching for something and not needing to edit just yet.
- Resize – this option let you set different view settings so you can view your page rendered with different resolutions. Even more handier now for testing mobile websites.
There are a ton of other features that I use less often but it’s good to know they are available when needed.
Plus, one of the things I like about the Chrome version is that the tools are a flyout menu and not a dedicated toolbar like they are in Firefox. One of the early reasons I liked Chrome in the first place was that it removed all the clutter in the browser, so that stays true to form here, too.
Thoughts?
Have you used the Web Developer add-on for Firefox or now the Chrome Extension? Do you have other extensions for Chrome that you’re head over heels about that you’d like to share? I’m still experimenting with a few myself, so if you feel like leaving a recommendation, I’m all ears.
– Kris
