Chrome的開發者工具(Chrome Developer Tools)

Chrome的開發者工具(Chrome Developer Tools)

按F12

https://developer.chrome.com/devtools/index

http://www.w3school.com.cn/html/html_intro.asp

http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html

http://wenku.baidu.com/link?url=fz5kfYH9wlEkqHpkPiP7b8Ws4uVQzQaFQEMzroP7jWj4NYq2vx1FLHUfX9Y28pkfyfsBl_fgMfQdVB2K87w0aeSGvqiuKiPQw-SDl2GYUnS

下面來分別說下每一個Tab的做用

1， Elements標籤頁

這個就是查看、編輯頁面上的元素，包括HTML和CSS：

在元素（Elements）面板中，能夠看到整個頁面的 DOM 樹結構和每一個元素的全部屬性，同時也能夠實時地修改這些元素及其屬性，並能夠實時看到修改後的效果。

左側就是對頁面HTML結構的查看與編輯，你能夠直接在某個元素上雙擊修改元素的屬性，

HTML核心屬性

屬性	值	描述
class	classname	規定元素的類名（classname）
id	id	規定元素的惟一 id
style	style_definition	規定元素的行內樣式（inline   style）
title	text	規定元素的額外信息（可在工具提示中顯示）

 

右側能夠對左側被選元素的樣式CSS文件進行查看與編輯修改：

HTML 與CSS的關係：

l  HTML只有內容，不能定義格式。

l  CSS用來定義 HTML的格式。

能夠寫在HTML中用style的屬性來定義CSS格式

<div class="ofRegFooter" style="float: left; width: 100%; display: block;" id="cid1381627595963">

另外一種就是單獨寫一個.css文件在HTML中引用

<link xmlns="" rel="stylesheet" href="/static/common/css/jquery.ui.core.css" type="text/css">

2，Resources標籤頁

Resources標籤頁能夠查看到請求的資源狀況，包括CSS、JS、圖片等的內容，同時還能夠查看到存儲相關的如Cookies、HTML5的Database和LocalStore等，你能夠對存儲的內容編輯和刪除。

3， Network標籤頁

Network標籤頁對於分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用，特別是在查看Ajax類請求的時候，很是有幫助。注意是在你打開Chrome開發者工具後發起的請求，纔會在這裏顯示的哦。
點擊左側某一個具體去請求URL，能夠看到該請求的詳細HTTP請求狀況：

The Network panel provides insights into resources that are requested and downloaded over the network in real time. Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.

The Network panel records information about each network operation in your application, including detailed timing data, HTTP request and response headers, cookies, WebSocket data, and more. The Network panel helps you answer questions about the network performance of your web application, such as:

• Which resource had the slowest time to first byte?
• Which resources took the longest time to load (duration)?
• Who initiated a particular network request?
• How much time was spent in the various network phases for a particular resource?

l  Use large resource rows: 有些Column會包含兩行值（如Name Path； Status Text； Size Content； Time Latency），選中這個按鈕，兩行值都會顯示，不然只會顯示主要的一行。

l  Initiator：The object or process that initiated the request. It can have one of the following values:

Parser：Chrome's HTML parser initiated the request.

Redirect：A HTTP redirect initiated the request.

Script：A script initiated the request.

Other：Some other process or action initiated the request, such as the user navigating to a page via a link, or by entering a URL in the address bar.

l  Cookies：The number of cookies transferred in the request. 

l  Size and Content：

Size is the combined size of the response headers (usually a few hundred bytes) plus the response body, as delivered by the server.

Content is the size of the resource's decoded content.If the resource was loaded from the browser's cache rather than over the network, this field will contain the text (from cache).

l  Time and Latency：

Time is total duration, from the start of the request to the receipt of the final byte in the response.

Latency is the time to load the first byte in the response.

l  Preserve log upon navigation button ：new records are appended to the bottom of the table. Otherwise，the current network record log is discarded when you navigate to another page, or reload the current page. 

l  The Timeline shows the time it took to load each resource, from the start of the HTTP request to the receipt of the final byte of the response.

Each resource loading time is represented as a bar, color-coded according to the resource type. The length of the lighter-shaded part of each bar represents the request's latency, while the length of the darker-shaded part represents the time spent receiving the response data.

It is unique from the others in that, when clicked, it displays a menu of additional sort fields.

 Timeline — Sorts by the start time of each network request. This is the default sort, and is the same as sorting by the Start Time option).按照request的開始時間排序。

Start Time — Sorts by the start time of each network request.

Response Time — Sorts by each request's response time.

End Time — Sorts by the time when each request completed.

Duration — Sorts by the total time of each request.

Latency — Sorts by the time between the start of the request and the beginning of the response (also known as the "time to first byte").

l  Network resource details

HTTP request and response headers；

Resource preview；

HTTP response；

Cookie names and values；

WebSocket messages；

Resource network timing

l  Resource network timing

The Timing tab graphs the time spent on the various network phases involved loading the resource.

 

 

Property	Description
Proxy	Time spent negotiating with a proxy   server connection.
DNS Lookup	Time spent performing the DNS   lookup. You want to minimize DNS look ups.
Blocking	Time the request spent waiting for   an already established connection to become available for re-use.
Connecting	Time it took to establish a   connection, including TCP handshakes/retries, DNS lookup, and time connecting   to a proxy or negotiating a secure-socket layer (SSL).
Sending	Time spent sending the request.
Waiting	Time spent waiting for the initial   response.
Receiving	Time spent receiving the response   data.

Script標籤頁

很明顯，這個標籤頁就是查看JS文件、調試JS代碼的

Timeline標籤頁

注意這個Timeline的標籤頁不是指網絡請求的時間響應狀況哦（這個在Network標籤頁裏查看），這個Timeline指的JS執行時間、頁面元素渲染時間

 時間線（timeline）告訴咱們告訴您載入頁面的時間究竟花在哪些地方。從加載資源到解析 JavaScript 腳本、計算樣式表及頁面渲染的全部步驟，您均可以在這裏看到它們消耗的時間和內存，可是並無告訴咱們代碼運行的時候發生了什麼。profiler會告訴咱們哪些函數執行時佔用了大部分時間。

時間線標籤爲Chrome所記錄下來的內容提供三種類型的視圖: 事件、幀和內存

事件/幀視圖顯示的是花在HTML解析（藍色部分）、JavaScript渲染(黃色部分)、樣式計算(紫色)以及CSS渲染(綠色)等方面的時間。

內存視圖是用來尋找內存泄漏的跡象的。

Profiles標籤頁

這個主要是作性能優化的，包括查看CPU執行時間與內存佔用：

profiler會根據花費的時間對JavaScript中的函數進行排序，咱們由此能夠找出耗時的函數。另外，咱們能夠經過點擊函數名旁邊的三角形箭頭來查看完整的函數調用棧。

The Profiles panel lets you profile the execution time and memory usage of a web app or page. The Profiles panel includes a few profilers: a CPU profiler, a JavaScript profiler and a Heap profiler. These help you to understand where resources are being spent, and so help you to optimize your code:

• The CPU profiler shows where execution time is spent in your page's JavaScript functions.
• The Heap profiler shows memory distribution by your page's JavaScript objects and related DOM nodes.
• The JavaScript profile shows where execution time is spent in your scripts

Audits標籤頁

這個對於優化前端頁面、加速網頁加載速度頗有用哦（至關與Yslow）：

Console標籤頁

就是Javascript控制檯了：

這個除了查看錯誤信息、打印調試信息（console.log()）、寫一些測試腳本之外，還能夠看成Javascript API查看用。例如我想查看console都有哪些方法和屬性，我能夠直接在Console中輸入"console"並執行：