这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
前端 Debug 的特点
- 多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境 本地开发环境、线上环境
- 多工具 Chrome devTools、Charles、 Spy-Debugger、 Whistle、VConsole
- 多技巧 Console、BreakPoint、sourceMap、代理等
Chrome DevTools
动态修改元素和样式
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles直板中的 css 规则
Console
console.warn console.error console.debug console.info console.table 左侧可以选择等级，对日志进行分类查看 子琪 6132 具像化的展示 JSON 和 数组数据 console.dir 通过类似文件树的方式展示对象的属性 占位符给日志添加样式，可以突出重要的信息%s: 字符串占位符，%o: 对象占位符; %c: 样式占位符，%d: 数字占位符
Sorce Tab
区域1: 区域2: 代码预览区域 区域3: Debug 工具栏 从左到右依次为 暂停 (继续) 单步跳过 进入函数 跳出函数 单步执行 6132 激活 (关闭)所有断点代码执行异常处自动 区域4: 断点调试器
Break Point 与 Watch
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值
