Your browser does not support JavaScript!
Upvotes Anonymous 0 User 0

How to Debug JavaScript using FireBug

With the Firefox browser, there is a very useful addon named FireBug:
After installing FireBug, you can open it by clicking the bug: 
The FireBug panel (highlighted above) has multiple tabs. We'll focus on the Script tab.

To simplify this, let's open the index.html (provided in the Starter Web Page):
I've opened the Script tab, and chosen the index.js file.

Now let's set a breakpoint. A breakpoint allows you to pause the JavaScript while it's running, in order to see what's happening with your variables.

If we click next to a line of code we'll see a red dot:
(Note: I added a variable above, for demonstration)

If we refresh the browser page, we'll see this:
The JavaScript execution has paused at the line with the red dot. We can see the current contents of the myName variable.

When we want to resume executing the JavaScript, we can use the program flow buttons:
The buttons let us:

1. Continue (run until there's another breakpoint or error)
2. Step Into (go to the next line of code, which may go into a function if the current line is calling one)
3. Step Over (go to the next line of code, don't go into a function)
4. Step Out (go to the next line of code that is out of the current function)
Was this helpful?

Comments

Leave a Comment

I agree to the Terms of Service
Design © 2015, Downranked, LLC.,
Original user code contributions under MIT License