Before you start debugging your code, it's helpful to get to know the tools that come with your browser to help you with this. Let's look at what's available.
Firefox has traditionally been the web developer's browser of choice because of the great developer tools it offers. However, in the last year or so, more developers are using Chrome as that also has developer tools, as well as the benefit of being slightly more reliable in terms of rendering code.
Let's look at some of Firefox's developer tools.
This extension adds a toolbar to the Firefox browser. You can download it from http://chrispederick.com/work/web-developer/.
The toolbar lets you link directly to the W3C's HTML5 and CSS validation tools. It also lets you toggle and view your CSS output in various ways, and lets you view and manipulate a myriad of information your page is outputting on-the-fly.
The following screenshot shows some of the options available with the Web Developer toolbar:
A more robust tool is the Firebug extension for Firefox, available at http://www.getfirebug.com/.
Firebug includes features for reviewing HTML, CSS, and the Document Object Model (DOM). Also, the latest version of Firebug lets you make edits on-the-fly to easily experiment with different fixes before committing them to your actual document.
Note
The Document Object Model, or DOM, defines the structure of the markup in your HTML pages. For more, see http://www.w3.org/TR/DOM-Level-2-Core/introduction.html.
The following screenshot shows how Firebug displays source code:
Note
There's also a Firebug Lite version for Internet Explorer, Safari, and Opera available at http://www.getfirebug.com/. Once you have Firebug installed in your browser, you can turn it off and on by hitting F12 or going to View | Firebug.
Google Chrome also includes developer tools, which come bundled with Chrome—you don't need to download any extensions. You can find out about them at https://developers.google.com/chrome-developer-tools/docs/overview.
To access the developer tools, click on View | Developer. This presents you with a list of three types of tools:
- View Source, which gives you a full-screen view of the source code in a new tab
- Developer Tools, which displays the source code alongside the open page, using a number of panels to display different items, such as elements, resources, and sources
- JavaScript Console, which displays the JavaScript console, enabling you to see how JavaScript is operating and debug it
The screenshot shows the Elements pane as seen using the Developer Tools option, with the header element in the page highlighted.
The Safari browser also has developer tools, but unfortunately, since the Safari 6 update, these aren't as useful or wide-ranging as those in Chrome. So, I would always recommend developing in Chrome, if you're on a Mac.
What Safari does have, however, is a means to view code being output on an iOS device, if you're developing a theme aimed at mobile users. You can find out more about this at http://mobile.smas.hingmagazine.com/2012/12/10/ios6-new-features-developers-mobile-safari/.