这是我参与「第五届青训营 」笔记创作活动的第10天
一.Bug与 Debug
1. Bug 的产生
bug原意为昆虫的意思，1947年9月9日，发现了第一个电脑上的bug。当时正在计算机上工作时，整个团队都搞不清楚为什么电脑不能正常运作了。经过仔细查找，发现原来是一只飞蛾意外飞入了一台电脑内部而引起的故障（如图所示）。这个团队把错误解除了，并在日记本中记录下了这一事件。也因此，人们逐渐开始用“bug”来称呼计算机中的隐错。
2.前端 Debug 的特点
1.多平台: 浏览器、Hybrid、NodeJs、小程序、桌面应用等
2.多环境: 本地开发环境、线上环境
3.多工具: Chrome devTools、Charles、Spy-Debugger.Whistle、vConsole ...
4.多技巧: Console、BreakPoint、sourceMap、代理等
二.动态修改元素和样式
首先打开浏览器--->右键点击检查
elements: 可以看到网页对应的元素(如图所示)
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值 (字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles面板中的 css 规则
可以用以下 2 种方式强制激活伪类
- 选中具有伪类的元素，点击 :hov
- DOM 树右键菜单，选择 Force State
console: 日志
- console.logconsole.warn
- console.error
- console.debug
- console.info
- console.table 具象化的展示 JSON 和 数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息%s: 字符串占位符;%o: 对象占位符: %c: 样式占位符，%d: 数字占位符
sources
1.区域1:页面资源文件目录树
2.区域2: 代码预览区域
3.区域3: Debug 工具栏 从左到右依次为
暂停(继续)
单步跳过
进入函数
跳出函数
单步执行
激活(关闭) 所有断点代码执行异常处自动
4.区域4: 断点调试器
