前端debug的特点:
- 多平台:浏览器、hybrid、node.js、小程序、桌面应用等
- 多环境:本地开发环境、线上环境
- 多工具:chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧:Console、BreakPoint、sourceMap、代理等
Chrome Devtools
Elements | Console | Source | Performance | Network
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号/颜色/宽度/高度)可以进行编辑,浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
强制激活伪类的方法:
1.选中具有伪类的元素,点击:hov
2.DOM树右键菜单,选择Force State
Sorce Tab
- 区域1:页面资源文件目录树
- 区域2:代码预览区域
- 区域3:Debug工具栏
- 暂停\继续
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活(关闭)所有断点
- 代码执行异常处自动
- 区域4:断点调试器
断点与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表,勾选/取消可以激活/禁用对应断点
- 暂停状态下,鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对应变量的监控,查看该变量的值
Scope与Call Stack
- 展开Scope可以查看作用域列表(包含闭包)
闭包可以参考这里
- 展开Call Stack可以查看当前javasScript代码的调用栈
关于调用栈可以参考这里
调试压缩后的代码
前端代码天生具有“开源”属性,出于安全考虑,上线之前JavaScript代码通常会被压缩,压缩后的代码只有一行,变量使用’a’,’b’等替换,整体变得不可阅读。
Source Map
mappings字段存储了源文件和Source Map的映射
- 英文、表示源码及压缩代码的位置关联
- 逗号,分隔一行代码中的内容
- 分号,代表换行
- 映射