Google Chrome Dev Tools Analysis & ndash; becomes a more efficient Developer

Source: Internet
Author: User

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 "/>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.