Debugging skills for chrome developer Tool

[Note: This article is transferred from: http://ued.taobao.com/blog/2012/06/03/debug-with-chrome-dev-tool/]

This Article is based on the current chrome stable version (19.0.20.4.52 m, google is constantly improving the chrome developer tool, so the chrome version may be slightly different. some shortcut keys are also on windows, and the Mac should be similar.

The conventional breakpoint-related breakpoint/conditional-breakpoint/call-stack/watch-expressions will not be involved.

1. beauw.javascript

JavaScript files are usually compressed before they are released. The compressed Javascript is almost unreadable and almost no breakpoint can be set. there is a pretty print button (this symbol {}) under the scripts panel. Clicking it will format the compressed JS file and indent the file. At this time, the readability of the breakpoint is greatly improved.

2. view events bound to the element

On the elements panel, select an element and generate event related to this element according to the type under the event listeners on the right, that is, the events that will pass through this node in the event capture and bubble phase.

You can select selected node only from the drop-down button on the Right of event listeners to only list events on this node.

After the event is expanded, the file in which the event is bound is displayed. clicking the file name will directly jump to the row where the event handler function is bound. if Javascript is compressed, you can run pretty print first and then view the Bound event.

3. Ajax interruption

There is an xhr breakpoints on the right side of the scripts panel, and an xhr breakpoint will be added to the + on the right of the vertex. the breakpoint is interrupted Based on the xhr URL match. If no matching rule is written, this match is only a simple string search. It is interrupted before sending, And the Ajax request initiated in the place where it is viewed in the call stack after being interrupted.

4. Page event interruption

In addition to setting a regular breakpoint, you can also interrupt a specific event (not targeting elements). On the right side of the scripts panel, there is an event listener breakpoints, all supported events are listed here, including not only click and keyup events, but also timer (interrupted when setTimeout setinterval processing function starts execution), onload, scroll and other events.

5. Javascript exception interruption

The button on the left side of pretty print is to enable the interrupt switch when JS throws an exception. There are two modes: interrupt at all exceptions and interrupt at uncaptured exceptions. after the exception is interrupted, you can check why an exception is thrown.

6. Dom Level 3 event interruption

On the elements panel, right-click an element and choose break on subtree modifications and break on attributes modifications. These two correspond to domsubtreemodified in Dom Level 3 event, the domsubtreemodified event will list all event interruptions of level3 at Dom breakpoints on the scripts panel.

7. Search for all JS files

When chrome developer tool is opened, press Ctrl + Shift + F to search for it through the JS hook.CodeLocation is useful. Regular Expressions are supported for searching.

8. Command Line API

• $ (Id_selector) is irrelevant to jquery on the page.
• $ (Css_selector)
• $0, $1, $2, $3, $4
  1. The last five elements selected in the elements panel are $0.
  2. These five variables are first-in-first-out.
• Copy (STR) Copies STR to the clipboard, which is useful when copying a variable at the breakpoint
• Monitorevents (object [, Types])/unmonitorevents (object [, Types])
  1. When a types event occurs on an object, the event object is output on the console.
• For more console APIs, please console. Log (console) or click
• More command line API clicks

9. Modify JS Code in real time to take effect

• the external JS file of the page can be directly modified on the scripts panel, press Ctrl + S to save the changes, and the changes will take effect immediately
• note
  1. JS modifications on HTML pages are not supported by tests
  2. scripts formatted by pretty print cannot be modified.

10. resumable code executed on the console

Enter // @ sourceurl = filename. js in the last line of the Code in the console. A file named filename. js will be included in the scripts panel, and then it will be the same as the external JS file.

 
FunctionHello () {alert ('Say Hi');}//@ Sourceurl = Hello. js
 

Reference

• chrome developer tool doc
• Google I/O 2011: chrome Dev tools reloaded