Chrome 調試工具的一些高階功能

Chrome 調試工具的一些高階功能

by.蘇 迪 2017-8-21

• Chrome 內置抓包工具
• Block requests
• 截取長圖
• 代碼的覆蓋率分析
• Make site better

Chrome 內置抓包工具

在瀏覽器地址欄輸入chrome://net-internals/#events，便可打開自帶的抓包工具。工具處於live狀態，其餘tab 頁有請求刷新，列表會隨之刷新請求的快照，點擊快照可查看詳細的請求信息，配合 network面板能看到一個完整的請求。

Block requests

network 面板右擊請求便可看到 block 選項，這個選項可以使咱們在請求和域的級別上打斷點。

eg: 配合 Preserve log 能夠監測請求在不一樣域之間轉發跳轉時狀態變化(請求在不一樣域之間轉發跳轉，network面板會常常性地丟失 response)。

 

截取長圖

切換 device 到其餘模式(好比調試移動端)時，右邊菜單欄提供了 capture full-page screenshots的選項。

eg: 配合這個選項能夠作一些 module lazyload 的優化。

 

代碼的覆蓋率分析

經過coverage 面板能夠找到沒有用到的 css和 js 代碼，點擊單個文件能夠查看詳情，而且也是處於 live 狀態，頁面發生變化時，覆蓋率報告也會隨之刷新。經過右邊菜單 more tools 或者經過快捷鍵 ctrl + shift +p (windows) 輸入coverage 便可打開 coverage。

Make site better

Audits panel 提供了 PWA, performance, 無障礙，最佳實踐四個維度的網站測試報告。提供了不是很常見的無障礙測試，配合報告咱們能夠進行更好的無障礙優化。

在每次發佈版本時，Chrome Devtools Updates 會提示更新的內容。固然，最簡單的方法就是保持chrome的版本更新，更新後 devtool 面板會自動推送 features && changes。

參考資料

• Chrome Devtools
• Chrome Devtools Updates
• chrome://net-internals