How Chrome consoles Debug JavaScript

The above article has outlined the main aspects of the console object and basic applications, the following is a brief introduction to how to use the chrome console this artifact good debugging JavaScript code (This is what we really can be used to implement the place)

1, first talk about the source location

Do you see a recommended icon on the bottom right of the page when you open the test page? Right-click the recommended icon, select the review element, open the Google console as shown in

Now we want to know where the Votepost method is. Follow me, type votepost in the console panel and enter.

Directly click on the red link, the console will be located in the sources panel, as shown in

Everyone looked at the above image after the estimated head will be dizzy, so many JS are the whole line, let people how to look ah, do not worry, according to the operation can (that is, click on the bottom left of the middle panel pretty print on the line)

Then we go back to the console panel will be surprised to find that the original link after the 1 is now 91 (in fact, the number 1 or 91 is representative of the Votepost method in the source line number) now see the Pretty Print button of the strong point

Know how to check the source of a button, then the next job is debugging, debugging the first step to do is to set breakpoints, in fact, set a breakpoint is very simple, click on the 92 can be shown, then you will find a 92 line number next to an icon, here to explain why not set breakpoints in 91, You can try it, in fact there is no way to set a breakpoint at 91, because it is the definition of the function, so it is not possible to set breakpoints here.

Once you've set the breakpoint, you'll see the breakpoints you just set in the Breakpoints box on the right.

Let us first introduce the use of the debugging Shortcut Bar (in fact, we can not use the following table shown in the shortcut keys, directly click on the top row of the upper right column button to debug, specifically with which button, put the mouse over the button will show it the corresponding prompt)

shortcut Keys	function
F8	Resume Running
F10	Step over, encountered custom function also as a statement execution, but not into the function inside
F11	Stepping in, encountering a custom function that goes inside the function
Shift + F11	Step out, jump out of the current custom function

It is worth mentioning that when we click on the "Recommended" button to debug, we will find that no matter we are pressing the F10 to debug or press F11 to step-up debugging, can not be $.ajax function inside, even if we set a breakpoint inside the function has no way to enter, here according to F8 is the real effect, Don't believe you try.

When we are debugging, the right-side scope variables shows the current scope and his parent scope, as well as the closure. You can see the current variable not only on the right side of the scope Variables (variable scope), but also move the mouse directly to any variable to see the value of the variable.

Speak with a picture (haha)

We just introduced in the HTML can see it bound the OnClick event, so we find it bound JS function, if it is bound in the jquery page load completion function, then how do we know it is bound by which JS function, If we don't know the bound JS function, let alone debug it.

Here's a look at how to view it, or just the test page for example, but this time we look at "Submit a review" to explain it,

Right-click on "Submit Comment"--audit element, we can clearly see that this button is not bound to any events. Enter the following code inside the console panel

function lookevents (elem) {    return $.data? $.data (Elem, "events", Undefined, true): $._data (Elem, "events" 
    
     );} var event = lookevents ($ ("#btn_comment_submit") [0]); Gets the bound event 
    

As shown in the following:

According to the method described above to locate the specific blog-common.js inside, find postcomment and then a layer to find the specific code, and then set the breakpoint is good.

Finally introduce a artifact, very useful debugger

If you write your own code, you want to make it stop at a certain place, just write the debugger on it, don't believe you try! Ha ha

How Chrome consoles Debug JavaScript