Introduction to Chrome Developer Tools——閱讀筆記

最近對Chrome開發者工具十分關注，所以學習了很多相關文章。這裏是HTML5ROCKS上的文章Introduction to Chrome Developer Tools的閱讀筆記。注：下面的內容不是一對一地翻譯，而是摘錄和我的學習體會的結合。

1. 簡介

（1）Chrome開發者工具雖然名爲「Chrome」，但其實它不只用於Chrome，也能夠用於Safari。這個開發者工具是開源項目Webkit的一部分。

（2）Chrome開發者工具（做者這裏以Chrome 5爲例）目前包括8類功能，分別是：

1. 元素（Elements）：該工具幫助咱們查看原始的HTML、CSS和DOM，而且能夠實時修改它們。
2. 資源（Resources）：該工具可讓咱們瞭解網頁從服務器請求了哪些組件，由此花費的時間和佔用的帶寬，並且能夠查看每條資源的HTTP request和HTTP response的頭部。若是咱們但願加快頁面加載的速度，咱們能夠經過分析這一工具中提供的信息來考慮解決方案。
3. 腳本（Scripts）：該工具中咱們能夠看到網頁所調用的js文件的列表，還爲咱們提供了多功能的js調試器。
4. 時間軸（Timeline）：該工具可讓咱們對加載時間和速度有更進一步的分析，咱們能夠詳細深刻了解瀏覽器花費多少時間來處理DOM事件、渲染頁面佈局以及繪製窗口。
5. 概述（Profiles）：該工具幫助咱們捕捉和分析js腳本的性能，而且找出從何處進行優化。
6. 存儲（Storage）：該工具能夠追蹤、查詢和調試本地瀏覽器存儲的內容。
7. 審計（Audits）：該工具能夠分析頁面加載狀況，並提供優化建議。
8. 控制檯（Console）：該工具提供了完備功能的控制檯，開發者能夠輸入任意js代碼，也能夠編程與頁面交互。

注：在Chrome 23中的開發者工具裏，「存儲」被去掉，新增的是「網絡（Network）」，另外「腳本」也被去掉，替換爲「源文件（Sources）」。

（3）啓動Chrome開發者工具的方法；

1. 在頁面上右鍵，在下拉菜單中選擇「審查元素（Inspect Element）」
2. 使用快捷鍵：
   • Windows & Linux：Ctrl+Shift+J
   • Mac：Command+Option+J
3. 從菜單中打開：
   • Windows：工具->開發者工具
   • Mac：視圖（View）->開發者（Developer）->開發者工具（Developer Tools）

注：在Windows上的Chrome 23中，Ctrl+Shift+J用於啓動JavaScript控制檯，而啓動Chrome開發者工具的是Ctrl+Shift+I。因此不一樣版本的快捷鍵可能有所不一樣。

（4）Chrome開發者工具的某些標籤的使用會影響到網頁的性能，所以默認是關閉的。使用時須要打開。

2. Elements標籤

爲了提升網頁性能，源代碼一般會通過壓縮等處理，這樣的源代碼對客戶端和服務器端識別而言是件好事，但不利於程序員閱讀。而Elements標籤下，代碼會以很規範的有層次的形式予以展示，而且對應語法部分也有高亮。在這一標籤下，咱們能夠瀏覽頁面的樣式（Styles）、盒模型（Metrics）、屬性（Properties）和事件偵聽器（Event Listeners），而且也能夠與它們進行交互和修改。

由於CSS具備級聯這一特色，因此有時會發現元素並無像咱們預想的那種樣式進行展現，這可能源於CSS中出現了衝突。這時咱們就能夠經過Styles觀察對應元素所具備的樣式，從而發現問題的所在。

Elements標籤中右側的菜單從多個角度展現了網頁的信息：

1. Computed Style：元素通過計算後的最終樣式
2. Styles：設置的元素樣式
3. Metrics：元素的盒模型
4. Properties：元素的全部屬性
5. DOM Breakpoints：斷點
6. Event Listeners：事件偵聽器

小結：Elements標籤實際上讓咱們從瀏覽器的角度瞭解了網頁。

3. Resources標籤（及Network標籤）

Resources標籤幫助咱們查看瀏覽器請求的全部資源，從服務器接收資源所耗費的時間，以及傳輸過程當中所須要的帶寬。在這篇文章中舉例使用的Chrome開發者工具中的Resources標籤包含不少功能，在隨後的版本中被拆分到Resources標籤和Network標籤中。

經過Network標籤下方的Documents、Images、Scripts等能夠分類查看各個資源的加載時間、加載前後順序等狀況。也能夠以下圖所示查看單個資源的狀況。

若是咱們觀察發現某些資源在每次訪問頁面的時候都會請求，那咱們可能有必要將其緩存在本地。

點擊每一個資源均可以分別查看其頭部（Header）信息。對於那些好久都不須要改變的資源，咱們能夠爲其頭部設置過時時間。

小結：Resources標籤和Network標籤讓咱們瞭解客戶端瀏覽器與web服務器是如何進行交流從而傳遞資源的。

說明：因爲只找到這篇文章的Part1部分，因此對Chrome開發者工具的介紹就到此結束了。從此將繼續學習其餘文章中對Chrome開發者工具的介紹。