Chrome Console JS debugging and Breakpoint debugging

This article is based on the current Chrome stable version (19.0.1084.52 m), because Google is also constantly refining the chrome developer tool, so the chrome version may differ slightly. Some of the shortcut keys are also on Windows, and the Mac should be similar.

Regular breakpoints related to breakpoint/conditional-breakpoint/call-stack/watch-expressions etc. are not involved.

1. Beautify Javascript

JS files are generally compressed before they go online, and the compressed JavaScript is almost unreadable and almost impossible to set breakpoints. Under the Scripts panel there is a pretty print button (this symbol {}), click on the compressed JS file format to indent the regular file, this time in the set breakpoint readability is greatly improved.

2. See which events the element is bound to

In the Elements panel, select an element, and then on the right side of event Listeners, the event related to this element is typed, that is, the event of this node that passes through the event capture and bubbling phase.

In the event Listeners right drop-down button you can select Selected node only to list events on this node

When the event is expanded, it shows which file the event is bound to, and clicking on the file name jumps directly to the line where the binding event handler is located, and if JS is compressed, you can pretty print before viewing the bound event.

3. Interrupts when Ajax

On the right side of the Scripts panel, there is a XHR breakpoints, the point to the right of the + will add a XHR breakpoint, breakpoint is based on the XHR URL match interrupt, if not write matching rules will be in all Ajax, this match is simply a string lookup, before sending interrupt, after the interruption in C Ajax requests initiated by that place when viewed in the all Stack

4. Page event Interruption

In addition to setting a regular breakpoint, you can also break when a particular event occurs (not for the element), on the right side of the Scripts panel, there is an event Listener breakpoints, which lists all the events supported, not only click,keyup events, but also support Timer (interrupted when SetTimeout setinterval processing function starts execution), Onload,scroll, and so on.

5. Interrupt when Javascript is abnormal

The button on the left side of the pretty print is the switch that interrupts when the JS throw exception is turned on, and there are two modes: Break at all exceptions and break at uncaught anomalies. After the exception is interrupted, you can see why the exception was thrown.

6. DOM Level 3 Event Interrupt

In the Elements panel, select an element right-click, there are two options: Break on subtree modifications,break on attributes modifications, these two corresponding DOM level 3 Event in the Do Msubtreemodified, domsubtreemodified event in Scripts panel DOM breakpoints Lists all LEVEL3 event interrupts

7. Find in all JS files

In the case of Chrome Developer tool Open, press CTRL + SHIFT + F to find the code location via JS hooks useful for finding support for regular expressions

8. Command Line API

• $ (Id_selector) This has nothing to do with whether the page has JQuery
• $$ (Css_selector)
• $0,$1,$2,$3,$4
  1. The 5 most recently selected elements in the Elements panel, and the last one selected is
  2. This 5 variable is a first-in-one
• Copy (str) copies str to clipboard, which is useful when copying variables at breakpoints
• Monitorevents (Object[,types])/unmonitorevents (Object[,types])
  1. Outputs the event object in the console when the types event occurs on object
• For more console API please console.log (console) or click
• More Command line API click

• 9. Real-time modification of JS code to take effect

  • The external JS file of the page can be modified directly in the Scripts panel, and the CTRL + S save will be effective immediately after the change.
  • Attention
    1. Test does not support the HTML page JS modification
    2. Scripts formatted with pretty print do not support modification

  Code that executes in console can break

  Enter the last line of code in the console plus//@ sourceurl=filename.js, there is a file called Filename.js in the Scripts panel, and then he is the same as the external JS file

Chrome Console JS debugging and Breakpoint debugging