1. 前端 Debug 的特点
- 多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用等.
- 多工具 Chrome devTools、Charles、Spy-Debugger、 Whistle、Console
- 多环境 本地开发环境、线上环境
- 多技巧 Console、BreakPoint、 sourceMap、代理等
2. Chrome-DevTools
Elements | ConsoleSource | Performance | Network
2.1 动态修改元素的样式
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值 (字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles面板中的 css 规则。 6.可以用以下 2 种方式强制激活伪类
- 选中具有伪类的元素，点击:hov
- DOM 右键菜单，选择 Force State
2.2 console
- 左侧可以选择等级，对日志进行分类查看
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table
- console..table ---具像化的展示JSON 和 数组数据
- console.dir---通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息%s: 字符串占位符，%o: 对象占位符， %c: 样式占位符，%d:数字占位符
- 不同类型的值，输出的颜色不一样。
2.3 Source Tab
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
- 工程代码一般是通过压缩混淆后的，代码已经难阅读了，我们需要用到 souce map这个工具，他可以在出错的时候定位到原始代码的位置，但是带上source map 不安全，还是可以通过它获取原始代码，所以一般打包带上 source map ，发布版本是删除了source map 的，而带有 source map 的版本一般上传监控服务器等位置。
