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

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

原作者：賣燒烤夫斯基

---

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

Elements

---

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

A. HTML結(jié)構(gòu)面板
B. 操作DOM樣式、結(jié)構(gòu)、時(shí)間的顯示面板

1. 在A中，每當(dāng)你的鼠標(biāo)移動(dòng)到任何一個(gè)元素上，對(duì)應(yīng)的HTML視圖中會(huì)給該元素藍(lán)色的背景。

   

2. 如果你單擊選中一個(gè)元素，在A部分的底部，會(huì)顯示該元素在HTML結(jié)構(gòu)中的位置關(guān)系。

   

3. 然后你可以在B部分的styles選項(xiàng)中編輯該元素的樣式，并且看到HTML結(jié)構(gòu)的實(shí)時(shí)更新，無需刷新。

   

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

   

   • click 是事件名稱
     
   • .div1 事件是索引名稱（也就是通過什么進(jìn)行綁定）
     
   • attachment 事件來源
     
   • handler 事件回調(diào)的詳細(xì)內(nèi)容
     
   • useCapture 事件是否為向上冒泡

5. 選中一個(gè)元素，右擊鼠標(biāo)，你會(huì)看到有一個(gè)彈出窗口出現(xiàn)，里面有若干選項(xiàng)。

   

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

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

   

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

   

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

   

9. 或者你可以點(diǎn)擊左上角的問號(hào)圖標(biāo)，然后把鼠標(biāo)移入到網(wǎng)頁內(nèi)，點(diǎn)擊想要查看的元素，會(huì)在A面板中顯示相應(yīng)的元素。

   

Network

---

1. Network是一個(gè)監(jiān)控當(dāng)前網(wǎng)頁所有的http請(qǐng)求的面板，它主體部分展示了每個(gè)http請(qǐng)求相應(yīng)的信息。

   

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

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

   

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

   1. 是否啟用持續(xù)Http監(jiān)控（默認(rèn)高亮啟用）
      
   2. 清空主面板中的http信息
      
   3. 是否啟用過濾信息選項(xiàng)（默認(rèn)啟用，可以對(duì)Http信息進(jìn)行篩選過濾）
      
   4. 列出多重屬性
      
   5. 只列出name和time屬性
      
   6. preserve log 當(dāng)新加載頁面時(shí)不清除面板的請(qǐng)求信息
      
   7. disable cache 禁用緩存

   

4. 最后在主面板的底部有記錄了整體網(wǎng)絡(luò)請(qǐng)求狀態(tài)的一些基本信息

   

Resources

---

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

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

Chrome開發(fā)者工具不完全指南（一、基礎(chǔ)功能篇）