一、Bug 与 Debug
1.Bug的产生
历史上计算机第一个bug，是由一只被继电器打死的飞蛾导致的。因此，人们将计算机错误戏称为虫子（bug）， 而把找寻错误的工作称为（debug）。
2.Debug特点
1. 多平台
浏览器、小程序、NodeJS、桌面应用等。
2. 多环境
本地开发、线上环境。
3.多工具
Chrome、devTools、Whilstle、vConsole等。
4.多技巧
Console、BreakPoint、sourceMap、代理等。
二、调试
首先右键点击检查（上课时用的Chrome DevTools，这里就是电脑自带浏览器上的）。
1、元素（Element）
在这一栏可以动态修改元素和样式
- 点击箭头所指位置的按钮可快速找到所需元素的css规则
- 点击源代码可直接对页面进行修改
- 数值可通过滚轮进行修改
- 将页面刷新后不会将修改保存
- 点击.cls可以动态的修改元素的class
- 输入字符串可以动态的给元素添加类名
- 选中/取消类名可动态查看类名效果
可以用以下两种方式强制激活伪类
1.选中有伪类的元素，点击:hov
选中元素和伪类如上图所示
2.DOM树右键菜单，选择Force State
- 元素样式较多时可在箭头所指处进行搜索
- body右键，点击此处可快速截屏
2、控制台（Console）
-
console.log -
console.warn -
console.error -
console.debug -
console.info -
console.table具像化的展示JSON和数组数据，例如列出表格 -
console.dir通过类似文件树的方式展示对象的属性 -
占位符 给日志添加样式，突出重要信息
%s:字符串占位符
%o:对象占位符
%c:样式占位符
%d:数字占位符
右侧可以选择等级，对日志进行分类查看
3、源代码（Sorce Tab）
区域一：页面资源文件目录树
区域二：代码预览区域
在对应行前点击或用debugger关键字可添加断点，运行时代码会在断点处停止，暂停状态下鼠标 hover 可以查看变量的值
区域三：Debug工具栏
区域四：断点调试器
监听（Watch）可以添加变量，观察断点处的变量值
- 展开 Scope 可以查看作用域列包（包含闭包）
- 展开 Call Stack 可以查看当前 javaScript 代码的调用栈
- Breakpoints可以查看断点列表，也可以勾选断点
三、压缩代码调试
代码上线前会被压缩，压缩后的代码只有一行，变量用 ‘a’ , ‘b’ 等替换，整体变得不可阅读。
此时需要使用工具 Source Map 当代码出错抛出时，点击报错即可看到源代码。
内部是映射关系，存储在.map文件下,上线时产物里有.map文件，为保证出问题时能找到映射关系，会将.map文件上传到另一平台。
