小技巧|配置好用的Chrome DevTools

• 2019 年 12 月 27 日
• 筆記

總結和發現的一些好用的Chrome開發者工具配置

顯示網路請求的Method和status

enabel-method.gif

在Firefox中，status顯示有顏色區分，且狀態、方法和地址的順序閱讀更加友好，喜歡Firefox的朋友可以試試

Firefox-request.png

請求行使用大行模式

該模式會在Name中顯示源地址

use-lager-request-row.png

顯示CSS布局層級資訊

CSS-layers.png

然後我們在Layers標籤中看到頁面布局資訊，還可以360°旋轉，這個在Firefox中表現更好

CSS-layers-view.png

開啟Source面板中程式碼摺疊

我們在查看頁面源碼的時候，js程式碼默認是不可以摺疊的，開啟這個開關即可以摺疊程式碼了，Settings -> Preferences -> Sources -> 勾選Code Folding

Sources-code-folding.png

效果

Sources-code-folding-view.png

開啟頁面元素查看時顯示標尺

設置 Settings -> Preferences -> Elements -> 勾選Show rules

show-rules.png

效果

show-rules-view.png

模擬網速和禁止快取

disable-cache-online.png

本文代表個人觀點，內容僅供參考。若有不恰當之處，望不吝賜教！

本文鏈接：https://zhangbing.site/2019/11/21/Chrome-Settings-1/。