How the Chrome console debug JavaScript

The above article has outlined the specific aspects of the console object as well as the basic application, here is a brief description of how to use the Chrome console this artifact to properly debug the JavaScript code (this is what we can really use to implement the place)

1, first say the source positioning

Everyone open the test page to see the bottom right side of the page there is a recommended icon? Right-click the recommended icon, select the review element, open the Google console, as shown in the following image

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

Directly click on the icon red link, the console will be positioned into the sources panel, showing the following image

We have seen the above picture after the estimated head is dizzy, so many JS all in one line, let people how to see ah, do not worry, according to the following figure operation can be (that is, click on the middle panel left pretty print on the line)

When we go back to the console panel, we will be surprised to find that 1 of the original link is now 91 (in fact, the number 1 or 91 is the Votepost method in the source code of the line number) now see the power of the pretty Print button.

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

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

Let's start by introducing the debugging shortcuts we use (in fact, we can do without the shortcuts shown in the table below). Directly click on the right side of the upper column of the top row of the button to debug, specifically with which button, put the mouse over the button for a while will show its corresponding prompts.

shortcut Keys	function
F8	Resume Running
F10	Step over, encountered a custom function is also executed as a statement, but not into the function inside
F11	Step into, run into a custom function and go inside the function
Shift + F11	Step out and jump out of the current custom function

One of the things worth mentioning is that when we click on the "Recommended" button to debug will be found, whether we are in accordance with the F10 for debugging or by F11 for step-by-step debugging, can not carry out the $.ajax function inside, even if we set a breakpoint inside the function can not enter, here by the F8 is really the effect, Don't believe you try.

When we debug, the right scope variables displays the current scope and his parent scope, as well as the closure. Not only can you see the current variable on the right side of the scope Variables (variable scope), but you can also move the mouse directly over any variable to see the value of the variable.

Talk with a picture (haha)

We just introduced in the HTML can see it is bound to the OnClick event, so we find it bound JS function, if it is in the jquery page load complete function inside binding, at this time how do we know it is bound to which JS function, If we don't know the bound JS function, let alone debug it.

Here's how to view it, or just the test page as an example, but this time we'll look at the "submit comment" for instructions.

Right-click the "submit Comment"--> audit element, and we can see clearly that no events are bound on this button. Enter the following code in the console panel

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

As shown in the following illustration:

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

Finally, introduce an artifact, very useful debugger

If you write the code, you execute the time want it to stop in a certain place, as long as the written on the debugger is good, do not believe you try! Ha ha