这是我参与「第四届青训营 」笔记创作活动的的第8天
01.Bug 与 Debug
01-2 前端 Debug 的特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用……
- 多环境：本地开发环境、线上环境……
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……
- 多技巧：Console、BreakPoint、spirceMap、代理……
02。Chrome DevTools
02-1 动态修改元素和样式
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 style 面板中的 css 规则
可以用以下两种方式强制激活伪类：
- 选中具有伪类的元素，点击:hov
- DOM 树右键菜单，选择 Force State
02-2 Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table 具体化的展示 JSON 和 数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符： 给日志添加样式，可以突出重要的信息
%s: 字符串占位符；%o: 对象占位符；%c: 样式占位符； %d: 数字占位符
左侧可以选择等级，对日志进行分类查看
02-3 Sorce Tab
区域1：页面资源文件目录树
区域2：代码预览区域
区域3：Debug区域工具栏，从左到右依次为：暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处自动
区域4：断点调试器
02-3-1 Break Point 与 Watch
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
02-3-2 Scope 与 Call Stack
- 展开 Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前 javasSript 代码的调用栈
关于调用栈可以参考：developer.mozilla.org/en-US/docs/…
02-3-3 压缩后的代码如何调试？
mappings 字段存储了源文件和 Source Map 的映射
- 英文，标识源码及代码压缩的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
02-4 Network
区域1：控制面板
区域2：过滤面板
区域3：概览区域
区域4： Request Table 面板
区域5：总结面板
区域6：请求详情面板
02-5 Application
02-6 Performance
02-6-1 Performance 运用 示例
googlechrome.github.io/devtools-sa…
02-7 Lighthouse
03.移动端 H5 调试
03-1 真机调试
03-2 VConsole
03-3 使用代理工具调试
03-4 常用代理工具
04. NodejS 调试
04-1 Inspector Protocol + Chrome Devtool
04-2 Inspector Protocol + VS code
VScode 点击运行->添加配置->启动调试->添加断点->查看变量、堆栈
05. 常用开发调试技巧
05-1 线上即时修改 Overrides
- 打开 Sources 面板下的 Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录
- 允许授权
- 在 page 中修改代码，修改完成后 command + s 保存
- 打开 devTools，点击右上角的三个小点->More tools->Changes，这样就能看到所有修改了
