谷歌浏览器控制台必会技巧

相信大部分同学都是用Chrome浏览器进行开发,它不仅提供了强大的性能和高度的兼容性,还携带了一系列功能丰富的开发者工具,这些工具极大地简化了我们的开发流程。在本文中,我将探讨一些在Chrome开发者工具控制台中的实用技巧,这些技巧旨在提升我们的开发效率,优化我们的代码质量,并加强我们的调试能力

名称筛选

谷歌浏览器控制台必会技巧_第1张图片

筛选功能远不止基础应用那么简单。除了直接输入关键词进行搜索,我们还可以利用它来排除不相关的数据、进行多重条件筛选以及根据特定字段或属性进行精确查找。默认情况下,筛选操作是针对名称字段进行的。下面是一些高级的筛选技巧:

排除特定项的筛选(反向筛选)

若想排除包含特定字符的条目,可以在搜索框中输入“-xxx”,来实现反向筛选。例如,筛选出名称中不包含“js”的请求:

谷歌浏览器控制台必会技巧_第2张图片
多条件组合筛选

想要同时满足多个条件,各个条件之间用空格加竖线再加空格分隔。例如,排除“js”并且包含“list”的请求:

谷歌浏览器控制台必会技巧_第3张图片


指定字段或属性的筛选

可以根据资源的特定属性进行筛选,比如大小。例如,筛选出大小超过10KB的资源:

谷歌浏览器控制台必会技巧_第4张图片

小技巧:输入-会提示可用的属性:

谷歌浏览器控制台必会技巧_第5张图片

监听hover中的元素

在我们日常开发过程中,经常会遇到需要观察鼠标悬停(hover)状态下的元素,以检查其样式或属性的情况。我在此介绍一下我平时用的比较多的两种方法:

普通hover态

对于简单的hover元素,我们可以利用浏览器的开发者工具来监控。

谷歌浏览器控制台必会技巧_第6张图片
组件类hover态

当使用第三方库的一些有hover态的组件时,使用此方法没用效果,例如ElementPlus的Tooltip 文字提示组件,由于它实现hover效果的方式可能并不直接依赖于元素的hover属性,这就需要我们采用断点调试的方式来进行监听。

操作步骤如下:

1、首先打开开发者工具的控制台,并切换到“源代码(Sources)”标签页;

谷歌浏览器控制台必会技巧_第7张图片

2、将鼠标悬停在待观察的元素上,同时按下control+\来触发断点调试;

谷歌浏览器控制台必会技巧_第8张图片

3、在控制台顶部点击“元素”按钮,选择处于暂停状态的hover元素,这样就可以成功定位到实现hover效果的元素。

谷歌浏览器控制台必会技巧_第9张图片

截屏

可能大家的电脑中都已安装了截图工具,但有时我们希望能捕获网页上的全部内容,包括那些在可视区域之外的部分,如滚动条下的内容。或者我们希望精确地截取特定DOM元素所对应的内容。此时截图软件可能就不是那么好用了,因此我给大家介绍一下谷歌浏览器自带的截图功能。

Ctrl + Shift + P打开命令菜单,输入截图。选择截取完整屏幕的尺寸截图,即可自动保存一张网页全屏的图片。

谷歌浏览器控制台必会技巧_第10张图片

谷歌浏览器控制台必会技巧_第11张图片

 此外也可以设置截图的快捷键。点击右上角的设置按钮,找到快捷键设置自己的键位。

谷歌浏览器控制台必会技巧_第12张图片

截取dom元素则是打开控制台点击箭头选择元素后,在命令菜单里选择当前节点屏幕截图。谷歌浏览器控制台必会技巧_第13张图片

 重新调用接口

有些接口是页面初始化的时候调用的,如果想重新调用,大家的做法是什么?可能有些人是重新刷新页面,但是谷歌浏览器有更好的实现方式:

打开网络,筛选一下XHR,右键要重新调用的接口,重放XHR即可谷歌浏览器控制台必会技巧_第14张图片

快捷隐藏页面元素

直接点击元素后,按下h键即可快速隐藏选中元素

谷歌浏览器控制台必会技巧_第15张图片

谷歌浏览器控制台必会技巧_第16张图片

让页面所有元素都可以直接编辑

 在控制台运行

document.body.contentEditable=true

之后页面所有的HTML元素你都可以直接点击修改元素上的文字了。

你可能感兴趣的:(开发技巧,javascript,vue.js,css,前端,性能优化,html5,css3)