How to debug js? How to debug js using breakpoints

The content of this article is about how to debug js? The method of debugging JS using breakpoints has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When we develop projects, unknown bugs often appear. Sometimes it is difficult for us to find these bugs, so we need to use breakpoint debugging to let the program stop somewhere and check whether the program has any problems one by one. Where there are errors, we perform breakpoint debugging under the Chrome browser. First open the project with Google Chrome.

Press F12 to open the Google debugging interface, and then select Sources. The JS code of the project will be displayed here. Select the js file we need to debug.

First we add breakpoints manually:

Add a breakpoint:

Introduce the meaning of the following buttons:

First within the red area From left to right:

Pause/Resume script execution: Pause/resume script execution (program execution stops at the next breakpoint).

Step over next function call: Execute the function call to the next step (jump to the next line).

Step into next function call: Enter the current function.

Step out of current function: Jump out of the current execution function.

Deactive/Active all breakpoints: Close/enable all breakpoints (will not cancel).

Pause on exceptions: Automatic breakpoint setting for exceptions.

Green area:

scope: displays the scope of the current breakpoint

watch: click on the symbol to add the variables or expressions you need to monitor

Call Stack Displays the environment call stack of the current breakpoint

Breakpoints The current js breakpoint list. Each breakpoint added will appear here. Clicking on the breakpoint in the list will locate the breakpoint in the content area.

DOM Breakpoints Current DOM breakpoint list list

XHR Breakpoints Current xhr breakpoint list, you can click on the right to add a breakpoint

Event Listener Breakpoints Event listener breakpoint settings At

Event Listeners current event listening breakpoint list

Start debugging:

Debugging interface:

In the debugging interface, we put the mouse on each variable of the code, and it will display the specific information of this variable, so that you can gradually troubleshoot the BUG

I have another one The way to add a breakpoint is to add a degugger where you want it to stop in the code. The code execution will stop here

Related recommendations:

Chrome JS implements breakpoint debugging

js debugging Series breakpoints and dynamic debugging [Basics]_javascript skills

js debugging Google developer tools

The above is the detailed content of How to debug js? How to debug js using breakpoints. For more information, please follow other related articles on the PHP Chinese website!