这是我参与「第四届青训营 」笔记创作活动的第12天

Bug与Debug

Bug的产生

bug原意本来为昆虫的意思,1947年9月9日,葛丽丝·霍普(Grace Hopper)发现了第一个电脑上的bug。 当在Mark II计算机上工作时,整个团队都搞不清楚为什么电脑不能正常运作了。经过大家的深度挖掘,发现原来是一只飞蛾意外飞入了一台电脑内部而引起的故障。这个团队把错误解除了,并在日记本中记录下了这一事件。也因此,人们逐渐开始用“bug”来称呼计算机中的隐错。

前端Debug的特点

• 多平台

浏览器、Hybrid、 NodeJs、 小程序、桌面应用...

• 多环境

本地开发环境、线上环境

• 多工具

Chrome devTools. Charles 、Spy-Debugger 、Whistle、vConsole...

• 多技巧

Console、BreakPoint、 sourceMap、 代理...

Chrome DevTools

Elements

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则

Console

• console.log
• console.warn
• console.error
• console.debug
• console.info

• console.table

具像化的展示JSON和数组数据

• console dir

通过类似文件树的方式展示对象的属性

• 占位符

给日志添加样式，可以突出重要的信息

%s:字符串占位符； %0: 对象占位符； %c:样式占位符； %d:数字占位符

Sorce Tab

区域1:页面资源文件目录树

区域2:代码预览区域

区域3: Debug 工具栏 从左到右依次为

• 暂停(继续)
• 单步跳过
• 进入函数
• 跳出函数
• 单步执行
• 激活(关闭)所有断点
• 代码执行异常处自动

区域4:断点调试器

Break Point 与 Watch

• 使用关键字debugger或代码,预览区域的行号可以设置断点
• 执行到断点处时代码暂停执行
• 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
• 暂停状态下，鼠标hover变量可以查看变量的值
• 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值

Scope

展开Scope可以查看作用域列表(包含闭包)

Call Stack

展开Call Stack 可以查看当前JavaScript 代码的调用栈

Network

区域1:控制面板

区域2:过滤面板

区域3:概览区域

区域4: Request Table 面板

区域5:总结面板

区域6:请求详情面板

Application

Application面板展示与本地存储相关的信息:

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie