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

重点内容

• Elements
• Console
• Source
• Performance
• Network
• 真机调试
• 代理调试
• 常用工具

Bug 与 Debug

Bug 的产生

前端 Debug 的特点

1. 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
2. 多环境：本地开发环境、线上环境
3. 多工具：Chrome DevTools、Charles、Spy-Debugger、Whistle、VConsole等
4. 多技巧：Console、BreakPoint、sourceMap、代理

Chrome DevTools

动态修改元素和样式

• 点击 .cls 开启动态修改元素的 class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
• Computed 下点击样式里的箭头可以跳转到 styles 面板中的css规则
• 可以使用以下2种方式强制激活伪类
  • 选中具有伪类的元素，点击 hov
  • DOM 树右键菜单，选择 Force State

Console

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.table
  • 具象化的展示 JSON 和数组数据
• console.dir
  • 通过类似文件树的方式展示对象的属性
• 占位符
  • 给日志添加样式，可以突出重要的信息
  • %s：字符串占位符
  • %o：对象占位符
  • %c：样式占位符
  • %d：数字占位符
• 左侧可以选择等级，对日志进行分类查看

Sorce Tab

• 区域1：页面资源文件目录树
• 区域2：代码预览区域
• 区域3：Debug 工具栏
  • 暂停（继续）
  • 单步跳过
  • 进入函数
  • 单步执行
  • 激活（关闭）所有断点
  • 代码执行异常处自动
• 区域4：断点调试器

Break Point 与 Watch

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

Scope 与 Call Stack

• 展开Scope可以查看作用域列表（包含闭包）
  • 闭包参考
• 展开Call Stack可以查看当前JavaScript代码的调用栈
  • 调用栈参考

压缩后的代码如何调试？

前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'等替换，整体变得不可阅读

• mappings字段存储了源文件和Source Map的映射
  • 英文，表示源码及压缩代码的位置关联
  • 逗号，分隔一行代码中的内容
  • 分号，代表换行
• 映射
• Source Map 标准

NetWork

• 区域1：控制面板
• 区域2：过滤面板
• 区域3：概览区域
• 区域4：Request Table 面板
• 区域5：总结面板
• 区域6：请求详情面板

Application

• Application 面板展示与本地存储相关的信息
  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie
• 点击左侧 Application 下的 Storage 面板中的 Clear Site Data 可以清除网页的本地存储数据

Performance

• 区域1：控制面板
• 区域2：概览面板
  • FPS：每秒帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费时间:
• 区域3：线程面板
  • Frames：帧线程
  • Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制
  • Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制
• 区域4：统计面板

• Performance 运用示例

Lighthouse

• 核心 Web 指标

• Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生
• First Input Delay（FID）：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短
• Cumulative Layout Shift（CLS）：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少

移动端 H5 调试

真机调试

iOS

1. 使用Lighting数据线将iPhone与Mac相连
2. iPhone开启Web检查器（设置->Safari->高级->开启Web检查器）
3. iPhone使用Safari浏览器打开要调试的页面
4. Mac打开Safari浏览器调试（菜单栏->开发->iPhone设备名->选择调试页面）
5. 在弹出的Safari Developer Tools中调试

• 没有iPhone设备可以在Mac AppStore 安装Xcode使用其内置的iOS模拟器

Android

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

• 直接使用手机扫码查看，体验更佳

VConsole

• 日志（Logs）：console.log|info|error|..
• 网络（Network）：XMLHttpRequest，Fetch，sendBeacon
• 节点（Element）：HTML节点树
• 存储（Storage）：Cookies，LocalStorage，SessionStorage
• 手动执行JS命令行
• 自定义插件

使用代理工具调试

• 原理：
  • 电脑作为代理服务器
  • 手机通过HTTP代码连接到电脑
  • 手机上的请求都经过代理服务器
• 以Charles为例：
  1. 安装Charles
  2. 查看电脑IP和端口
  3. 将IP、端口号填入手机HTTP代理
  4. Charles允许授权
  5. 使用SwitchHosts！软件给Mac电脑配Hosts
  6. 手机访问开发环境页面
• 默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书

常用代理工具

NodeJS调试

Inspector Protocol + Chrome DevTool

1. 执行命令 node --inspect=8888 index.js

2. Chrome浏览器访问服务

3. 点击绿色node图标打开node调试面板（在chrome://inspectnetwork/#devices 中配置network target）

4. 在node调试面板中使用断点调试

Inspector Protocol + VS Code

• VS Code点击运行
• 添加配置
• 启动调试
• 添加断点
• 查看变量、堆栈

常用开发调试技巧

线上即时修改 Overrides

1. 打开Sources面板下的Overrides
2. 点击Selector folders for Overrides。选择一个本地空文件夹目录
3. 允许授权
4. 在page中修改代码，修改完成后command + s 保存
5. 打开devTools，点击右上角的三个小点->More tools->Changes，就能看到所有修改了

利用代理解决开发阶段的跨域问题

启用本地 source map

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

使用代理工具 Mock 数据

1. 右键选择要mock数据的接口，选择save response，保存文件到本地
2. 本地打开保存的文件，编辑想mock的数据并保存
3. 右键选择第一步的接口，选择Map Local，Local Path选择第二步的文件

小黄鸭调试大法

传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。 -- 《程序员修炼之道》