Firebug and Errors

When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about the errors in JavaScript, CSS, and XML.

Status bar error indicator

On the right side of the Firefox browser's status bar you will see a little green icon. This is Firebug's way of telling you that everything is A-Ok. When that icon turns into a red "x", things aren't so peachy.

Click the "x" to open the Firebug error console which will show you all of the errors that have occurred on the page.

No error soup

Most browsers report errors by dumping them all into one big window that includes the problems with every web page you've ever visited. Firebug is kinder than that; it shows you only the errors for the page that you're looking at.

Informative JavaScript errors

JavaScript errors include a wealth of information about what went wrong, including a description, the file and line number, and the line of source code that caused the error. Even more importantly, if you click the arrow to expand the description you will see a complete stack trace including the values of all function arguments.

Jump to the debugger

Every error report has a link on its right side that points to the file and line number where the error occurred. Clicking this link will take you right to the Firebug JavaScript debugger or CSS inspector so that you can get started on solving the problem right away.

Some errors also include the actual snippet of source that contains the error, which is also a link to the original file.

Quick search

Using the quick search box, you can filter the Firebug Console to show only the errors and messages that match the text that you searched for. As new rows are added to the console, they will only appear if they match the text in the quick search box.

Filtering errors

Firebug is capable of reporting errors in JavaScript, CSS, or XML files. If you only care about some of these languages, uncheck the ones you don't want to see in the Console's options menu.