本篇轉載自 賣燒烤夫斯基 ，并做了小部分的修改。

原文地址： Chrome開發者工具不完全指南（一、基礎功能篇）

原作者：賣燒烤夫斯基

---

就算你不是一名前端開發工程師，相信你也不會對Chrome瀏覽器感到陌生。根據最新的一份（2015/06）的瀏覽器市場占有率報告，Chrome近乎占有瀏覽器天下的半壁江山。簡單、快捷使它成為了新時代人們的新寵。如果你是一名web開發人員，我推薦你使用Chrome。作為前端開發的"IDE"，你只需要搭配一個編輯器就能完成幾乎所有的開發任務了。關于它的使用和功能分析要么都是大而不全，要么是巨細糜煩。本系會比較詳細地分享鹵煮的一些Chrome（F12開發者功能）使用經驗，從一些基礎的功能開始到它的一些高級性能分析器（Timeline、Profiles）,在最后，將會推薦幾款好的插件，希望對您的開發工作有些許的作用。如果你對一些面板模塊功能已經很了解可以直接跳過去閱讀你感興趣的部分。

Elements

---

在Elements中主要分兩塊大的部分：

A. HTML結構面板
B. 操作DOM樣式、結構、時間的顯示面板

1. 在A中，每當你的鼠標移動到任何一個元素上，對應的HTML視圖中會給該元素藍色的背景。

   

2. 如果你單擊選中一個元素，在A部分的底部，會顯示該元素在HTML結構中的位置關系。

   

3. 然后你可以在B部分的styles選項中編輯該元素的樣式，并且看到HTML結構的實時更新，無需刷新。

   

4. 你可以在B界面中切換到Event Listener選項，觀察該元素綁定的事件。

   

   • click 是事件名稱
     
   • .div1 事件是索引名稱（也就是通過什么進行綁定）
     
   • attachment 事件來源
     
   • handler 事件回調的詳細內容
     
   • useCapture 事件是否為向上冒泡

5. 選中一個元素，右擊鼠標，你會看到有一個彈出窗口出現，里面有若干選項。

   

   • Add attribute 為元素添加屬性
     
   • Edit attribute 修改元素屬性
     
   • Force element state 為元素激活某種狀態， :hover , :focus 等
     
   • Edit as HTML 編輯該元素（可以重寫整個content）甚至修改它的標簽名稱
     
   • 略過一些 cut、copy......
     
   • Break on 為元素添加dom操作事件監聽。包含三個選項（樹結構改變、屬性改變、節點移除）。這個選項是幫助我們監控和定位操作元素的代碼。請參看下圖事例：
     

6. 在A界面的彈出選項窗口中選擇node removal，在B界面切換到DOM Breakpoints選項，可以看到有注冊信息。然后我們點擊click me按鈕觸發刪除div3的事件，可以看到瀏覽器自動為我們定位刪除該元素的代碼部分，并且停止執行js代碼：

   

7. 在B界面中切換到Properties選項，可以看到選中元素的各種信息（英文單詞里面的介紹比較簡單，就不一一介紹了）。

   

8. 點擊A界面的任意地方，按搜索的快捷鍵，可以在輸入框中查找任何內容，若匹配到都會在A面板中高亮顯示。

   

9. 或者你可以點擊左上角的問號圖標，然后把鼠標移入到網頁內，點擊想要查看的元素，會在A面板中顯示相應的元素。

   

Network

---

1. Network是一個監控當前網頁所有的http請求的面板，它主體部分展示了每個http請求相應的信息。

   

   • Name 請求文件名稱
     
   • Method 方法（常見為get和post）
     
   • Status 請求的狀態
     
   • Type 請求的類型
     
   • Initiator 請求源，也就是該鏈接是通過什么發起請求的（常見位Parser、Script）
     
   • Size 下載文件或者請求占的資源大小
     
   • Time 請求或下載時間
     
   • Timeline 該鏈接在發送過程中的時間狀態軸（我們可以把鼠標移到這些紅紅綠綠的時間軸上，對應的會有它的詳細信息：開始下載時間，等待加載時間，自身下載耗時）
     

2. 單擊面板中的任意一條http信息，會在底部彈出一個新的面板，其中記錄了該條Http請求的詳細參數Header（表頭信息、返回信息、請求基本狀態）、Preview（返回的格式化轉移后的文本信息）、Response(轉移之前原始信息)、Cookies（該請求所帶的cookies）、Timing（請求時間變化）

   

3. 在主面板的頂部，有一些按鈕從左到右它們的功能分別是：

   1. 是否啟用持續Http監控（默認高亮啟用）
      
   2. 清空主面板中的http信息
      
   3. 是否啟用過濾信息選項（默認啟用，可以對Http信息進行篩選過濾）
      
   4. 列出多重屬性
      
   5. 只列出name和time屬性
      
   6. preserve log 當新加載頁面時不清除面板的請求信息
      
   7. disable cache 禁用緩存

   

4. 最后在主面板的底部有記錄了整體網絡請求狀態的一些基本信息

   

Resources

---

Resources部分比較簡單，它向我們展示了本頁面所加載的資源列表。還有Cookies和Local Storage、Session Storaged等本地儲存信息。在這里，我們可以自由地增刪改本地存儲信息。

至于webSql，我知道的并不多，在開發中很少用到。如果你想了解這方面的信息，我推薦你去閱讀 這篇博客 。

Chrome開發者工具不完全指南（一、基礎功能篇）