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

This article mainly introduces the ways of breaking points of JavaScript, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Debugger is a very important tool for front-end development. It can stop at the code we care about and sort out the logic by stepping into it. The use of Debugger is directly related to the quality of the breakpoint.

Both Chrome Devtools and VSCode provide Debugger, which supports six ways to break points.

Ordinary breakpoint

You can add a breakpoint by clicking on the left side of the line where you want to stop, and running there will stop.

This is the most basic breakpoint approach, which is supported by both VSCode and Chrome Devtools. [related recommendation: javascript Learning tutorial]

Conditional breakpoint

Right-click on the left side of the line where the code is located, and a drop-down box appears to add a conditional breakpoint.

Enter a conditional expression that breaks when you run to this line of code and the value of the expression is true, which is more flexible than a normal breakpoint.

Breakpoints such as VSCode and Chrome Devtools that are cut off according to conditions are also supported.

DOM breakpoint

Right-click on the corresponding element of the Elements panel of Chrome Devtools and select break on to add a dom breakpoint, that is, it will stop when the subtree changes, the attribute changes, and the node is removed. Can be used to debug code that causes dom changes.

Because debugging of DOM is involved, only Chrome Devtools supports such breakpoints.

URL breakpoint

In the Sources panel of Chrome Devtools, you can add the url breakpoint of XHR, which will stop when the ajax request corresponds to url, and can be used to debug the code related to the request.

This function is available only to Chrome Devtools.

Event Listener breakpoint

In the Sources panel of Chrome Devtools, you can also add breakpoints for Event Listener to specify when events break, which can be used to debug event-related code.

This function is also available only to Chrome Devtools.

Abnormal breakpoint

Check Uncaught Exceptions and Caught Exceptions in the Debugger panel of VSCode to add exception breakpoints and break columns when an exception is not caught or caught. It is useful to debug code that has an exception.

Summary

Debugger breakpoints are not only common breakpoints that are clicked directly on the corresponding lines of code, but there are many ways to add breakpoints depending on the situation.

There are six types:

Ordinary breakpoint: stop when you run there

Conditional breakpoint: when you run there and the expression is true, it is more flexible than ordinary breakpoint.

DOM breakpoints: DOM subtree changes, attribute changes, node deletion breaks, can be used to debug code that causes DOM changes.

URL breakpoint: URL breaks when it matches a pattern, and can be used to debug request-related code

Event Listener breakpoint: breaks when an event listener is triggered, and can be used to debug event-related code

Exception breakpoint: when an exception is caught or not caught, it can be used to debug the code that caused the exception.

Most of these breakpoints are supported by Chrome Devtools (normal, conditional, DOM, URL, Event Listener, exception), and some are supported by VSCode Debugger (normal, conditional, exception).

Thank you for reading this article carefully. I hope the article "what are the breakpoints of JavaScript" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.