直呼太有用了！五个 Chrome 调试工具技巧
导语｜分享五个相当 nice 的 Chrome 调试工具技巧，只要你冲浪，绝对有你用得着的。
本文作者：ardorzhang，腾讯IEG前端开发工程师
1. 记录器——Record
1. 功能
实现 录制、重播和分享 你在浏览器触发的行为
- 记录用户在浏览器中的操作，包括点击、输入、滚动等。
- 生成可交互的回放脚本，可以在 DevTools 中回放。
- 支持多种回放速度，方便开发者快速定位问题。
- 可以导出记录的数据，以便于分享和存档。
2. 演示
3. 入口
打开控制台 -> 更多 -> 更多工具 -> 记录器 -> 创建新录制 -> 开始录制-> 录制完成后 -> 重放/导入/导出
打开控制台：Mac 是 fn+f12，Windows 是 f12
4. 使用场景
- 测试场景
不论是前端、后端还是测试同学，为了调试某个功能，很多时候都会进行不断地重复，特别是填写长表单的场景，这就非常有用了，可以先将前面重复的部分录制下来，然后进行重播就可一键完成重复部分。
- 复现 bug 场景
有时候用户或者测试同学发现了某个 bug，但开发同学无法快速复现，此时就可以让其将复现的步骤记录下来，然后导出共享，开发者再将其导入就可以快速地进行复现了。
导出可以选择 json 等格式，导入的时候会直接进行识别的
- 重复步骤场景
要执行某个重复步骤时，比如要重复填写内容，大部分信息都是相同的，只有少部分不同，而一般提交后就需要重新填写了，那么就可以将相同的这部分进行录制，然后每次重新填写时就可以重播然后一键快速填写了。
2. 重写 HTTP 响应头
——Override HTTP response headers
Rfc: https://github.com/ChromeDevTools/rfcs/discussions/4
1. 功能
本地修改、覆盖、重写 HTTP 请求响应头
- 自定义 HTTP 响应头：允许开发者在不修改服务器端代码的情况下，修改或添加 HTTP 响应头。
- 本地调试：在本地环境中模拟服务器端的响应头设置，方便调试和测试。
- 临时修改：覆盖的响应头仅在当前浏览器会话中生效，不会影响其他用户和环境。
2. 演示
3. 入口
打开控制台 -> 网络 -> 对应请求 -> 右键 -> 替换标头 -> 添加/修改标头
4. 使用场景
- 跨域调试
在开发过程中，可能会遇到跨域资源请求的问题。通过覆盖服务器返回的 Access-Control-Allow-Origin 响应头，可以在本地环境中模拟跨域请求的行为。例如，将 Access-Control-Allow-Origin 设置为 *，以允许任何来源的请求访问资源，再也不用等待后端同学修改了，先本地修改调试着。
- 调试缓存策略
通过修改 Cache-Control、Expires 等响应头，可以在本地环境中测试不同的缓存策略。例如，将 Cache-Control 设置为 no-cache，以禁用浏览器缓存。
- 测试安全策略
覆盖服务器返回的安全相关响应头，如 Content-Security-Policy、Strict-Transport-Security 等，可以在本地环境中模拟不同安全策略的效果。例如，修改 Content-Security-Policy 以限制脚本的来源，测试网站在严格安全策略下的表现。
- 调试响应压缩
通过修改 Content-Encoding 响应头，可以在本地环境中测试不同的响应压缩算法（如 gzip、brotli 等）对性能的影响。例如，将 Content-Encoding 设置为 gzip，以模拟服务器端使用 gzip 压缩的情况。
- 自定义响应类型
通过修改 Content-Type 响应头，可以在本地环境中模拟不同类型的资源请求。例如，将 Content-Type 设置为 application/json，以模拟 JSON 数据的请求和响应。
3. 模拟API
—— Mock API & file Content
1. 功能
拦截并模拟 API 请求：在网络请求过程中拦截或模拟 API 请求，并返回自定义的响应数据。
覆盖文件内容：修改页面中的 JavaScript、CSS 或其他文件内容，以便在本地环境中测试不同的代码实现。
2. 演示
3. 入口
打开控制台 -> 网络 -> 对应请求 -> 右键 -> 替换内容 -> 添加/修改响应体
4. 使用场景
- Mock API
在开发过程中，API 滞后或 API 数据错误等情况一直存在，因此出现了大量的插件来实现 Mock，现在浏览器自己实现了，真香。
- 离线开发与测试
在没有网络连接或服务器环境的情况下，通过覆盖文件内容和拦截 API 请求，可以在本地环境中进行开发和测试。
- 临时修改
在调试过程中，可能需要尝试修改页面中的某些代码或样式。通过覆盖文件内容，可以在本地环境中进行临时修改，而不影响其他用户和环境。
- 调试第三方库
此功能可实现任何请求的响应修改，比如资源，当页面中引用了第三方库（如 jQuery、React 等），并且需要调试这些库的源代码时，可以使用覆盖文件内容的功能，在本地环境中修改和调试第三方库的源代码。
4. 模拟聚焦
——Emulate a focused page
1. 功能
模拟页面聚焦和失焦状态
概念可能有些模糊，别急，看下面视频，一下就清楚了
2. 演示
3. 入口
打开控制台 -> 更多 -> 更多工具 -> 渲染 -> 渲染面板 -> 勾选模拟所聚焦的网页
4. 使用场景
- 前端仔调试
这个就不用说了吧
- 后台运行优化
当用户切换到其他标签页或最小化浏览器时，页面会进入失焦状态。此时，可以通过模拟失焦状态测试页面中的动画、定时器等是否正确暂停或降低运行频率，以减少后台资源消耗。
- 用户体验优化
当用户切换到其他标签页或最小化浏览器时，页面会进入失焦状态。此时，可以通过模拟失焦状态测试页面中的动画、定时器等是否正确暂停或降低运行频率，以减少后台资源消耗。
5. JS 代码片段
—— JavaScript snippets
1. 功能
- 执行代码片段：编写完代码片段后，可在任意页面快速执行，不再需要手动在 Console 面板中输入。
- 导入和导出：支持将保存的代码片段导出为文件，或从文件导入代码片段，方便在不同环境和项目中共享和使用。
2. 演示
3. 入口
编写：打开控制台 -> 源代码/来源 -> 代码段 -> 新建（例如 cookies） -> 保存
执行：打开控制台 -> command+p -> !cookies -> 执行成功
4. 使用场景
- 常用代码片段
在开发和调试过程中，可能会经常使用一些特定的 JavaScript 代码片段。通过 Snippets 功能，可以将这些代码片段保存下来，方便日后快速使用。
- 调试辅助工具
可以编写一些调试辅助的 JavaScript 代码片段，用于在调试过程中提供额外的信息或功能。举例：编写一个代码片段，用于在页面中高亮显示所有具有特定 CSS 类名的元素，方便在调试过程中定位这些元素。
- 代码片段共享
在团队协作过程中，可以通过导入和导出功能共享常用的 JavaScript 代码片段，提高团队的开发效率。举例：将团队中常用的一些调试工具代码片段打包成文件，分享给团队成员使用。
- 临时代码测试
在编写和测试一段 JavaScript 代码时，可以将代码保存为 Snippet，方便在当前页面中多次执行和调试。
# 腾讯技术直播 #
腾讯工程师分享技术干货：
一键预约⬇️
往期文章：
设为星标，下次再见👋