Debugging
  1. Debugging intro
  2. Debugging basics
  3. Debugging errors
  4. Debugging find errors
  5. Debugging best practices
  6. Debugging tools
  7. Debugging summary

Debugging tools

Fortunately, debugging doesn't always have to be done manually. Here are some tools to help you in your quest to debug your code.

Browser error console's

Firefox and Opera have built-in error console's you can use to see if a webpage has CSS or Javascript errors.

Access error console in Firefox - go to Tools -> Error Console or press Ctrl+Shift+J.
Access error console in Opera - go to Tools -> Advanced -> Error Console

Both the Firefox and Opera error console's will show you the error(s) that occurred on a page as well as the line number where the error(s) occured. Both error console's show errors as well as warnings. The Firefox error console also lets you evaluate segments of code.

Firebug

Firebug is an add-on for the Firefox browser. It is definitely one of the best tools out there for web developers.

Download Firefox
Download Firebug

Open Firebug by pressing F12 or go to Tools -> Firebug -> Open Firebug

Debugging HTML with Firebug

Select the HTML tab to access the HTML code of the page.

When you move the mouse over a tag in the HTML code you will notice that Firebug highlights it. You can use Firebug's HTML window to see an element's scope within a webpage. If an element does not appear where it's supposed to on a page this may give you an idea as to why this is.

Firebug also gives you the ability to edit the HTML of a page. To do this double click on the HTML tag you want to edit in the Firebug HTML window and it will appear on it's own for you to edit.

Debugging CSS with Firebug

Select the CSS tab to access the CSS code of the page.

Use Firebug's CSS window to change the styling of any element on the page. This really helps with troubleshooting because you can put borders around elements to be able to focus on them and really see their scope on the page. Once you apply the border, change any other aspect of the styling or add new styles to figure out why an element does not appear the way it's supposed to and how to make it appear that way.

NOTE: A quick way to access the CSS of an element on a webpage through Firebug is to right click that element and choose the 'Inspect Element' option. The HTML code for the element will appear on the left side of Firebug and the CSS code on the right side.

Debugging Javascript with Firebug

Select the Script tab to access the Javascript code of the page.

Left click the little arrow on the Script tab and choose 'Enabled' to enable the script panel. You can choose to break on all errors by checking 'Break on all errors' by left clicking the little arrow on the Script tab again and choosing 'Break on all errors'. This will highlight the line of Javascript code where an error occured. You can also create watch expressions, breakpoints, and see the call stack (functions currently running).

Firebug console window

The console window lets you evaluate segments of code. Select the Console tab to access the console window.

Enter a Javascript statement in the textbox at the bottom of the console window and press enter when you're ready to see the output. If there are no errors in your code, you will get the output. If there are errors, you will be told what they are. The console window will also show errors from the page (if there are any).

Venkman Javascript Debugger

Venkman is an add-on for Firefox that acts as a Javascript debugger.

Download Venkman Javascript Debugger

Once you've downloaded Venkman you can access it by going to Tools -> Javascript Debugger. Venkman will open in a separate window.

Venkman lets you do many things that will help you debug Javascript code. You can open any URL and inspect it's code, evaluate segments of code, create watch expressions, breakpoints, see the call stack (functions currently running), and more.

W3C validators

You can use W3C's HTML and CSS validators to see if your pages are valid. If your pages are not valid, this might be a reason why code is not working as it should be. When you have errors in your code, run your pages through the W3C validator, clean out any validation errors the validator shows you and try reloading the page.

W3C's HTML validator
W3C's CSS validator

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information