What are the types of JavaScript breakpoints?

Types of JavaScript breakpoints: 1. Sources breakpoints; 2. Debugger breakpoints; 3. DOM breakpoints, which add breakpoints on DOM elements to achieve debugging purposes; 4. XHR breakpoints ;5. Event listener breakpoint.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

JS Breakpoint Classification

1. JS Breakpoint

(1) Sources Breakpoint

The process of adding Sources breakpoint is "F12 (Ctrl Shift I) to open the development tools" - "Click the Sources menu" - "Find the corresponding file in the tree on the left" - "Click the line number column ”That is, the operation of adding/deleting breakpoints on the current line is completed. After the breakpoint is added, refresh the page and JS execution will stop at the breakpoint position. You will see all the variables and values ​​in the current scope in the Sources interface. You only need to verify each value to complete the verification requirements of our question.

You can also set conditional breakpoints in Sources. Select "Edit Breakpoint..." in the right-click menu of the breakpoint location to set the conditions for triggering the breakpoint, which is to write an expression. When the expression is true Only then trigger the breakpoint.

(2) Debugger breakpoint

Debugger breakpoint is added by adding a "debugger;" statement to the code. When the code is executed to this statement, Will automatically breakpoint

2, DOM breakpoint

DOM breakpoint, as the name implies, is to add a breakpoint on the DOM element to achieve debugging the goal of. In the actual use of break points, the effect is ultimately implemented within JS logic.

How to add DOM breakpoints: Elements-right-click element element-Break on-select breakpoint

(1) subtree modifications subtree modifications breakpoint

Mainly for subtrees Operations such as adding, deleting, and exchanging order of nodes, but attribute modifications and content modifications of child nodes will not trigger breakpoints

(2) attributes modifications node attribute breakpoints

(3)node removal node removal breakpoint

3, XHR breakpoint

XHR Breakpoints

As the name suggests, when an asynchronous request is sent When the URL meets the breakpoint conditions, the breakpoint is triggered

Breakpoint method: sources- XHR/fetch Breakpoints -" "-Edit breakpoint conditions

4. Event Listener breakpoint

#Event listener breakpoint, that is, set the breakpoint based on the event name. When an event is triggered, the breakpoint is set to the location where the event is bound. Event listener breakpoints list all page and script events, including: mouse, keyboard, animation, timer, XHR, etc. (The location is generally under XHR/fetch Breakpoints in sources)

[Related recommendations: javascript learning tutorial]

The above is the detailed content of What are the types of JavaScript breakpoints?. For more information, please follow other related articles on the PHP Chinese website!