Chrome+JS implements breakpoint debugging

This time I will bring you Chrome JS to implement breakpoint debugging. What are the precautions for Chrome JS to implement breakpoint debugging? The following is a practical case, let’s take a look.

Tip 2: Quickly jump to a breakpoint location

Breakpoints on the right will summarize all the breakpoints you have hit in the JS file. Clicking on the same line as the checkbox will temporarily cancel the breakpoint. Clicking on the next line of the checkbox will jump directly to the breakpoint. s position

Tip 3: View the internal scope of the breakpoint [very practical]

You can see a lot of practical information on the scope on the right, such as where this points, whether it has a value, whether the breakpoint is an object or something else, etc.

Tip 4: Listen for event breakpoints

The Event Listener Breakpoints on the right can selectively monitor certain types of behavioral events, such as keyboard input, dragging, etc. . Check the previous checkbox to take effect. When you trigger the change behavior, you will jump to the triggered JS

Tip 5: DOM and XHR monitoring jump

DOM Breakpoints: It’s your Elements page. I feel that there may be some behavior in a certain section of DOM that I want to monitor, but I don’t know the exact location. You can use it.

XHR Breakpoints: The core points of ajax requested from the server

All XHR behaviors are checked by default, and the optional option is to determine the URL. . . I don’t use it much

Tip 6: Single-step execution, single-step entry, forced entry, single-step exit

This stuff is essential for debugging. In fact, friends who have used firebug will have a clear understanding of this. Basically the same;

The function nouns are in order. If you don’t understand, you can take a look at my firebug series

• Pause script excution [Single-step execution, pause at breakpoint, wait for debugging - not a literal translation]: After pausing, this button will become Resume script excution [Continue execution], shortcut key [F8 or Ctrl]

• Step over next function call【Single step skip】: Will jump to the next breakpoint, shortcut key [F10 or Ctrl `]

• Step into next function call【Single step Enter]: Will enter the internal debugging of the function, shortcut key [F11 or Ctrl;]

• Step out of current function [Single-step out]: Will jump out of the function of the current breakpoint, shortcut Key [Shift F11 or Ctrl Shift ;]

The following are the special features of chrome

• Deactivate breakpoints: Temporarily invalidate all breakpoints, shortcut key [Ctrl F8]

• Don't Pause on exceptions: Do not pause at the expression, there is an option [Pause On Caught Exceptions – If an exception is thrown, you need to pause there]

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

vue.js mobile terminal implements pull-up loading and pull-down refresh

Detailed installation steps of JSONBuddy

The above is the detailed content of Chrome+JS implements breakpoint debugging. For more information, please follow other related articles on the PHP Chinese website!