这是我参与「第四届青训营 」笔记创作活动的第6天。
前端比较好的地方就是方便运行、方便调试。对于用户而言，浏览器是用来检索、显示网页的地方，前端开发者眼里，浏览器还是运行代码、调试代码的地方。
bug 和 debug
程序员的生涯可以总结为写 bug 、 debug 这两个过程。作为前端小白的我，写 bug 方面我表示不虚，可到了 debug 方面往往是肉眼 debug 法或者 console.log()大法，略显单薄。
下面总结了一些前端 debug 技巧。
前端debug的特点
-
多平台
浏览器、Hybrid、NodeJs、小程序、桌面应用...
-
多环境
本地环境、线上环境
-
多工具
Chrome devTools、Charles ...
-
多技巧
Console、BreakPoint、sourceMap、代理...
Chrome DevTools
鼠标点击右键、选择检查进入DevTools
动态修改元素和样式（Elements面板）
- 点击具体的样式值，可以进行编辑，编辑内容实时预览。
- 点击.cls可以加新类名
- 点击.hov可以激活具有伪类的元素
Console
console.log()
console.warn()
console.error()
console.debug()
console.info()
console.table() //具象化展示 JSON 和数组数据
console.dir() //通过类似文件树的方式展示对象属性
Scources
分为三个区域
- 页面资源文件目录树
- 代码预览区域
从左到右依次是：
暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处自动处理。
- 断点调试器
使用 debugger 关键字或者断点，执行到此处时自动暂停。
Breakpoints 和 Watch
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点。
- 在Watch右侧点击 + 可以添加对变量的监控，查看改变量的值。
Scope 和 Call Stack
- 展开 Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前 JS 代码调用栈。
Source Map
出于安全考虑，JS 代码通常会被压缩，压缩后的代码只有一行，变量被'a'、'b' 等字母代替，这样的代码该如何调试。
使用Source Map 文件，其中mappings字段存储了源文件和 Source Map 的映射，mappings字段中的英文表示源码及压缩代码的位置关联，逗号表示分隔一行的内容。
