Debug JavaScript in Chrome

In the previous two articles we talked about debugging JavaScript in IE and debugging JavaScript in Visual Studio, in this article we'll talk about how to debug JavaScript in Google Chrome.

Chrome is a very good browser provided by Google, built-in developer tools, so that we can easily debug the JS code. With the experience of using IE to debug JavaScript, it's easy to debug with chrome.

Use Chrome to open the page we want to debug, and then use the shortcut key F12 to open the developer tools, and of course you can find it in the Tools menu. Chrome Developer Tools

The Elements tab is the selection of elements on the interface, and the code we want to debug is in the Sources tab.

Open the Sources tab and click on the small arrow on the left to open all the resources and select our page:

We want to debug the code for this page, so just open this page and click on the line number to add a breakpoint:

By clicking the button in the interface, we can capture the breakpoint we just added:

The method to add monitoring is the same as in IE: Select the variable, click on the variable, and select "Add to watch", such as:

Monitoring of variable A has been added to the monitoring window on the right:

After executing this sentence, the value of a will change:

Google Chrome debugging JavaScript shortcut keys:

F10: Step over, that is, skip the method, expression, etc. in the statement

F11: Sentence-by-statement debugging, that is, single-step debugging, will jump into the method, the expression, the statement-by-track debugging

These two function keys operate the same way except for the absence of a F9.

If you want to execute code temporarily in Google Chrome, you need to edit and execute the temporary code in the console that opens the code:

We enter alert (a), then enter, and a prompt will pop up on the interface, such as:

If you want to stop debugging, simply close the developer tool.

Debug JavaScript in Chrome