Web 调试技术 | 青训营笔记

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

0x1 Bug 与 Debug

1. Bug 的产生
2. 前端 Debug 的特点
   • 多平台
     • 浏览器、Hybrid、Node.js、小程序……
   • 多环境
     • 本地、线上
   • 多工具
     • Chrome DevTools、Whistle……
   • 多技巧
     • Console、Breakpoint……

0x2 Chrome DevTools

1. 动态修改元素和样式

   1. 选择.cls开启动态修改元素的 class

   2. 输入字符串可以动态该元素添加类名

   3. 点击具体样式值可以编辑并实时预览

   4. Computed 下点击样式里的箭头可以跳转带 styles 面板中的 css 规则

   可以用以下方式强制激活伪类：

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

2. Console

   • console.log：一般输出
   • console.warn：警告输出
   • console.error：报错输出
   • console.debug：调试输出
   • console.info：信息输出
   • console.table：具象化的展示 JSON 和数组数据
   • console.dir：通过类似文件树的方式展示对象的属性
   • 占位符：给日志添加样式，可以突出重要信息
     • %s：字符串占位符
     • %o：对象占位符
     • %c：样式占位符
     • %d：数字占位符

3. Sources

   • 页面资源文件树

   • 代码预览区域

   • Debug 工具栏

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

   • 断点调试器

   1. Breakpoint 和 Watch

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

   2. Scope 与 Call Stack

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

   3. 查看压缩后的代码

      webpack、UglifyJS、terser

   4. Source Map

      mappings 字段存储了源文件和 Source Map 的映射

      • 英文标识源码及压缩源码的位置关联
      • 逗号分隔一行代码中的内容
      • 分号代表换行

4. Network

   • 控制面板
   • 过滤面板
   • 概览区域
   • Request Table
   • 总结面板
   • 请求详情面板

5. Application

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

   • Local Storage

   • Session Storage

   • IndexedDB

   • Web SQL

   • Cookie

   点击左侧 Application 下的 Stroage 面板中的 Clear Site Data 可以清楚网页的本地存储数据

6. Performance

   • 控制面板
   • 概览面板
     • FPS：每秒帧数
     • CPU：处理各个任务花费的时间
     • NET：各个请求花费的时间
   • 线程面板
     • Frames：帧线程
     • Main：主线程
     • Raster：Raster 线程
   • 统计面板

   Performance 运用实例

7. Lighthouse

   核心 Web 指标：LCP、FID、CLS

   1. Largest Contentful Paint：最大内容绘制，测试加载性能，应低于 2.5s
   2. First Input Delay：首次输入延迟，测试交互性，应低于 100ms
   3. Cumulative Layout Shift：累计布局偏移，测试视觉稳定性，低于 0.1

0x3 移动端 H5 调试

1. 真机调试

   1. iOS

      1. 使用 Lighting 数据线将 iPhone 与 Mac 连接

      2. iPhone 开启 Web 检查器（设置>Safari>高级>开启 Web 检查器）

      3. iPhone 使用 Safari 浏览器开启需要调试的页面

      4. Mac 打开 Safari 浏览器调试（菜单栏>开发>iPhone 设备名>选择调试页面

      5. 在弹出的 Safari Developer Tools 中调试

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

   2. Android

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

2. vConsole

3. 使用代理工具调试

   原理：

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

   以 Charles 为例：

   1. 安装 Charles

   2. 查看电脑 IP 和端口

   3. 将 IP、端口号填入 HTTP 代理

   4. Charles 允许授权

   5. 使用 SwitchHouse! 软件给 Mac 电脑配 Hosts

   6. 手机访问开发环境页面

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

4. 常用代理工具

   1. Charles：适合查看、控制网络请求，分析数据
   2. Fiddler：与 Charles 类似，适合 Windows 系统
   3. spy-debugger：远程调试手机页面，抓包
   4. Whistle：基于 Node.js 实现的跨平台 Web 调试代理工具

0x4 Node.js 调试

1. Inspector Protocol + Chrome DevTool
   1. 执行命令node --inspect=8888 index.js
   2. Chrome 浏览器访问服务
   3. 单击绿色 Node 图标打卡 Node.js 调试面板 （在 chrome://inspect/#devices 中配置 network target）
   4. 在 Node 调试面板中使用断点调试
2. Inspector Protocol + VSCode

0x5 常用开发调试技巧

1. 线上即时修改 Overrides

   1. 打开 Sources 面板下的 Overrides
   2. 点击 Select folders for Overrides 选择一个本地空文件夹目录
   3. 允许授权
   4. 在 Page 中修改代码并保存
   5. 打开 DevTools，点击右上角的 ···>More tools>Changes 就能看到使所有更改

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

3. 启用本地 Source Map

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

4. 使用代理工具 Mock 数据

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

5. 小黄鸭调试大法（:exclamation:最高效的方法:exclamation:）

   1. 将便携的小黄鸭放在桌面上
   2. 向伟大的小黄鸭解释每行代码
   3. 神奇的小黄鸭会用量子力学等手段将解决方法传入到脑中，使问题得到解决
   4. 最后，快说谢谢小黄鸭