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.