Google Chrome is attracting FireFox. After John J. Barton, the FireBug Project Team Leader, Chrome Dev Tools has become more and more easy to use. This article based on Google I/O introduction to Chrome Dev Tools (http://www.youtube.com/watch? V = N8SS-rUEZPg), and the relevant PPT: http://chrome-devtools-io2011.appspot.com/template/index.html. (Refer to Chrome version: 19.0.20.4.52)
Real-timeCSS Style editing
Select a Dom to edit and operate the Dom, modify the Css Style in real time, and save the change history.
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image002 "border =" 0 "alt =" clip_image002 "src =" http://www.bkjia.com/uploads/allimg/131228/131054L08-0.jpg "width =" 558 "height =" 268 "/>
Save the previous version of the change:
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image004 "border =" 0 "alt =" clip_image004 "src =" http://www.bkjia.com/uploads/allimg/131228/131054KE-1.jpg "width =" 558 "height =" 268 "/>
You can also modify the Css file body loaded by Chrome.
Network Interaction
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image006 "border =" 0 "alt =" clip_image006 "src =" http://www.bkjia.com/uploads/allimg/131228/13105451B-2.jpg "width =" 557 "height =" 300 "/>
When a page is loaded, All requests can be listened to in "Network", and "All", "Events", "Stylesheets", "Images ", "Scripts", "XHR" (XMLHttpRequst), WebSockets, and Other are classified to clearly classify network requests and view the details of each request.
Console
In the Console you can easily use the command to view Dom, execute JavaScript, and so on, Console API: http://getfirebug.com/wiki/index.php/Command_Line_API copy (), dir (), inspect (), $0,
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image008 "border =" 0 "alt =" clip_image008 "src =" http://www.bkjia.com/uploads/allimg/131228/1310541021-3.jpg "width =" 557 "height =" 301 "/>
Script Debugging
Script Debugging is the most practical and powerful tool in Chrome Dev Tools:
1. JavaScript Breakpoints, Break on exception, JavaScript Pretty Print.
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image010 "border =" 0 "alt =" clip_image010 "src =" http://www.bkjia.com/uploads/allimg/131228/1310545X8-4.jpg "width =" 558 "height =" 310 "/>
Break Points: Click the breakpoint where you need to set it. Break on exception: When this function is enabled, when a Script Exception occurs, it is automatically disconnected from the exception to facilitate errors. JavaScript Pretty Print: it is very difficult to read when JavaScript is compressed. Pretty Print re-wraps and rearranges JavaScript Based on syntax and keywords, so that the compressed JavaScript can still be read.
2. DOM Breakpoints
Dom element breakpoint. There are often multiple JavaScript operations on the same Dom element. If you want to enable or disable a breakpoint in JavaScript, it may take several places, it is much easier to break a breakpoint on a Dom element:
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image012 "border =" 0 "alt =" clip_image012 "src =" http://www.bkjia.com/uploads/allimg/131228/13105455A-5.jpg "width =" 557 "height =" 344 "/>
Break on subtree modifications, Break on attributes modifications, and Break on node removal can be easily disconnected from Dom JavaScript.
3. XHR Breakpoints, Event listener breakpoints:
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image014 "border =" 0 "alt =" clip_image014 "src =" http://www.bkjia.com/uploads/allimg/131228/13105464A-6.jpg "width =" 557 "height =" 332 "/>
XHR Breakpoints allows you to easily disconnect an XMLHttpRequest Ajax request. Event Listener Breakpoints allows you to easily disconnect various events.
4. Search for JavaScript
Use Ctrl + Shift + F to open the search window. Regular Expressions are supported:
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image016 "border =" 0 "alt =" clip_image016 "src =" http://img1.51cto.com/attachment/201206/15/2369428_1339749750gjyJ.jpg "width =" 557 "height =" 332 "/>
Search function definition: Ctrl + Shift + o
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image018 "border =" 0 "alt =" clip_image018 "src =" http://www.bkjia.com/uploads/allimg/131228/13105422E-8.jpg "width =" 557 "height =" 332 "/>
Search for files: Ctrl + o
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image020 "border =" 0 "alt =" clip_image020 "src =" http://www.bkjia.com/uploads/allimg/131228/1310544K9-9.jpg "width =" 557 "height =" 332 "/>
5. Modify JavaScript code in real time
The JavaScript file on the external link of the page can be directly modified in the Script Panel. After the modification, Ctrl + s is saved and the modification takes effect immediately. However, JavaScript Modification on the Html page is not supported, javaScript formatted with Pretty print does not support real-time modification.
6. self-built Script files
Enter the last line of the Code in the Console and add // @ sourceURL = filename. js, a new external link Script file: filename. will be added to the Script Panel. this new file is the same as other external JavaScript files and can be modified in real time.
Timeline
The Timeline function draws the Timeline for the browser to process the Dom for convenient optimization:
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image022 "border =" 0 "alt =" clip_image022 "src =" http://www.bkjia.com/uploads/allimg/131228/1310545615-10.jpg "width =" 557 "height =" 332 "/>
Remote Debugging
Remote Debugging makes Chrome a WebServer. Execute the command -- remote-debugging-port = 1337, and enable Chrome to access localhost: 1337. Then, you can use Chrome as the Host, A Chrome Client is very useful when debugging mobile Web.
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" clip_image024 "border =" 0 "alt =" clip_image024 "src =" http://www.bkjia.com/uploads/allimg/131228/1310544416-11.jpg "width =" 558 "height =" 410 "/>