We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message

Web Developer Add-On Helps You Debug Web Pages in Firefox

Web Developer is a free Firefox add-on that offers a plethora of tools for debugging websites and tweaking browser behavior.

Modern Web browsers are designed to provide the fastest browsing experience possible for users. They use technologies such as caching (saving parts of the page locally for future visits) that are great for end users, but can be major annoyances when developing websites. To switch these features off selectively, I use Web Developer for Firefox.

Web Developer comes as a no-frills toolbar with twelve buttons, each opening its own drop-down menu. Some of these are self-explanatory, such as the Disable menu for disabling caching, Java, JavaScript, and other browser features. Others require a bit more puzzling out, such as the catch-all Miscellaneous menu that you can use for displaying line guides, a ruler, and a magnifier, and for making frames resizable.

Web Developer can be a huge time saver. I recently had to work on a complex JavaScript application, and had to do my work on the server side (not locally). I would save a JavaScript file to FTP and then need to reload the page to see my changes. Because of the way the application was built, hard-refreshing the page with Ctrl + F5 would not get rid of the cached files, and would not show my new changes. Without Web Developer, I would have had to manually clear the cache every time. Web Developer let me solve this with a single option: I just disabled browser caching altogether, and the browser always fetched the latest files.

Compared to Mozilla's carefully structured Firefox add-on Firebug, Web Developer feels more like a random collection of tools. Random does not mean haphazard, though: Each of the tools has its use, and they can all come in handy at one time or another. Two quick examples: the Display Image File Sizes option in the Images menu lets you audit an entire page for large images at a glance, and the Outline Tables option in the Outline menu lets you quickly see if tables were used properly (to display tabular data) or as crutches for page layout instead of DIV elements (like in 1998).

Because Web Developer is not thoroughly documented and is built as a toolbox of loosely-related utilities, the best way to become familiar with it is just to play around with it. Thanks to its simple layout, you can simply browse through the menus once and figure out what most items do based just on their labels. If you get stuck, you can always check the brief FAQ posted by author Chris Pederick. It is not extensive, but might help you out of a bind.

Web Developer is available both for Chrome and Firefox, but I use it only on Firefox, in tandem with the excellent Firebug add-on. Together, this combo makes Firefox into a powerhouse browser for developing websites and JavaScript-rich Web apps.

IDG UK Sites

Best Black Friday 2014 tech deals: Get bargains on smartphones, tablets, laptops and more

IDG UK Sites

What the Internet of Things will look like in 2015: homes will get smarter, people might get fitter

IDG UK Sites

See how Trunk's animated ad helped Ade Edmondson plug The Car Buying Service

IDG UK Sites

Yosemite tips: Complete Guide to OS X Yosemite