Chrome 內(nèi)置抓包工具
在瀏覽器地址欄輸入chrome://net-internals/#events，即可打開(kāi)自帶的抓包工具。工具處于live狀態(tài)，其他tab 頁(yè)有請(qǐng)求刷新，列表會(huì)隨之刷新請(qǐng)求的快照，點(diǎn)擊快照可查看詳細(xì)的請(qǐng)求信息，配合 network面板能看到一個(gè)完整的請(qǐng)求。
Block requests
network 面板右擊請(qǐng)求即可看到 block 選項(xiàng)，這個(gè)選項(xiàng)能夠使我們?cè)谡?qǐng)求和域的級(jí)別上打斷點(diǎn)。
eg: 配合 Preserve log 可以監(jiān)測(cè)請(qǐng)求在不同域之間轉(zhuǎn)發(fā)跳轉(zhuǎn)時(shí)狀態(tài)變化(請(qǐng)求在不同域之間轉(zhuǎn)發(fā)跳轉(zhuǎn)，network面板會(huì)經(jīng)常性地丟失 response)。
截取長(zhǎng)圖
切換 device 到其他模式(比如調(diào)試移動(dòng)端)時(shí)，右邊菜單欄提供了 capture full-page screenshots的選項(xiàng)。
eg: 配合這個(gè)選項(xiàng)可以做一些 module lazyload 的優(yōu)化。
代碼的覆蓋率分析
通過(guò)coverage 面板可以找到?jīng)]有用到的 css和 js 代碼，點(diǎn)擊單個(gè)文件可以查看詳情，并且也是處于 live 狀態(tài)，頁(yè)面發(fā)生變化時(shí)，覆蓋率報(bào)告也會(huì)隨之刷新。通過(guò)右邊菜單 more tools 或者通過(guò)快捷鍵 ctrl + shift +p (windows) 輸入coverage 即可打開(kāi) coverage。
Make site better
Audits panel 提供了 PWA, performance, 無(wú)障礙，最佳實(shí)踐四個(gè)維度的網(wǎng)站測(cè)試報(bào)告。提供了不是很常見(jiàn)的無(wú)障礙測(cè)試，配合報(bào)告我們可以進(jìn)行更好的無(wú)障礙優(yōu)化。
在每次發(fā)布版本時(shí)，Chrome Devtools Updates 會(huì)提示更新的內(nèi)容。當(dāng)然，最簡(jiǎn)單的方法就是保持chrome的版本更新，更新后 devtool 面板會(huì)自動(dòng)推送 features && changes。
希望本文能幫助到您！
點(diǎn)贊+轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（收藏不點(diǎn)贊，都是耍流氓-_-）
關(guān)注 ｛我｝，享受文章首發(fā)體驗(yàn)！
每周重點(diǎn)攻克一個(gè)前端技術(shù)難點(diǎn)。更多精彩前端內(nèi)容私信 我 回復(fù)“教程”
原文鏈接：
http://eux.baidu.com/blog/fe/Chrome%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7%E7%9A%84%E4%B8%80%E4%BA%9B%E9%AB%98%E9%98%B6%E5%8A%9F%E8%83%BD
作者：蘇迪
