这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

1.bug与Debug

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

有了“bug”，自然就有debug,Debugging/Debug，调试，又称除错，是发现和减少计算机程序或电子仪器设备中程序错误的一个过程。 DEBUG是一个DOS实用程序，是供程序员使用的程序调试工具，可以用它检查内存中任何地方的字节以及修改任何地方的字节。它可以用于逐指令执行某个程序以验证程序运行的正确性，也可以追踪执行过程、比较一个指令执行前后的值以及比较与移动内存中数据的范围，读写文件与磁盘扇区。——百度百科

前端Debug的特点

• 1.多平台（浏览器， Hybrid, NodeJS, 小程序, 桌面应用等）
• 2.多环境(本地开发环境， 线上开发环境)
• 3.多工具(Chrome DevTools, charles, spy-Debugger, Whistle, vConsole)
• 4.多技巧(Conosle, BreakPoint, sourceMap)

2.调试技术

2.1 Chrome DevTools

通过浏览器按F12

elements

console 控制台

• console.table 具象化的展示JSON和数组数据
• console.dir 通过类似文件数的方式展示对象
• 占位符给日志添加样式
  • %s:字符串占位符;
  • %o:对象占位符;
  • %c:样式占位符;
  • %d:数字占位符

console.log ( '%s %o, %c%s' , ' hello' , {name:"tome ' , age: 18}, 'font-size:24px; color:red' , 'welcome to bytedance! ' );

sources

performance