Chrome Dev Tools became more and more convenient after Google Chrome brought in Firefox,firebug's project group leader John J. Barton. This article is based on Google I/O's introduction to Chrome Dev tools (HTTP://WWW.YOUTUBE.COM/WATCH?V=N8SS-RUEZPG), and related ppt:http:// Chrome-devtools-io2011.appspot.com/template/index.html to finish. (The referenced chrome version is: 19.0.1084.52)
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.
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.
Script debugging, which is the most useful and powerful tool in chrome Dev tools:
2. DOM Breakpoints
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.
Using Ctrl+shift+f, open the Find window to find support for regular expressions:
Find function Definition: Ctrl + Shift + O
Find file: Ctrl + O
6. Self-built script file
The timeline feature draws the browser's timeline of the DOM's processing to facilitate optimization:
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.
Google Chrome Dev Tools-becoming more efficient Developer