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

在瀏覽器地址欄輸入 chrome://net-internals/#events ，即可打開自帶的抓包工具。工具處于live狀態(tài)，其他tab 頁有請求刷新，列表會隨之刷新請求的快照，點(diǎn)擊快照可查看詳細(xì)的請求信息，配合 network面板能看到一個(gè)完整的請求。

Block requests

network 面板右擊請求即可看到 block 選項(xiàng)，這個(gè)選項(xiàng)能夠使我們在請求和域的級別上打斷點(diǎn)。

eg: 配合 Preserve log 可以監(jiān)測請求在不同域之間轉(zhuǎn)發(fā)跳轉(zhuǎn)時(shí)狀態(tài)變化(請求在不同域之間轉(zhuǎn)發(fā)跳轉(zhuǎn)，network面板會經(jīng)常性地丟失 response)。

截取長圖

切換 device 到其他模式(比如調(diào)試移動端)時(shí)，右邊菜單欄提供了 capture full-page screenshots的選項(xiàng)。

eg: 配合這個(gè)選項(xiàng)可以做一些 module lazyload 的優(yōu)化。

代碼的覆蓋率分析

通過coverage 面板可以找到?jīng)]有用到的 css和 js 代碼，點(diǎn)擊單個(gè)文件可以查看詳情，并且也是處于 live 狀態(tài)，頁面發(fā)生變化時(shí)，覆蓋率報(bào)告也會隨之刷新。通過右邊菜單 more tools 或者通過快捷鍵 ctrl + shift +p (windows) 輸入coverage 即可打開 coverage。

Make site better

Audits panel 提供了 PWA, performance, 無障礙，***實(shí)踐四個(gè)維度的網(wǎng)站測試報(bào)告。提供了不是很常見的無障礙測試，配合報(bào)告我們可以進(jìn)行更好的無障礙優(yōu)化。

在每次發(fā)布版本時(shí)， Chrome Devtools Updates 會提示更新的內(nèi)容。當(dāng)然，最簡單的方法就是保持chrome的版本更新，更新后 devtool 面板會自動推送 features && changes。