我们来聊聊关于浏览器devtool的一些比较基础的使用技巧
作为一个web前端,你的工作可以离开VSCode,Webstorm,毕竟你熟悉的情况下,可以直接记事本撸代码。但是,肯定离不开控制台,浏览器有浏览器的控制台,开发工具也有开发工具的控制台。上面提供了很多功能,如下:
- 预览页面实时DOM树和CSS树的【元素】
- 执行JavaScript的【控制台】
- 概览当前页面资源的【源代码】
- 查看当前页面存储缓存等内容的【应用】
- 概览页面的所有请求的【网络】 ……等等
devtool有很多功能,暂先介绍一些基础的,使用频率较高的功能。通过这些功能,不仅可以提高我们的工作效率,也可以帮助定位一些问题。
在元素下面区域中,我们可以看到,左侧有实时的DOM树数据,右侧则是一些CSS相关内容和DOM树节点的补充数据。
左侧的DOM树区域你可以任意修改这里的内容,或增加、或删除element。有些朋友在编辑元素的时候习惯双击然后再编辑,但是这样会有一个问题,容易失去焦点。此时不妨尝试下在目标元素上摁下鼠标右键,这个时候你会看到右键菜单顶部会有那么几个功能: 编辑属性
、 添加属性
、 编辑为HTML
。
点击编辑属性 效果是: 会把你右键点击时所hover的属性更改为可编辑状态。
点击添加属性 效果是: 会在开始标签末尾出现一个空白编辑区,在此处可以输入要添加的属性
以上两个操作主要是针对属性的操作,比如添加一个data-set自定义属性、添加一个id或者class什么的。要是想编辑当前元素及其后代元素的一些东西,此时再通过编辑属性和添加属性操作就比较繁琐了,此时第三个按钮就派上用场了
点击编辑为HTML效果是: 会生成一个类似textarea的区域,让你自由编辑html内容
元素编辑完成,我们要获取元素了,这个时候该怎么办呢? 有两个方法:
-
添加属性id,然后控制台里通过
const ele = document.getElementById('xx')
,当然class也可以,但是在不确定默认class是否只有一个的时候,只能添加一个很特别的class再获取了 -
左键单击要获取的元素,在控制台里可通过
$0
变量来获取刚刚点击过的元素, 当然还有$1
$2
$3
什么的,会获取到之前点击的元素,比如你先点击div
再点击span
,那么此时,获取到的$0
就是span
元素对象,而$1
就是div
元素对象了,如果只点击div
,那么获取到的$0
就是div
元素对象了。在此基础上可以进行DOM操作或者绑定事件。$0.addEventListener('click', onClick)
。
控制台是我们用的最多的一个功能了,在此处看到代码里console.log
的结果,也可以临时写段简单的代码进行调试。接下来介绍几个控制台的功能/变量:
在控制台内容区域左上角有个按钮,点击之后可以显示控制台边栏,控制台边栏为何物?简单点讲就是把控制台的输出信息进行一个分类,正常输出、错误信息和警告信息等,分类之后我们可以更快速、集中地获取需要的信息
2.控制台变量
在介绍元素的时候,提到了$0
,现在介绍一个新的变量$_
,$_
变量是为何物?可获取最近一次执行语句的返回结果,上个图
我们首先定义了个函数getName
,之后执行该函数,返回了结果,除了通过给返回结果赋值到某个变量上,浏览器还可以自动把结果赋值到$_
上,通过$_
获取到刚刚的结果,注意一点,一定要有返回的表达式才行,定义变量的时候是没有返回结果的,此时获取到的是undefined
还有一个变量temp1
,当然temp1
是个例子,肯定还有temp2
、temp3
之类的,这个变量temp\d
存储的是我们存储为全局变量的值,上图:
在第四行文字上右键,底部有个存储为全局变量
,点击之后,temp1
变量就会指向当前选择的内容,再存储另一个值的时候,就会创建一个temp2
,以此类推。
网络区域在联调阶段或者定位问题是一定会用到的,这里可以查看页面的所有资源、非资源类请求。浏览器开发商还为我们提供了很多工具用来提高效率,上图:
在图中,我框了5个地方,我来一一解说这几个小功能:
-
保留日志 当我们刷新页面或者页面自动跳转时,默认情况下,请求会自动清空之前的请求列表,再以跳转后的页面的html请求开始显示请求列表。当我们需要追踪跳转前后的请求或者想手动清空请求列表的时候,开启这个功能即可
-
禁用缓存 可让浏览器在获取静态资源的时候设定为不缓存
-
限制 在这里可以模拟一些网络情况,有正常情况,还有快速4G,慢速的3G,还有离线。通过模拟不同的网速可以在性能优化的时候进行数据获取和分析
-
类型过滤 可以通过请求类型进行筛选,方便你不用在一堆请求里找那个你要寻找的请求了
-
筛选器 当你明确自己要寻找的请求时,可以在这里输入请求的特征,比如登录接口:userlogin,下方的请求列表就会只显示符合条件的请求。温馨提醒: 使用之后别忘记清空