JavaScript Debugging Techniques with Firebug
By Akash Mehta2008-04-20
JavaScript debugging tools
|
|
If you want to debug JavaScript, first you'll need the right tools. Firefox is pretty much assumed here, and make sure you have the Firebug extension installed. Internet Explorer tends to "soft fail", or silently fail, giving you a blank page without reporting the actual error. Firefox and Firebug togther give you serious web development power, from debugging JavaScript to inspecting the DOM, modifying code at runtimeand testing JS expressions. You'll also want a general editor with syntax highlighting - if you develop on Windows, I recommend Notepad2.
Finally you should bookmark JSLint, and run your code through it reuglarly. JSLint will scan your code for errors (syntax and runtime, though not logic). It also helps you identify bad practices which can cause runtime and logic errors.
Introduction to Firebug
Firebug is the most useful tool you will ever use for JavaScript debugging. It integrates perfectly into Firefox, replacing your standard JavaScript error console and providing a number of JavaScript debugging features. Here's a quick overview.
To begin, install the Firebug extension in Firefox and restart your browser. A tick icon or a gray circle will appear in the bottom right of your page. Right click it and make sure Firebug is enabled (usually unticking both "disable firebug" options does the trick). You should see the following:
This is the main Firebug console, a central area to work with the page. In the middle is the actual console, which will report errors and the results of your statements. Up the top in the second row are the various tabs, each providing different JavaScript functionality.
At the very top is the main menu; you will probably only use the "Inspect" button from here (you may not have a "Profile" button available). Inspecting will allow you to select individual HTML DOM nodes, view information about them, alter their attributes and CSS etc.
Finally, at the very bottom (the line with the >>>)
is your interface to the JavaScript interpreter. You can run JavaScript
commands here, and they will be executed within the context of the
current page. If you need more space, click the up arrow at the end of
the line to open up a multiline input. If you try and paste multiple
lines of JavaScript, this will open automatically. You can then call
functions, check the values of variables etc.
Tutorial Pages:
» Understanding JavaScript errors
» General debugging
» JavaScript debugging tools
» Debugging syntax errors
» Debugging runtime errors
» Debugging logic errors
» Further reading
