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

Bug和Debug

// Debug是什么意思呢？Debug是一种程序，一种调试工具，也就是供程序员检查修改问题的工具。

Bug的产生

一位计算机科学家在调试程序时发生错误，拆开继电器后，发现是有只飞蛾夹在触点中间，于是她将程序故障称为“Bug（臭虫）”，把排除故障称为“Debug"，这也是世界上第一个Bug。

前端中Debug的特点

• 多平台
• 多环境
• 多工具
• 多技巧

Chrome DevTools

Elements

动态修改元素和样式

• 点击需修改的行，点击.cls
• 输入字符串可动态的给元素添加类名
• 勾选/取消框下方类名，可动态查看类名生效效果

• 点击具体样式值可进行编辑，并在浏览器页面实时预览

• 点击Computed下方样式里的箭头可跳转到styles面板中的css规则
  // 我调成中文了，下面截图中都是中文

强制激活伪类

• 选中具有伪类的元素，点击：hov
• DOM断点右键菜单，选择Force State

Console

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.table
• console.dir
• 占位符
• 可以通过以上方法向控制台输出信息和格式化字符串等

Source Tab

在Sources面板中，可以直接修改JS。主要是在设置断点(breakpoint)进行单步调试时使用。

NetWork

声明跟你路由器直接连接的网络。在这里可以查看http请求相关的东西，可以过滤请求、查看请求详情等等。

Application

展示与本地存储相关的信息。

Performance

可以查看到

• FPS：每秒帧数
• CPU：处理各任务花费的时间
• NET：各请求花费的时间

Lighthouse

可以看到各个任务花费的时间，并且给出时间建议。

移动端H5调试

真机调试

• 数据线连接电脑
• 开启USB调试功能
• 浏览器打开远程调试选项

代理调试

• 电脑作为代理服务器
• 手机通过HTTP代理连接到电脑
• 手机上任何请求都经过代理服务器

常用工具

• Charles
• Fiddler
• spy-debugger
• Whistle

Node.js调试

可用Chrome Devtool/VScode来调试
// 当然，我觉得最好用的就是小黄鸭，对着小黄鸭仔细讲解每行代码，很快就可以修复bug了。这方法简单易懂，值得一试