Debugging Web Pages
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.
Navigating the DOM
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.
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.