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

This article is to share with you about the debugging skills of JS breakpoints in Chrome. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

JS debugging skills

One: format the compressed code

Tip 2: jump to the location of a breakpoint quickly

The Breakpoints on the right will summarize all the breakpoints you have hit in the JS file. Clicking on the same line as checkbox will temporarily cancel this breakpoint. If you click on the next line of checkbox, you will jump to the location of the breakpoint directly.

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

The scope on the right can see quite a lot of useful information, such as the direction of this, whether it has a value, whether the breakpoint is an object or something else.

Tip 4: listen for event breakpoints

The Event Listener Breakpoints on the right can selectively listen for certain behavior events, such as keyboard input, drag and drop, etc. Check the previous checkbox to take effect. When you trigger a behavior change, you will jump to the triggered JS.

Skills 5:DOM and XHR Monitoring Jump

DOM Breakpoints: it's your Elements page. You may have some behavior if you want to monitor a section of dom, but you can use it without knowing the exact location.

XHR Breakpoints: the core point of ajax that is requested from the server

All XHR behaviors are checked by default, but the option is to judge URL. I don't use much.

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

This thing is essential in debugging. In fact, friends who have used firebug will have a clear understanding of this. Basically the same; the above picture first

Functional nouns in turn, those who do not understand can see my firebug series

Pause script excution [step, pause at breakpoint, wait for debugging-not literal translation]: after pausing, this button will become Resume script excution [continue], shortcut key [F8 or Ctrl +\]

Step over next function call [step skip]: will skip to the next breakpoint, shortcut key [F10 or Ctrl + `]

Step into next function call [step into]: will enter the internal debugging of the function, shortcut key [F11 or Ctrl +;]

Step out of current function [step out]: function that will jump out of the current breakpoint, shortcut key [Shift + F11 or Ctrl + Shift +;]

Then there are the features of chrome.

Deactivate breakpoints: disable all breakpoints temporarily, shortcut key [Ctrl + F8]

Don't Pause on exceptions: do not pause at the expression, there is an option [Pause On Caught Exceptions- needs to pause there if it throws an exception]

Thank you for reading! This is the end of this article on "what are the debugging skills of JS breakpoints in Chrome?" I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.