专栏首页前端外文精选【小技巧】几个好用的Chrome DevTools配置

【小技巧】几个好用的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),欢迎添加好友进一步交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

相关文章

  • 【图文教程】MongoDB云数据库Atlas的使用

    学习使用 MongoDB 官方提供的免费云数据库,初学者的学习利器,手把手图文教程。

    Dunizb
  • JavaScript事件探秘

    事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

    Dunizb
  • 测量JavaScript函数的性能的简单方法及与其他方式对比

    测量执行一个函数所需的时间总是一个很好的办法,证明某些实现比另一个实现的性能更好。这也是一个很好的方法,可以确保性能没有在某些改变后受到影响,也可以追踪瓶颈。

    Dunizb
  • libpng+VS2012(VS2015)的使用

     OpenCV保存PNG图像底层调用的就是libpng库,简要说一下libPNG库的单独使用。 1.首先需要下载两个库,一个是libpng,一个是zlib li...

    一棹烟波
  • WPF效果第一百四十二篇之拖放更换头像

    周末了,无意间翻到了别人的关于更新头像的软文,这不正好趁着休息也来尝试一下,最终效果:

    WPF程序员
  • 从0搭建自己的服务器网站(windos server)

    突发奇想想搭建自己的网站,买好服务器以后,就开始自己的艰辛之路 1.买的是阿里云服务器的ECS,因为是第一次搞所以选的windos系统 2.修改实例密码

    河湾欢儿
  • 3.2、苏宁百万级商品爬取 思路讲解 商品爬取

    如果我要得到A类别的第B页的商品我应该如何拼接符合条件的地址 我们首先分析地址,地址如下

    小狐狸
  • Outlook性能提升

    林万程
  • 循环神经网络(Recurrent Neural Networks)简介

    在介绍 RNN 的诸多文章中,通常都是介绍 RNN 的使用方法和实战效果,很少有文章会介绍关于该神经网络的训练过程。本文将会使用传统的后向传播算法来训练 RNN...

    张戎
  • 宋宝华: Linux 性能调优的分析与实战

    系统的性能是受多方面因素影响的,性能调优是一个非常困难的任务,它要求对硬件、操作系统、和应用都有着相当深入的了解。本文讲述了Linux 系统性能调优分析与实战。

    Linuxer

扫码关注云+社区

领取腾讯云代金券