这是我参与「第四届青训营 」笔记创作活动的第8天
1.前端Debug的特点
-
多平台
- 浏览器、Hybrid、NodeJs、小程序、桌面应用等
-
多环境
- 本地开发环境、线上环境
-
多工具
- Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
-
多技巧
- Console、BreakPoint、sourceMap、代理
2.Chrome DevTools
2.1.动态修改元素样式
-
点击 .cls开启动态修改元素的class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态的查看类名生效效果
-
点击具体的样式值可以进行编辑，浏览器内容区域实时浏览
-
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
-
可以用以下两种方式强制激活伪类
- 选中具有伪类的元素，点击:hov
- DOM树右键菜单，选择Force State
2.2.Console
-
左侧可以选择等级，对日志进行分类查看
- console.log
- console.warn
- console.error
- console.debug
- console.info
-
console.table：具象化的展示JSON和数组数据
-
console.dir：通过类似文件树的方式展示对象的属性
-
占位符：给日志添加样式，可以突出重要的信息
- %s：字符串占位符
- %o：对象占位符
- %c：样式占位符
- %d：数字占位符
2.3.Sorce Tab
2.3.1.Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试期Watch右侧点击+可以添加对变量的监控，查看该变量的值
2.3.2.Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前JavaScript代码的调用栈
