1.Chrome 內置抓包工具
2.Block requests
3.截取長圖
4.代碼的覆蓋率分析
5.Make site better
1.Chrome 內置抓包工具
在瀏覽器地址欄輸入 chrome://net-internals/#events ,即可打開自帶的抓包工具隘冲。工具處于live狀態(tài)倒槐,其他tab 頁有請求刷新炭剪,列表會隨之刷新請求的快照弃锐,點擊快照可查看詳細的請求信息遏佣,配合 network面板能看到一個完整的請求白粉。
2.Block requests
network 面板右擊請求即可看到 block 選項掩缓,這個選項能夠使我們在請求和域的級別上打斷點雪情。
eg: 配合 Preserve log 可以監(jiān)測請求在不同域之間轉發(fā)跳轉時狀態(tài)變化(請求在不同域之間轉發(fā)跳轉,network面板會經常性地丟失 response)你辣。
3.截取長圖
切換 device 到其他模式(比如調試移動端)時巡通,右邊菜單欄提供了 capture full-page screenshots的選項。
4.代碼的覆蓋率分析
通過coverage 面板可以找到沒有用到的 css和 js 代碼舍哄,點擊單個文件可以查看詳情宴凉,并且也是處于 live 狀態(tài),頁面發(fā)生變化時表悬,覆蓋率報告也會隨之刷新弥锄。通過右邊菜單 more tools 或者通過快捷鍵 ctrl + shift +p (windows) 輸入coverage 即可打開 coverage。
5.Make site better
Audits panel 提供了 PWA, performance, 無障礙蟆沫,最佳實踐四個維度的網站測試報告籽暇。提供了不是很常見的無障礙測試,配合報告我們可以進行更好的無障礙優(yōu)化饭庞。