前端开发调试知识 | 青训营笔记

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

前端 Debug 的特点

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

Chrome devTools

Elements

动态修改元素和样式

• 点击 .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:数字占位符

左侧可以选择等级，对日志进行分类查看

Sources

左侧区域:页面资源文件目录树
中间区域︰代码预览区域

右侧区域最前面的一行:Debug工具栏
从左到右依次为：

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

右侧区域下面部分：断点调试器

断点调试器下的 Break Point 与 Watch

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

断点调试器下的 Scope 与 Call Stack

展开 Scope 可以查看作用域列表(包含闭包)
闭包可参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

展开 Call Stack 可以查看当前 javaScript 代码的调用栈
关于调用栈可以参考：https://developer.mozilla.org/en-US/docs/Glossary/Call_stack

压缩后的代码如何调试?

前端代码天生具有"开源"属性，出于安全考虑,JavaScript 代码通常会被压缩，压缩后的代码只有一行,变量使用'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?

Source Map

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

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

映射见：https://www.murzwin.com/base64vlq.html

NetWork

• 第一行：控制面板
• 第二行：过滤面板
• 第三行：概览区域
• 第四大行左侧区域：Request Table面板
• 第四大行右侧区域：总结面板
• 最后一行：请求详情面板

Application

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

• Local Storage
• Session Storage
• IndexedDB
• web SQL
• Cookie 点击左侧 Application 下的 Stroage 面板中的 Clear Site Data 可以清楚网页的本地存储数据

Performance

第一行：控制面板

第二大行：概览面板

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

第三大行：线程面板

• Frames：帧线程
• Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制
• Raster：Raster 线程，负责完成某个 layer 或者某些块（title）的绘制
• 最下面一行：统计面板

示例：https://googlechrome.github.io/devtools-samples/jank/

Lighthouse

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

移动端 H5 调试

真机调试

iOS

1. 使用Lightning 数据线将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的请求，需要安装证书。

常用代理工具

• Charles : 适合查看、控制网络请求，分析数据
• Fiddler : 与 Charles 类似，适合 windows 平台
• spy-debugger : 远程调试手机页面，抓包
• Whistle : 基于 Node 实现的跨平台 Web 调试代理工具

NodeJS调试

Inspector Protocol + Chrome Devtool

• 执行命令node --inspect=8888 index.js
• chrome浏览器访问服务
• 点击绿色node图标打开node调试面板(在chrome://inspect/#devices 中配置network target)
• 在node调试面板中使用断点调试

Inspector Protocol + VS Code

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

常用开发调试技巧

线上即时修改Overrides

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

启用本地 source map

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

使用代理工具 Mock 数据的接口

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