相信大部分同学都是用Chrome浏览器进行开发,它不仅提供了强大的性能和高度的兼容性,还携带了一系列功能丰富的开发者工具,这些工具极大地简化了我们的开发流程。在本文中,我将探讨一些在Chrome开发者工具控制台中的实用技巧,这些技巧旨在提升我们的开发效率,优化我们的代码质量,并加强我们的调试能力
名称筛选
筛选功能远不止基础应用那么简单。除了直接输入关键词进行搜索,我们还可以利用它来排除不相关的数据、进行多重条件筛选以及根据特定字段或属性进行精确查找。默认情况下,筛选操作是针对名称字段进行的。下面是一些高级的筛选技巧:
排除特定项的筛选(反向筛选)
若想排除包含特定字符的条目,可以在搜索框中输入“-xxx”,来实现反向筛选。例如,筛选出名称中不包含“js”的请求:
![](https://i-blog.csdnimg.cn/blog_migrate/0110fa9dcc3e98da2a15961d348be177.png)
多条件组合筛选
想要同时满足多个条件,各个条件之间用空格加竖线再加空格分隔。例如,排除“js”并且包含“list”的请求:
指定字段或属性的筛选
可以根据资源的特定属性进行筛选,比如大小。例如,筛选出大小超过10KB的资源:
小技巧:输入-会提示可用的属性:
监听hover中的元素
在我们日常开发过程中,经常会遇到需要观察鼠标悬停(hover)状态下的元素,以检查其样式或属性的情况。我在此介绍一下我平时用的比较多的两种方法:
普通hover态
对于简单的hover元素,我们可以利用浏览器的开发者工具来监控。
![](https://i-blog.csdnimg.cn/blog_migrate/07de0251b1b9a9e8990397c1ad56b74e.png)
组件类hover态
当使用第三方库的一些有hover态的组件时,使用此方法没用效果,例如ElementPlus的Tooltip 文字提示组件,由于它实现hover效果的方式可能并不直接依赖于元素的hover属性,这就需要我们采用断点调试的方式来进行监听。
操作步骤如下:
1、首先打开开发者工具的控制台,并切换到“源代码(Sources)”标签页;
2、将鼠标悬停在待观察的元素上,同时按下control+\来触发断点调试;
3、在控制台顶部点击“元素”按钮,选择处于暂停状态的hover元素,这样就可以成功定位到实现hover效果的元素。
截屏
可能大家的电脑中都已安装了截图工具,但有时我们希望能捕获网页上的全部内容,包括那些在可视区域之外的部分,如滚动条下的内容。或者我们希望精确地截取特定DOM元素所对应的内容。此时截图软件可能就不是那么好用了,因此我给大家介绍一下谷歌浏览器自带的截图功能。
Ctrl + Shift + P打开命令菜单,输入截图。选择截取完整屏幕的尺寸截图,即可自动保存一张网页全屏的图片。
此外也可以设置截图的快捷键。点击右上角的设置按钮,找到快捷键设置自己的键位。
截取dom元素则是打开控制台点击箭头选择元素后,在命令菜单里选择当前节点屏幕截图。
重新调用接口
有些接口是页面初始化的时候调用的,如果想重新调用,大家的做法是什么?可能有些人是重新刷新页面,但是谷歌浏览器有更好的实现方式:
打开网络,筛选一下XHR,右键要重新调用的接口,重放XHR即可
快捷隐藏页面元素
直接点击元素后,按下h键即可快速隐藏选中元素
让页面所有元素都可以直接编辑
在控制台运行
document.body.contentEditable=true
之后页面所有的HTML元素你都可以直接点击修改元素上的文字了。