Debugging web pages with Firefox

You've started designing some web pages. The concept is pretty simple. Just type up some HTML to get the layout you want and type your content in the right boxes.

Expanding beyond a single page, CSS becomes necessary to maintain consistent style. But it's a bit of a pain when you're trying to get things exactly right. Keeping the CSS file open in one window and a browser next to it, saving in one, reloading in the other... there's a better way.

Using the Web Developer extension, you can open the Edit CSS sidebar (screenshot) . It shows a tab for each stylesheet used for the current page and you can edit the contents directly. Remember to save your changes when you're done. The page is updated in real-time so there's no need to hit reload. Trying out different settings to see what works best is very easy. While you're checking it out, look at the other things that the extension can do.

Moving on, JavaScript is the next area we need some debugging help. When there's a syntax error in JS code, it will halt and none of the code will run. It's usually obvious when this happens as none of the JS on your page will work. If you've got the Web Dev extension installed, you'll see a red X on the right (screenshot) corner indicating there is a JavaScript error. Clicking on that button will open the JavaScript console (as would selecting "JavaScript Console" from the Tools menu). The JavaScript Console is a log of errors and warnings from any JS code, not just the current page. Don't be surprised when you open it and see tons of errors... they've been accumulating over time.

It's probably easiest to clear the logs in the JS console and reload the page so you can see all and only the messages pertaining to the page you're working on. For most errors, it will show which file and line number caused the error. To make things even simpler, clicking on it will open that JS file in Firefox's source viewer with the line in question already highlighted.

Moving on to the harder to find bugs... What about all those bugs that aren't syntax errors? You've got some interactive content, but when you click on your button, it's not doing what you want. It's pretty easy to out grow the JS console and need something a bit more powerful. That's where Venkman comes in. It's Firefox's JavaScript Debugger. It's not included with Firefox because most people don't even want to know what JavaScript is, let alone debug it.

To get started, browse to the page you want to debug. From the Tools menu, click on JavaScript Debugger, it may take a few seconds to load. In the Loaded Scripts pane is a list of all the JS files that are in use. This includes all tabs in all windows and even some extensions so the list may be long. Filenames that have a "J" in front of them are regular JS files. Files with a "?" in front are typically web pages that have inline JS. Expand the section for the JS file you're debugging to see a list of functions in that file. Double-click a function name to open it in the Source Code pane. The dashes to the left of the code are lines that can have breakpoints set by clicking on the dash. With a breakpoint set, the program will pause when that line of code is reached. Suppose you've got a table cell with an onclick function that's not working the way you want it to. Set a breakpoint at the top of the function that's called for the onclick event. Go back to the web page and click on the cell. The debugger will come forward with your code active, but paused. The current line (your breakpoint) will be highlighted. Using the Step Over button to walk through the code one line at a time, keep an eye on the Local Variables pane. It shows all the variables that the current function is using. If you want to tweak the code as it's running, there's a textbox below the black output pane where you can type commands (e.g. fields[i].className = "thumbnail").

Those who are already familiar with source code debuggers will want to check out some of the more advanced features. The Local Variables pane has a tab for Watches, right-clicking on a breakpoint and picking Properties gives options for conditional breakpoints and triggers, and there's also some Profiling options in the Profile menu.

Complexity begets complexity. When you're writing JS and XSLTs that take your XML files and modify them so much at runtime that they don't resemble the page source, how do you see what it looks like? Ok, maybe that was jumping ahead too far.

Say you've got a basic HTML file and you wrote a simple JS function that is called when you click a button on your page. Each click of the button adds a new row to a table on the page. But then you notice that the new rows don't have the same background color as the original rows. Selecting View -> Page Source doesn't show the extra rows in your table because they weren't there when the page was loaded. You need a way to view dynamic changes to your content.

The DOM Inspector (sometimes called DOMi) is tool for viewing run-time attribute and structure of a document. If comes with Firefox, and is an option at install time. To use it, browse to your page and select "DOM Inspector" from the Tools menu. The window may look empty, but there's a lot there just waiting to be opened up.

You can expand all the HTML tag and then the BODY tag and browse through your whole document tree that way, but if your page is large and/or complex, it could be hard to find the element you're looking for. The DOMi give us an easy way to find what we want...

Click on the Inspect button in the top right. Now you can see your page in rendered form. If that's not the page you want, put the correct URL in the box at the top and click Inspect again. Next, click on the "Find node by clicking" button and click on the part of your page that you're interested in. The document tree will expand and highlight the element you clicked on while the top right quadrant will show details about that element.

Looking at the list of attributes for the node you clicked on isn't all you can do. By right-clicking on them, you can add, remove or change their values. And those are just the HTML attributes on the element. What about all the properties accessible through JS? They're all there too. In the titlebar of that pane where it says "Object - DOM Node", click the dropdown and select "Javascript Object". At first, it just says "target", but expanding that, you can see all the JS properties, events and functions that are defined on the selected element.

What about CSS debugging? That's in there too! Going back to the dropdown menu for the Object pane, select "CSS Style Rules". The pane splits in half and in the top half, you'll see all the CSS rules that are being applied to the selected object. Rules whose "File" starts with "resource://" are part of Firefox itself (built-in, from the theme or a user stylesheet). In general, the interesting ones you should recognize by their URL. Selecting one of those rules will show all of the properties it assigns below. In there, you can add, edit or delete properties. Keep in mind that changes you make there can't be saved.

Without tools like these, debugging dynamic changes to your page (often called DHTML) involves a lot of guess work and headaches. I've come to depend on them so much that without these tools, AmigoPix wouldn't have all the features it has now (not to mention some of the fun features I've got planned).