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

Bug 与 Debug

前端 Debug 特点

• 多平台
  • 浏览器、Hybrid、NodeJs、小程序、桌面应用等
• 多环境
  • 本地开发环境、线上环境
• 多工具
  • Chrome devTools、Charles、Spy-Debugger、Vhistle、vConsole ...
• 多技巧
  • Console、BreakPoint、sourceMap、代理 ...

Chrome DevTools

这里相信大家主要的都会，这里主要介绍一些平时用的不多的

Console

• console.dir
  • 通过类似文件树的方式展示对象的属性
• 
  • 这里的 $0是可以直接在控制台打印的

Sources Tab

浏览器调试按钮图解

按钮的快捷键 及 作用

Debugger(调试面板)

• F8 or Ctrl + : 暂停/继续
• F10 or Ctrl + ': 单步执行
• F11 or Ctrl +;: 单步进入
• Shift + F11 or Ctrl + Shift+;: 单步退出
• Ctrl +./Ctrl+, : 上一帧/下一帧(译为框架怪怪的)
• Ctrl +Shift+E: 被选中代码在控制台中打印出console信息**(非常实用)**
• Ctrl + Shift + A: 添加到debugger的watch里面,可以关注你选中内容的变化
• Ctrl + B: 打断点/取消断点**(很实用)**

闭包参考链接 调用栈

压缩后的代码如何调试

什么是SourceMap

• 一般来说线上的js代码经过合并压缩成一行，这样会导致生产环境产生js错误的时，浏览器报出的错误行号，列号是没办法直接映射到源码错误的原来位置的。同时压缩代码的变量以及函数名称都会变换，给开发者排查、Debug JS错误增加了难度。
• sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。
• SourceMap 一个存储源代码与编译代码对应位置映射的信息文件,实际上就是一个 JSON 键值对，利用 VLQ编码与特定的规则存储位置信息。这里面的逻辑有兴趣的可以看看阮老师的这篇文章《 JavaScript Source Map 详解 》

Performance

调试Demo

Lighthouse

使用lighthouse来进行性能分析 点击右侧analyse 衡量性能的核心web指标

• LCP 最大内容绘制 <=2.5s
• FID 首次输入延迟 <=100ms
• CLS 累计布局偏移 <=0.1

当性能不符合预期，其会提供优化手段

移动端 H5 调试

真机调试

ios

1. 使用Lightning数据线将iPhone与Mac相连
2. iPhone开启web检查器
3. iPhone使用safari浏览器打开要调试的页面
4. Mac打开safari浏览器调试
5. 在弹出的safari developer tools中调试

没有 iphone 设备，可以使用 ios 模拟器

Android

1. 使用USB数据线将手机与电脑连接
2. 手机进入开发者模式，勾选USB调试，并允许调试
3. 电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices 并勾选Discover USB device选项
4. 手机允许远程调试，并访问调试页面
5. 电脑点击inspect按钮
6. 进入调试界面

VConsole

github.com/Tencent/vCo…

代理工具调试

默认情况下，Charles 无法抓取到 HTTPS 的请求，需要安装证书

Nodejs调试

Inspector Protocol +Chrome Devtool

1. 执行命令 node --inspect=8888 index.js
2. chrome浏览器访问服务
3. 点击绿色node图标打开node调试面板
4. 在node调试面板中使用断点调试

Inspector Protocol+VS code

vscode Debug

线上即时修改 Override

本地 source Map

线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 Source Map 文件。