浏览器devtool的一些基础用法

我们来聊聊关于浏览器devtool的一些比较基础的使用技巧

导言

作为一个web前端，你的工作可以离开VSCode，Webstorm，毕竟你熟悉的情况下，可以直接记事本撸代码。但是，肯定离不开控制台，浏览器有浏览器的控制台，开发工具也有开发工具的控制台。上面提供了很多功能，如下：

1. 预览页面实时DOM树和CSS树的【元素】
2. 执行JavaScript的【控制台】
3. 概览当前页面资源的【源代码】
4. 查看当前页面存储缓存等内容的【应用】
5. 概览页面的所有请求的【网络】
   ……等等

devtool有很多功能，暂先介绍一些基础的，使用频率较高的功能。通过这些功能，不仅可以提高我们的工作效率，也可以帮助定位一些问题。

元素

在元素下面区域中，我们可以看到，左侧有实时的DOM树数据，右侧则是一些CSS相关内容和DOM树节点的补充数据。
左侧的DOM树区域你可以任意修改这里的内容，或增加、或删除element。有些朋友在编辑元素的时候习惯双击然后再编辑，但是这样会有一个问题，容易失去焦点。此时不妨尝试下在目标元素上摁下鼠标右键，这个时候你会看到右键菜单顶部会有那么几个功能： 编辑属性、 添加属性、 编辑为HTML。
点击编辑属性 效果是： 会把你右键点击时所hover的属性更改为可编辑状态。
点击添加属性 效果是： 会在开始标签末尾出现一个空白编辑区，在此处可以输入要添加的属性
以上两个操作主要是针对属性的操作，比如添加一个data-set自定义属性、添加一个id或者class什么的。要是想编辑当前元素及其后代元素的一些东西，此时再通过编辑属性和添加属性操作就比较繁琐了，此时第三个按钮就派上用场了
点击编辑为HTML效果是： 会生成一个类似textarea的区域，让你自由编辑html内容

元素编辑完成，我们要获取元素了，这个时候该怎么办呢？
有两个方法：

1. 添加属性id，然后控制台里通过const ele = document.getElementById('xx'),当然class也可以，但是在不确定默认class是否只有一个的时候，只能添加一个很特别的class再获取了

2. 左键单击要获取的元素，在控制台里可通过$0变量来获取刚刚点击过的元素, 当然还有$1 $2 $3什么的，会获取到之前点击的元素，比如你先点击div 再点击span，那么此时，获取到的$0就是span元素对象，而$1就是div元素对象了，如果只点击div，那么获取到的$0就是div 元素对象了。在此基础上可以进行DOM操作或者绑定事件。$0.addEventListener('click', onClick)。

控制台

控制台是我们用的最多的一个功能了，在此处看到代码里console.log的结果，也可以临时写段简单的代码进行调试。接下来介绍几个控制台的功能/变量：

1. 控制台边栏

   

在控制台内容区域左上角有个按钮，点击之后可以显示控制台边栏，控制台边栏为何物？简单点讲就是把控制台的输出信息进行一个分类，正常输出、错误信息和警告信息等，分类之后我们可以更快速、集中地获取需要的信息

2.控制台变量

在介绍元素的时候，提到了$0,现在介绍一个新的变量$_,$_变量是为何物？可获取最近一次执行语句的返回结果，上个图

我们首先定义了个函数getName,之后执行该函数，返回了结果，除了通过给返回结果赋值到某个变量上，浏览器还可以自动把结果赋值到$_上，通过$_获取到刚刚的结果，注意一点，一定要有返回的表达式才行，定义变量的时候是没有返回结果的，此时获取到的是undefined

还有一个变量temp1，当然temp1是个例子，肯定还有temp2、temp3之类的，这个变量temp\d存储的是我们存储为全局变量的值，上图：

在第四行文字上右键，底部有个存储为全局变量，点击之后，temp1变量就会指向当前选择的内容，再存储另一个值的时候，就会创建一个temp2，以此类推。

网络

网络区域在联调阶段或者定位问题是一定会用到的，这里可以查看页面的所有资源、非资源类请求。浏览器开发商还为我们提供了很多工具用来提高效率，上图：

在图中，我框了5个地方，我来一一解说这几个小功能：

1. 保留日志 当我们刷新页面或者页面自动跳转时，默认情况下，请求会自动清空之前的请求列表，再以跳转后的页面的html请求开始显示请求列表。当我们需要追踪跳转前后的请求或者想手动清空请求列表的时候，开启这个功能即可

2. 禁用缓存 可让浏览器在获取静态资源的时候设定为不缓存

3. 限制 在这里可以模拟一些网络情况，有正常情况，还有快速4G，慢速的3G，还有离线。通过模拟不同的网速可以在性能优化的时候进行数据获取和分析

4. 类型过滤 可以通过请求类型进行筛选，方便你不用在一堆请求里找那个你要寻找的请求了

5. 筛选器 当你明确自己要寻找的请求时，可以在这里输入请求的特征，比如登录接口：userlogin，下方的请求列表就会只显示符合条件的请求。温馨提醒： 使用之后别忘记清空