The Debugger is an important tool for front-end development. It can stop the code we care about and sort out the logic in a single step. The quality of the Debugger is directly related to the quality of the breakpoint.

Chrome Devtools and VSCode both provide Debugger support for six different ways of breaking points.

Normal breakpoints

To add a breakpoint, click to the left of the line you want to break, and run there to break.

This is the most basic breakpoint and is supported by both VSCode and Chrome Devtools.

Conditional breakpoints

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

Enter a conditional expression, which breaks when the line is run and the expression is true, which is more flexible than a normal breakpoint.

This conditional breakpoint is also supported by VSCode and Chrome Devtools.

DOM breakpoint

Right-click on the Elements element in the Chrome Devtools Elements panel and select Break on to add a DOM breakpoint, which breaks when a subtree changes, an attribute changes, or a node is removed. Can be used to debug code that causes dom changes.

Because it involves DOM debugging, only Chrome Devtools supports this breakpoint.

URL breakpoint

In the Sources pane of Chrome Devtools, you can add an XHR URL breakpoint that will break when ajax requests are made to the URL and can be used to debug request-related code.

This feature is available only in Chrome Devtools.

The Event Listener breakpoint

You can also add an Event Listener breakpoint in the Sources pane of Chrome Devtools, specifying that the Event Listener will be broken when an Event occurs, which can be used to debug event-related code.

This feature is also available only in Chrome Devtools.

Exception breakpoints

Check Uncaught Exceptions and Caught Exceptions in VSCode’s Debugger panel to add an exception breakpoint that will break the bar if an exception is thrown and not Caught. Useful for debugging code where exceptions occur.

conclusion

In addition to normal breakpoints, which can be clicked directly on the corresponding line of code, there are many ways to add breakpoints depending on the situation.

There are six:

  • Normal breakpoint: runs at this point to break
  • Conditional breakpoint: runs at this point and the expression is true to break, more flexible than normal breakpoints
  • DOM breakpoints: breaks when a DOM subtree changes, an attribute changes, or a node is deleted
  • URL breakpoint: THE URL breaks while matching a pattern. It can be used to debug request-related code
  • Event Listener Breakpoint: A breakpoint when an Event Listener is triggered. It can be used to debug event-related code
  • Exception breakpoint: Breaks when a thrown exception is caught or not caught, and can be used to debug the code in which the exception occurred

Most of these break point methods are supported by Chrome Devtools (normal, conditional, DOM, URL, Event Listener, exception), but some are supported by VSCode Debugger (normal, conditional, exception).

Code in different situations can be broken in different ways, which makes debugging code much more efficient.

JS six ways to break points, how many have you used?