这是我参与「第四届青训营 」笔记创作活动的第8天
一、重点内容
- 认识Debug
- 了解Chrome DevTools
二、详细知识点
前端Debug的特点
- 多平台
- 多环境
- 多工具
- 多技巧
Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度、高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素.点击：hov
- DOM树右键菜单.选择Force State
Console
- console.log
- console.error
- console.debug
- console.info
- console.table具像化的展示JSON和数组数据
- console.dir通过类似文件树的方式展示对象的属性
- 占位符
-
- 给日志添加样式，可以突出重要的信息
-
- %s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符
Sorce Tab
- 左侧：页面资源文件目录树
- 中间：代码预览区域
- 右侧上方：Debug工具栏从左到右依次为
-
- 暂停（继续）
-
- 单步跳过
-
- 进入函数
-
- 跳出函数
-
- 单步执行
-
- 激活（关闭）所有断点
-
- 代码执行异常处自动
- 右侧下方：断点调试器
Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前javaScript代码的调用栈
