前端开发离不开浏览器 | 前端调试离不开控制台

我要开始写代码了→想看一下效果→打开浏览器→不满意或者出问题了→想要调试一下→打开控制台→主角出场 ↓↓↓

开发者工具面板

嗯~没错！就是这些。（Tips：打开方式主要有F12、ctrl+shift+i、右键检查、手动点击工具栏）

我们日常开发过程中经常会遇到不容易理解的行为出现，这个时候我们就要打开控制台（即开发者工具）来排查或解决我们的问题。

其实控制台不仅仅是协助我们调试的工具，还能很大程度上提升我们的生产力。

功能主要包括：审查元素、PC与移动端视图切换、查看元素、输出值、查看源文件、监测网络请求、内存分配信息、安全性信息、本地存储、性能分析等。

由于内容较多，因此先从元素(elements)说起。

1.点击左上角的小箭头，然后选中页面上的元素

审查元素

当鼠标悬浮在该元素上时，会展示出当前的标签、大小、颜色、字体、外边距等属性，可用于快速查看这些基本信息。当单击鼠标时，元素面板中会自动定位到该元素的位置处，并且右边会出现样式、监听事件等属性面板。

样式

会显示出应用在当前元素上的所有样式信息，包括自身样式、继承样式、代理样式等。可追加、修改、取消相应的属性，单击上方:hov可强制设置元素的状态，如：:active、:hover、:focus等，单击.cls可为元素添加新的类名，单击加号可以新建样式规则。最下方为元素经过计算之后得到的盒子模型，可在计算样式面板查看更详细信息，计算样式面板展示了所有非默认属性经过层叠覆盖最终得到的样式信息，布局面板主要用来查看grid网格布局与flex弹性布局。（Tips：对于属性值为数值类型，可通过上下按键来调整，步长为1，按住shift步长为10，按住ctrl步长为100。颜色可以通过点击小方块来细致调整）

事件监听器

会显示出当前元素所有被绑定或会触发的事件（包括冒泡以及事件委托），展开不同的事件类型，可以查看该事件绑定所在的文件中的位置，一般用于快速定位到事件发生的位置，从而可以进行打断点等操作。

2.可在元素上面右键进行更多的操作

元素右键

在元素节点与文本节点上面进行右键，会展示不同的控制面板，基本上所有的操作都以字面上的意义去理解就可以。需要特殊说明的是元素也可以打断点，有三种触发条件：元素属性变化、移除元素、子元素变化，如果在打完断点之后，发生上述情况，那么就会自动跳转到相应的执行代码的文件所在位置。注意：如果状态改变已经发生了，打断点是没有作用的，并且刷新页面之后会清除断点，这个与在源文件中的断点是不同的，不会一直保留断点。因此遇到这种情况可以在js中设置断点或debugger，并且是在页面加载完但代码还没有执行的时候，这样可以手动给元素设置断点之后，再继续执行代码，那么发生上述改动时，就会触发断点功能，跳转到代码执行的位置。

3.快速引用元素来查看属性等信息

引用元素

有时候我们可能需要打印一些页面中的元素，但是通过在代码中输出或者通过选择器查询显得不是很灵活，这种情况下可以使用元素别名来达到引用的效果，在页面中单击元素之后，可以看到后面出现了 == $0 的字样，这个时候我们可以在控制台使用$0来输出该元素，并且可以直接进行元素的所有操作。注意：当没有任何选中元素时，输出$0会报错，$0永远指向最新的选中元素，并且$1指向次新，以此类推，最多到$4共五个元素引用。（Tips：如果是用vue开发的页面，那么可以使用$0.__vue__来引用当前元素的vue实例，其他同理，调试场景可自行拓展）

总的来说

元素面板提供的功能是非常强大的，其实还有很多便利性的功能，可以极大的帮助开发者快速发现问题、定位问题、排查问题、解决问题。甚至没有问题的时候也能够帮助开发者提升生产力。希望掌握这些技能之后能减少我们的痛苦折磨与头秃预警。目前元素面板只介绍这些常用的操作，后续可增加更多调试小技巧。

与其他面板配合使用，希望我们以后代码撸得越来越爽，越来越轻松。