Firebug Pointers

Downloading Firebug: http://getfirebug.com. Restart Firefox. Remember, Firebug is a Firefox plug-in.

• inspect HTML pages
• inspect CSS style sheets
• debug JavaScript

Key Pointers (JavaScript debugging)

• Installing Firebug
• Breakpoints
• 'Watching' variables
• Step-into the function
• Step-over a function

Installing Firebug: http://getfirebug.com. Restart Firefox. Remember, Firebug is a Firefox plug-in. So download Firefox if you don't have it already. Download as per the instructions and restart Firefox after the download.

Launching Firebug: Open the HTML page you want to debug. Go to Tools->Firebug->Open Firebug in a new Window. (Remember, HTML pages contain your javascript, either as inline code or as a reference to a separate .js file)

Debugging Scripts: Go to the "Scripts" tab in the Firebug window. Hit "Enabled". Select the JavaScript to debug from the Firebug window.

Breakpoints: Just click on the line you want to debug in the left column. The appearance of a 'red blob' indicates that a breakpoint has been set!

Refresh the page and perform the actions. Only when the 'breakpointed' instruction is supposed to execute, the execution will be halted and you can then start debugging.

Inspecting Variables: The right column of Firebug displays all the 'active' variables in actions with the values that they are 'currently' holding.

Cheating the execution: You can be a little smart(er). Use the 'Watch' window to execute your own expressions which could force the flow of control to be altered.

Step-by-step execution: Once at the breakpoint, further execution can be done in a step-by-step way, i.e. executing a single statement at a time. Use F10 to achieve that while you concurrently inspect/watch your variables. In case of a function call, you can choose to step-into the function by using F11. All these are present as icons on the left column in your Firebug window.

Well, I think that's all.