Pin Me

Using Web Inspector: Firefox Guides

written by: William Springer•edited by: Jean Scheid•updated: 12/14/2010

Firefox 4 will contain a Web Inspector feature built in to help with web design. What does this mean for you--find out here!

  • slide 1 of 3

    Debugging Web Pages

    Screenshot of Firefox 4 Web Inspector Web pages can, by design, be very difficult to debug.

    Why by design? Web browsers are made to fail gracefully when encountering an error. When encountering bad code, they don't output an error message; they simply ignore it and render the page as well as possible. While this is the desired behavior - it doesn't subject the end user to distracting error messages - it can make it very difficult to find a typo in the code.

    Additionally, as web pages get more complex, with multiple CSS styles being applied to a single element, it can be difficult to figure out exactly which section of the code is causing a page element to display the way it does, particularly as the code generally is located nowhere near the element being displayed, and in fact is probably in another file altogether!

    As a result, modern web browsers often include special tools to help web designers debug their pages. In this article, we'll look at Web Inspector Firefox, a tool that appears in Firefox 4.

    Screenshot by author courtesy of Mozilla Links.

  • slide 2 of 3

    Navigating the DOM

    One concept that beginning web programmers may not be familiar with is the DOM, or Document Object Model. This is essentially a collection of the objects that make up a web page; it allows for random access to various objects. The DOM is required for modifying a web page using JavaScript.

    One of the main goals of Web Inspector from Firefox is to allow the user to quickly identify each element on a web page using the DOM. Firefox previously contained this functionality as DOM Inspector, but it was removed during the development of Firefox 3 as it was considered to be too technical for most users.

    The W3C (World Wide Web Consortium) defines the DOM like so:

    "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

    The DOM defines both the objects that make up a document and the properties and methods (or interfaces) of those objects. Manipulating the DOM allows you to add, delete, get, or change HTML elements.

  • slide 3 of 3

    Web Inspector vs Firebug

    The capabilities in Web Inspector Firefox, and others as well, are already present in Firebug. Firebug is an add-on for web designers and is considerably more complex than web inspector; it may be overkill for most users.

    Firebug allows you to inspect the HTML and modify the layout and style in real time, debug JavaScript, and even analyze network usage. As Firefox 4 has not yet been released, it is not known exactly what will be present in the final release code, and as such, the two programs cannot yet be directly compared. However, Web Inspector will come as part of Firefox, while Firebug will continue to be an optional add-on that can be downloaded separately.