Chrome Dev Tools: Becoming a more productive developer

Original source http://blog.jobbole.com/22065/

Real Time CSS style editing

Select a DOM to edit and manipulate the DOM, modify the CSS Style in real time, and CSSStyle can save the change history version.

To save the change history version:

It also supports the ability to freely modify the body of the CSS file that is loaded into chrome.

Network interaction

When a page is loaded, all requests made can be monitored in "Network", with "all", "Documents", "stylesheets", "Images", "Scripts", "XHR" (Xmlhttprequst), WebSockets, other, these classifications, can clearly classify network requests, and you can see the details of each request.

Control Desk

In the console you can easily use commands to view the DOM, execute JavaScript, and so on, console Api:http://getfirebug.com/wiki/index.php/command_line_api copy (), Dir (), inspect (), $ A,

Script debugging

Script debugging, which is the most useful and powerful tool in chrome Dev tools:

1. JavaScript breakpoints, break on exception, JavaScript pretty Print.

Break Points: Breakpoint in Need to set the place to click on exception: When this function is turned on, when a script exception appears, automatically will be in the exception place, convenient error. JavaScript pretty print: When JavaScript is compressed, it is very difficult to read, and pretty Print allows JavaScript to re-line and rearrange the syntax and keywords so that the compressed JavaScript can still be read.

2. DOM Breakpoints

DOM element breakpoints, often with multiple javascript operations of the same DOM element, if you want to be in JavaScript up and down breakpoints, the next few places, not broken to the desired place, the DOM element up and down the breakpoint is more convenient:

Break on subtree modifications, breaks on attributes modifications, broke on node removal, can be conveniently broken into JavaScript that operates the DOM.

3. XHR breakpoints, Event listener breakpoints:

XHR breakpoints, can be conveniently broken to xmlhttprequest AJAX requests. Event Listener breakpoints, can be conveniently broken to various events.

4. Find JavaScript

Using Ctrl+shift+f, open the Find window to find support for regular expressions:

Find function Definition: Ctrl + Shift + O

Find file: Ctrl + O

5. Modify JavaScript code in real time

Page outside the chain JavaScript file can be directly modified in the Script panel, after the change of CTRL + S Save, will take effect immediately, but does not support the Html page JavaScript modification, after pretty print format JavaScript is not supported Real-time modifications.

6. Self-built script file

When you enter the last line of code in the console (console) plus//@ sourceurl=filename.js, a new outer-chain script file is added to the script panel: Filename.js, This new file, like any other out-of-the-chain JavaScript file, can be modified in real time.

Timeline

The timeline feature draws the browser's timeline of the DOM's processing to facilitate optimization:

Remote debugging

Remote debugging makes Chrome a webserver, executes command –remote-debugging-port=1337, and opens a chrome access localhost:1337, You can use a chrome as host, a chrome when the client, debugging some mobile web is very useful.

Chrome Dev Tools: Becoming a more productive developer