前端开发离不开浏览器 | 前端调试离不开控制台
我要开始写代码了→想看一下效果→打开浏览器→不满意或者出问题了→想要调试一下→打开控制台→主角出场 ↓↓↓
开发者工具面板
嗯~没错！就是这些。（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.快速引用元素来查看属性等信息
引用元素