Firebug: Part 3 - debugging

I hope that you will never need what is written below.
But sooner or later you have to deal with the code in order to understand what is happening there.
This is what the built-in Firebug debugger will help us.

All cycle: Console , Commands , Debugging , Profiling


')
Today, look at the jQuery website.

First we need to select the script that we want to debug.

In the menu, select the custom.js script there.

Let's go to line 212.


And set a breakpoint.


Let us turn to line 201, and set a breakpoint with the condition (to do this, right-click).


You can view all points on the Breakpoints tab.


And now the fun part. Click on the "RUN CODE" button on the site and get to our breakpoint
(if you hover the cursor on an object in the code, you can see its value, which is very convenient).


On the Watch tab, we can view any object in a “frozen” state.


And also add a new object.


And on the Stack tab, we see the stack trace of our function (the function from which our function was called).


We also noticed that now we have four buttons lit:
(from left to right) Run (Continue F8), Step Into (Go inside F11), Step Over (Next line F10), Step Out (Exit function).

Thanks to these buttons, we can walk through the code and see what and where we went wrong.

The article is based on Firebug Javascript and the Michael Sync blog .

* This source code was highlighted with Source Code Highlighter .

PS unfortunately there is no mouse in the screenshots, but I think it is not a problem