Shulou(Shulou.com)06/02 Report--

Editor to share with you what types of breakpoints JavaScript have, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Types of JavaScript breakpoints: 1, Sources breakpoints; 2, Debugger breakpoints; 3, DOM breakpoints, that is, adding breakpoints on DOM elements to achieve the purpose of debugging; 4, XHR breakpoints; 5, event listener breakpoints.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

JS breakpoint classification

1. JS breakpoint

(1) Sources breakpoint

The process of adding Sources breakpoints is "F12 (Ctrl + Shift + I) opens the development tool"-"Click the Sources menu"-"find the corresponding file in the left tree"-- "Click the line number column" to complete the operation of adding / removing breakpoints on the current line. When the breakpoint is added, the refresh page JS executes to stop at the breakpoint, and all the variables and values in the current scope can be seen in the Sources interface. We only need to verify each value to complete our verification requirements.

You can also set conditional breakpoints in Sources, and select "Edit Breakpoint..." from the right-click menu where the breakpoint is located. You can set the condition for triggering a breakpoint by writing an expression that triggers the breakpoint only when the expression is true.

(2) Debugger breakpoint

The Debugger breakpoint is added by adding a "debugger;" statement to the code, which will automatically break when the code executes the statement.

2. DOM breakpoint

DOM breakpoints, as the name implies, is to add breakpoints to DOM elements for debugging purposes. However, in the actual use of breakpoints, the effect eventually falls into the JS logic.

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

(1) breakpoint of subtree modifications child node change

It mainly aims at the operations of adding, deleting and swapping order of child nodes, but the attribute modification and content modification of child nodes will not trigger breakpoints.

(2) attributes modifications node attribute breakpoint

(3) node removal node removes breakpoints

3. XHR breakpoint

XHR Breakpoints

As the name implies, the breakpoint triggered when the url sent by the asynchronous request satisfies the breakpoint condition

Breakpoint mode: sources- XHR/fetch Breakpoints-"+"-Edit breakpoint condition

4. Event listener breakpoint

The breakpoint of the event listener, which is set according to the event name. When the event is triggered, the breakpoint goes to the location where the event is bound. Event listener breakpoint, listing all page and script events, including: mouse, keyboard, animation, timer, XHR, and so on. (the location is generally below the XHR/fetch Breakpoints of sources)

The above is all the content of the article "what are the breakpoint types of JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.