这是我参与「第五届青训营 」笔记创作活动的第9天
前端Debug特点
多平台，多环境，多工具，多技巧
Chrome Devtools
浏览器+F12
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 浏览器界面中右击-检查，可以直接跳转到html中的块
- 点击具体的样式值，可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳到styles面板中的css规则
- 强制激活伪类
选中具有伪类的元素，点击:hov
dom树右键菜单，选择force state
Console
- log
- warn
- error
- debug
- info
- table
具象化展示json和数组数据 - dir
通过类似文件树的方式展示对象的属性 - 占位符
给日志添加样式，可以突出重要信息，%s字符串占位符，%o对象，%c样式，%d数字
Source Tab
- 使用关键字debugger或代码预览区域的行号可以设置断点。
- 执行到断点处代码自动暂停
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值 字符串灰色，数字蓝色。
- Scope
展开scope可以查看作用域列表，包含闭包 - Call stack
可以查看当前JavaScript代码的调用栈 - XHR/fetch breakpoints
- DOM breakpoints
元素修改断点
SourceMap
- 问题：压缩+混淆
前端代码天生具有“开源”属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用a、b等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
使用sourceMap。
mappings 字段存储了源文件和Source Map 的映射： 英文，表示源码及压缩代码的位置关联。逗号，分隔一行代码中的内容。分号，代表换行。 - 思考题
既然 Source Map 可以映射源码，那压缩后的代码带上 Source Map 上线不就又不安全了吗?
上线不带sourceMap，sourceMap传到统一的监控平台。
Network
preview、response查看后端返回结果
可以模拟弱网环境
Application
Application面板展示与本地存储相关的信息：Local Storage，Session Storage，IndexedDB，Web SQL，Cookie
点击左侧 Application 下的Stroage 面板中的 Clear Site Data可以清除网页的本地存储数据
Performance
Lighthouse
可以参考lighthouse的建议来优化站点
移动端H5调试
真机调试
VConsole
使用代理工具调试
Charles，Fiddler，spy-debugger，Whistle
Nodejs调试
Inspector protocols + Chrome Devtools
官方方法
Inspector protocols + VSCode
常用开发调试技巧
线上即时修改Overrides
- 打开 Sources 面板下的Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在 page 中修改代码，修改完成后 command + s 保存
- 打开devTools，点击右上角的三个小点->More tools->Changes就能看到所有修改了
利用代理解决开发阶段的跨域问题
启用本地SourceMap
线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 SourceMap 文件。
使用代理工具Mock调试
- 右键选中需要 mock 数据的接口，选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想mock 的数据并保存。
- 右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。
