Bug与Debug
这是我参与「第四届青训营 」笔记创作活动的第8天
bug真是一个令人头疼的存在，它在我们实际开发的过程中无处不在，下面就让我们来看看如何消灭 bug —— debug的各种调试方法。
前端Debug的特点
Chrome DevTools
1.动态修改元素和样式
强制激活伪类
针对页面上的伪类或者不同状态下的元素样式不易选中的情况（如阴影效果），我们可以选中这个元素，然后点击右键菜单，选择 Fource State ,然后点击选择 :hov 。
想要修改元素样式，而又不想一个个去找，那么可以在右侧搜索框内直接输入元素类型进行查找。
2.Console
打印日志
控制台打印不同类型颜色不一样
让程序执行进入暂停状态的方法
- 在代码中间加上一句
debugger;，程序就会在运行时在此处打上断点，进入调试状态。 - 在行号处点一下，程序就会在这一行打上断点，在运行时在这一行暂停，进入调试状态。
查看元素值
- 日志打印
- 鼠标移动到元素上，就会自动浮现
- 控制台右侧 watch 输入元素名
小功能
右侧区breakpoints 可以查看各种断点，并操作选中状态。
3.压缩后的代码如何调试？
sourceMap文件
思考题： 为了安全，在打包时不会将sourceMap文件加进去，而是会把sourceMap上传到第三方监控平台，这样在使用过程中遇到问题，再去监控平台获取sourceMap从而进行调试。
sourceMap打开和关闭
打包前后
4.NetWork
模拟网速环境
未上线的开发过程中，网速往往是很快的，但是在实际应用过程中，由于信号、地区等问题，网速有时会非常慢，这种情况我们是不可忽视的，因此，NetWork为我们提供了模拟网速环境的选项，Slow 3G 就是慢速网络环境。
前后端联调定位
开发过程中，往往需要我们前后端联调定位，从而确定bug是前端问题还是后端问题，可以通过preview来定位接口问题。
5.Application
Application主要展示与本地存储有关的信息。
6.Performance
\
浏览器重排
优化与不优化的执行区别
7.Lighthouse
Lighthouse展示的是站点性能指标分析
下图是该站点性能瓶颈以及优化方案，可以根据这里对你的站点进行优化
移动端 H5 调试
真机调试
Vconsole
类似于 DevTools
