小技巧|配置好用的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
本文代表个人观点，内容仅供参考。若有不恰当之处，望不吝赐教！
