这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
1 Bug与Debug
前端Bug的特点
- 多平台（浏览器、Hybrid、NodeJs、小程序、桌面应用等）
- 多环境(本地开发环境、线上环境）
- 多工具9Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole等）
- 多技巧（Console、BreakPoint、sourceMap、代理等）
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css规则
用以下两种方式强制激活伪类：
- 选中具有伪类的元素，点击 :hov
- DOM 树右键菜单，选择 Force State
Console控制台日志
-
console.log
-
console.warn
-
console.error
-
console.debug
-
console.info
-
console.table 具象化的展示 JSON 和数组数据
-
console.dir 通过类似文件树的方式展示对象的属性
-
占位符 给日志添加样式，可以突出重要的信息
%s：字符串占位符(白色)；%o：对象占位符；%c:样式占位符；%d：数字占位符
小结：不同类型的对象，颜色不同，因此可以用识别对象类型
Source Tob
第一排Debug工具栏，从左到右依次为
- 暂停（继续）
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常处自动
下面的区域为：断点调试器
断点调试方法：
- 使用关键字 debugger 或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
Source Map
思考题:
既然map可以映射源码，那压缩后的代码带上Source Map上线不就不安全了吗？
解答：
Source Map的应用场景是监控，在监控的时候，在代码上线的时候一般不带Source Map，为了安全也可以减少体积。所以，在项目打包的时候带Source Map打包，产物里面是有Source Map的，但在上线之前将Source Map上传到另一个平台，例如监控平台，上传之后再删掉Source Map，再上传不带Source Map的产物，部署上线。
