【图文教程】配置好用的Chrome DevTools，让前端开发调试更友好

总结和发现的一些好用的Chrome开发者工具配置

显示网络请求的Method和status

在Firefox中，status显示有颜色区分，且状态、方法和地址的顺序阅读更加友好，喜欢Firefox的朋友可以试试

请求行使用大行模式

该模式会在Name中显示源地址

显示CSS布局层级信息

然后我们在Layers标签中看到页面布局信息，还可以360°旋转，这个在Firefox中表现更好

开启Source面板中代码折叠

我们在查看页面源码的时候，js代码默认是不可以折叠的，开启这个开关即可以折叠代码了，Settings -> Preferences -> Sources -> 勾选Code Folding

效果

开启页面元素查看时显示标尺

设置 Settings -> Preferences -> Elements -> 勾选Show rules

效果

模拟网速和禁止缓存

---

微信公众号

关注公众号，第一时间接收最新文章。如果对你有一点点帮助，可以点喜欢点赞点收藏，还可以小额打赏作者，以鼓励作者写出更多更好的文章。