前端 Debug的特点
01.多平台
浏览器、Hybrid、NodeJs、小程序、桌面应用等。
02.多环境
本地开发环境、线上环境
03.多工具
Chrome devTools, Charles, Spy-Debugger, Whistle, vConsole …
04.多技巧
Console、BreakPoint、sourceMap、代理等
Chrome DevTools
- ·点击.cls开启动态修改元素的class
- ·输入字符串可以动态的给元素添加类名
- ·勾选/取消类名可以动态的查看类名生效效果
- ·点击具体的样式值（字号、颜色、宽度高度等） 可以进行编辑，浏览器内容区域实时预览 ·Computed下点击样式里的箭头可以跳转到styles面板中的css规则 可以用以下2种方式强制激活伪类
- ·选中具有伪类的元素，点击：hov
- ·DOM树右键菜单，选择Force State
Sorce Tab
区域1：页面资源文件目录树
区域2：代码预览区域
区域3：Debug 工具栏
这种调试方案其实来自于java，使用方式也是很简单，直接在代码中需要断点的地方，直接debugger即可，当js执行到该语句的时候，会自动暂停，页面会出现蒙层卡住，然后会自动跳转到debugger代码处，处于当前执行环境的数据将鼠标移动到该数据上会显示出来，是一种很简便的调试方法，不过后面一定要删除该语句，否则的话一旦用户不小心点开开发者工具（F12），就会进入debugger，也会影响用户体验的。
在浏览中断点其实是一种比较好的方式，可以省去删除代码中bedugger的方式，首先需要有项目源代码的soureceMap，webpack打包工具里面会默认开启sourceMap的配置，可以直接在浏览器里面断点，在行数的地方可以直接加上断点，F8可以直接跳转到下一个断点，F10可以单步骤调试，F11可以直接进入方法，也相当于单步调试了。
从左到右依次为
- ·暂停（继续）
- ·单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常处自动
区域4：断点调试器
Break Point 与 Watch
- 使用关键字debugger 或代码 预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
展开Breakpoints列表可以查 看断点列表，勾选/取消可以 激活/禁用对应断点 - 暂停状态下，鼠标hover变量 可以查看变量的值
- 在调试器 Watch右侧点击+ 可以添加对变量的监控，查看 该变量的值
Scope 与Call Stack
展开Scope可以查看作用域列表（包含闭包）
展开 Call Stack 可以查看当前
javaScript 代码的调用栈
压缩后的代码如何调试？
前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩 后的代码只有一行，变量使用a'、b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？
Source Map
mappings 字段存储了源文件和Source Map 的映射
- ·英文，表示源码及压缩代码的位置关联
- ·逗号，分隔一行代码中的内容。
- 分号，代表换行。
Application
Application 面板展示与本地存储 相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
