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