Author: God says to have light zxg source: the programming cheats of god light
Debugger is an important tool for front-end development, it can break at the code we care about, and sort out the logic by stepping through it. The quality of debugger use is directly related to the quality of the breakpoint.
Both Chrome Devtools and VSCode provide Debugger, and they support 6 ways to break points.
Add a breakpoint with a single click to the left of the line you want to break, and run to that point to break.
This is the most basic way to breakpoint, and both VSCode and Chrome Devtools support this breakpoint.
Right-click to the left of the line where the code is located, a drop-down box appears where you can add a conditional breakpoint.
Enter a conditional expression that breaks when you run to this line of code and the expression's value is not empty, which is more flexible than a normal breakpoint.
This conditionally brokenpoint VSCode and Chrome Devtools are also supported.
Right-click on the corresponding element in the Elements panel of Chrome Devtools and select break on to add a dom breakpoint, which is broken when there are changes in the subtree, changes in attributes, and removal of nodes. Can be used to debug code that causes dom to change.
When it comes to DOM debugging, only Chrome Devtools supports this breakpoint.
In the Sources panel of Chrome Devtools, you can add XHR url breakpoints, which will break when ajax requests the corresponding url, which can be used to debug the request-related code.
This feature is only available in Chrome Devtools.
In the Sources panel of Chrome Devtools, you can also add Event Listener breakpoints that specify what event breaks when it occurs, which can be used to debug event-related code.
This feature is also only available in Chrome Devtools.
Check Uncaught Exceptions and Caught Exceptions in the Debugger panel of VSCode to add exception breakpoints that break bars when throwing exceptions that are not caught or are caught. Useful for debugging code that has exceptions.
This feature is only available in VSCode.
In addition to the normal breakpoints that you click directly on the corresponding line of code, there are many ways to add breakpoints based on different situations.
There are six types:
Normal breakpoint: Breaks when it runs to that point
Conditional breakpoint: Runs to that point and the expression is true and breaks, more flexible than normal breakpoints
DOM Breakpoints: DOM subtree changes, property changes, node deletions break, can be used to debug code that causes DOM changes
URL breakpoint: Url breaks when it matches a pattern, which can be used to debug request-related code
Event Listener Breakpoint: An event listener is triggered when it breaks and can be used to debug event-related code
Exception Breakpoint: Throwing an exception that is caught or not caught is broken, and can be used to debug the code where the exception occurred
Most of these breakpoint methods are supported by Chrome Devtools (normal, conditional, DOM, URL, Event Listener), and some are supported by VSCode Debugger (normal, conditional, exception).
Code in different situations can use different breakpoints, which makes debugging code much more efficient.
How many of JS's six ways to interrupt points have you used?