Chrome調試工具

一、打開Chrome調試工具

1、快捷鍵：F12

2、頁面上右鍵菜單——>檢查

3、快捷鍵：Ctrl+Shift+I

4、右上角垂直三點——>更多工具——開發

 

 

二、常用標簽面板介紹（Element、Network、Sources、Application、Console）

1、Chrome提供的常用組件工具概述

① Elements: 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的HTML、CSS和DOM(Document Object Model)對象。此外，還可以編輯這些內容更改頁面顯示效果；

② Network: 可以看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間，當然也能看到哪些資源不能成功加載。此外，還可以查看HTTP的請求頭，返回內容等；

③ Sources: 主要用來調試js；

④ Timeline: 提供了加載頁面時花費時間的完整分析，所有事件，從下載資源到處理Javascript，計算CSS樣式等花費的時間都展示在Timeline中；

⑤ Profiles: 分析web應用或者頁面的執行時間以及內存使用情況；

⑥ Application（Resources）: 對本地緩存（IndexedDB、Web SQL、Cookie、應用程序緩存、Web Storage）中的數據進行確認及編輯；

⑦ Audits: 分析頁面加載的過程，進而提供減少頁面加載時間、提升響應速度的方案；

⑧ Console: 顯示各種警告與錯誤信息，並且提供了shell用來和文檔、開發者工具交互；

⑨ Security：通過該面板你可以去調試當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS。

 

 

（1）Element

區域①：Html的dom樹結構，可以進行查看定位編輯；

區域②：dom對象的輔助功能；

區域③：實時顯示當前選中標簽的CSS樣式、屬性等

• Styles: 顯示用戶定義的樣式，還有開發者工具添加的樣式；
• Computed: 顯示開發者工具計算好的元素樣式（盒式模型）；
• Event Listeners: 顯示當前HTML DOM節點和其祖先節點的所有JavaScript事件監聽器
• DOM Breakpoints: 列出所有的DOM 斷點；
• Properties: 全面地列出當前選中內容的屬性，不過基本很少用到。

 

2、Network

區域①：請求的每個資源在Network表格中顯示為一行，每個資源都有許多列的內容；

• Name: 資源名稱以及URL路徑；
• Status: HTTP狀態碼；
• Type: 請求資源的MIME類型；
• Initiator解釋請求是怎么發起的，有四種可能的值：
  1. Parser：請求是由頁面的HTML解析時發送的；
  2. Redirect：請求是由頁面重定向發送的；
  3. Script：請求是由script腳本處理發送的；
  4. Other：請求是由其他過程發送的，比如頁面里的link鏈接點擊。
• Size: Size是響應頭部和響應體結合起來的大小，；
• Time: Time是從請求開始到接收到最后一個字節的總時長；
• Timeline: 顯示網絡請求的可視化瀑布流，鼠標懸停在某一個時間線上，可以顯示整個請求各部分花費的時間。

區域②：輔助小功能

1. Record Network Log: 紅色表示此時正在記錄資源請求信息；
2. Clear: 清空所有的資源請求信息；
3. Filter: 過濾資源請求信息；
4. Perserve Log: 再次記錄請求的信息時不擦出之前的資源信息；
5. Disable cache: 不允許緩存的話，所有資源均重新加載。

區域③：選擇Filter后，就會出現如紅色區塊3所顯示的過濾條件，當我們點擊某一內容類型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只顯示該特定類型的資源。

此外，我們還可以查看網絡請求的請求頭，響應頭，已經返回的內容等信息，如下圖：

 

3、Sources

我們可以點擊JS代碼塊前面的數字外來設置斷點，如果當前代碼是經過壓縮的話，可以點擊下方的花括號{}來增強可讀性，所有的斷點都會列出右側的斷點區；

①Watch：可以添加需要監聽的變量，執行斷點時可以觀察變量的變化情況；

②Call Stack：查看斷點執行的堆棧情況，可以快速定位斷點執行入口；

③Event Listener Breakpoints：勾選你要監聽的事件， 在指定的事件執行時，斷點就會有觸發；

 

4、Application

該面板主要是記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等；

 

5、Security（少使用）

通過該面板你可以去調試當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS。

6、Audits

對當前網頁進行網絡利用情況、網頁性能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS文件等。

7、Timeline（詳見參考資料）

 

三、常見錯誤匯總

對於報錯，一般常見為腳本代碼報錯和數據請求錯誤；而對於數據請求錯誤90%是可以直接打開看報錯信息（表單錯誤、PUT/POST提交的除外），對於測試和項目經理（助理）來說，在客戶環境下能夠提供比較精准的錯誤信息比較總要，以下有些常見的錯誤信息：

1、數據庫連接串錯誤

2、配置文件請求格式化錯誤（這個報錯在現有框架下，報錯信息如下，這是一個腳本錯誤）

代碼在執行的時候，如果遇到異常拋出后，后面的代碼就不會繼續執行，因此，我們可以比較快速在network中定位到因此這個錯誤的文件是哪個

打開這個鏈接后，我們會發現，的確是這個文件的問題，而且還定位到了具體的位置

 

3、xml腳本表或視圖不存在

可能原因：表名寫錯了、庫表沒更新

4、xml腳本標識符無效

可能原因：字段名寫錯誤、新增字段庫表沒更新

5、表單相關錯誤（通過查看network中對應錯誤的Response獲取報錯信息）

表單常見錯誤等等，測試可以積累常見錯誤原因

6、對於前端腳本錯誤，可以點擊錯誤定位到具體錯誤代碼，如果你有開發經驗，就可以進行斷點調試，如果你是項目經理或者測試，你就需要截圖錯誤信息提交開發；

 

四、插件安裝，提高效率（jsonview為例）

1、網上搜索chrome擴展插件jsonview

2、開啟開發者模式；

        ===》》

 

3、將下載的擴展插件文件拖入瀏覽器中即可

 

五、參考資料

Chrome開發者工具詳解(1)：Elements、Console、Sources面板

Chrome開發者工具詳解(2)：Network面板

Chrome開發者工具詳解(3)：Timeline面板

Chrome開發者工具詳解(4)：Profiles面板

Chrome開發者工具詳解(5)：Application、Security、Audits面板