Chrome調試工具

1、打開Chrome調試工具

一、快捷鍵：F12

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

三、快捷鍵：Ctrl+Shift+I

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

 

 

2、經常使用標籤面板介紹（Element、Network、Sources、Application、Console）

一、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: 全面地列出當前選中內容的屬性，不過基本不多用到。

 

二、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)後，只顯示該特定類型的資源。

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

 

三、Sources

咱們能夠點擊JS代碼塊前面的數字外來設置斷點，若是當前代碼是通過壓縮的話，能夠點擊下方的花括號{}來加強可讀性，全部的斷點都會列出右側的斷點區；

①Watch：能夠添加須要監聽的變量，執行斷點時能夠觀察變量的變化狀況；

②Call Stack：查看斷點執行的堆棧狀況，能夠快速定位斷點執行入口；

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

 

四、Application

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

 

五、Security（少使用）

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

六、Audits

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

七、Timeline（詳見參考資料）

 

3、常見錯誤彙總

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

一、數據庫鏈接串錯誤

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

代碼在執行的時候，若是遇到異常拋出後，後面的代碼就不會繼續執行，所以，咱們能夠比較快速在network中定位到所以這個錯誤的文件是哪一個

打開這個連接後，咱們會發現，的確是這個文件的問題，並且還定位到了具體的位置

 

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

可能緣由：表名寫錯了、庫表沒更新

四、xml腳本標識符無效

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

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

表單常見錯誤等等，測試能夠積累常見錯誤緣由

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

 

4、插件安裝，提升效率（jsonview爲例）

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

二、開啓開發者模式；

        ===》》

 

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

 

5、參考資料

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

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

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

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

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