【小技巧】几个好用的Chrome DevTools配置

总结和发现的一些好用的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/。 作者简介：做工程不做码农(微信公众号同名)，Web前端工程师，7年开发经验，坐标杭州，聚焦大前端技术和程序成的公众号，欢迎关注。我的个人微信(dunizb)，欢迎添加好友进一步交流。

​

​