JS Debugging Tips

Recently use JS to do some development work, to organize the recent contact with the foreground debugging skills.

1. Find the Calling method

In the browser's developer tools (most browsers can use the F12 shortcut), the Console tab uses the following code to get the function method name and related information that the control triggers.

$ ("#button") true );

The above is actually jquery gets the element bound event method, it can be encapsulated to facilitate later use, the code is as follows:

// jquery Gets an element bound event function findevents (elem) {    returntrue  );} var // Get bound event Event.click[0].handler// Get bound event name

Is the example of my own test, which shows that I am binding an anonymous function in this control, click on it to jump to the file you write this code, it is convenient to read other people's code or debugging Ajax jump code

JS in the function is also an object, to this object using the ToString () method can see the source code of the function, this is a small trick, as follows:

2.js method Debugging

For their own write JS, if more complex, we always want to be able to dynamically see the execution of each step, this time you can use the breakpoint debugging function.

First of all, in the need to debug the JS method suitable location to join debugger;

Then, run JS and open the browser's developer mode;

At this time if you run to a place where the debugger, the code will stop, and then use debugging shortcut keys for debugging, I use Firefox browser debugging, debugging button location as follows, different browser view location may be different, but generally should be similar, here is not much to say.

Pause here (F8), Cross (10), Step (F11) and step Out (SHIFT+F11) and other buttons can be adjusted accordingly. Alternatively, you can add breakpoints to the line number on the left side of the code, which is a handy way to do this.

JS Debugging Tips