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

Samsung Galaxy Note 4 release date, price and specs UK: Is this the actual Note 4 - video

IDG UK Sites

How Apple, Adobe, Microsoft and others have let us down over UltraHD and hiDPI screens

IDG UK Sites

How Ford designs next-generation cars at its Melbourne Design Centre

IDG UK Sites

iPhone 6 release date, rumours, video, UK price & images: iPhone launch event confirmed for 9...