分享五个相当 nice 的 Chrome 调试工，只要你冲浪，绝对有你用得着的
与程序猿无关，只要你上网冲浪，绝对有你用着的一项。
功能
实现 录制、重播和分享 你在浏览器触发的行为
记录用户在浏览器中的操作，包括点击、输入、滚动等。
生成可交互的回放脚本，可以在 DevTools 中回放。
支持多种回放速度，方便开发者快速定位问题。
可以导出记录的数据，以便于分享和存档。
介绍和演示
Chrome 调试工具技巧 —— Record
入口
打开控制台 -> 更多 -> 更多工具 -> 记录器 -> 创建新录制 -> 开始录制-> 录制完成后 -> 重放/导入/导出
打开控制台：Mac 是 fn+f12，Windows 是 F12
使用场景
测试场景
不论是前端、后端还是测试同学，为了调试某个功能，很多时候都会进行不断地重复，特别是填写长表单的场景，这就非常有用了，可以先将前面重复的部分录制下来，然后进行重播就可一键完成重复部分。
复现 bug 场景
有时候用户或者测试同学发现了某个 bug，但开发同学无法快速复现，此时就可以让其将复现的步骤记录下来，然后导出共享，开发者再将其导入就可以快速地进行复现了。
导出可以选择 json 等格式，导入的时候会直接进行识别的
重复步骤场景
要执行某个重复步骤时，比如要重复填写内容，大部分信息都是相同的，只有少部分不同，而一般提交后就需要重新填写了，那么就可以将相同的这部分进行录制，然后每次重新填写时就可以重播然后一键快速填写了。
当然，还有一个妙用，必须需要在某一时刻点然后填个人信息啥的，这时候用这个不比你手快？不能讲明了😄😄😄
Rfc: https://github.com/ChromeDevTools/rfcs/discussions/4
功能
本地修改、覆盖、重写 HTTP 请求响应头
自定义 HTTP 响应头：允许开发者在不修改服务器端代码的情况下，修改或添加 HTTP 响应头。
本地调试：在本地环境中模拟服务器端的响应头设置，方便调试和测试。
临时修改：覆盖的响应头仅在当前浏览器会话中生效，不会影响其他用户和环境。
演示
Chrome 调试工具技巧 —— Override HTTP Response Header
入口
打开控制台 -> 网络 -> 对应请求 -> 右键 -> 替换标头 -> 添加/修改标头
使用场景
跨域调试
在开发过程中，可能会遇到跨域资源请求的问题。通过覆盖服务器返回的 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 数据的请求和响应。
拦截并模拟 API 请求：在网络请求过程中拦截或模拟 API 请求，并返回自定义的响应数据。
覆盖文件内容：修改页面中的 JavaScript、CSS 或其他文件内容，以便在本地环境中测试不同的代码实现。
演示
Chrome 调试工具技巧 ——Mock API
入口
打开控制台 -> 网络 -> 对应请求 -> 右键 -> 替换内容 -> 添加/修改响应体
使用场景
Mock API
在开发过程中，API 滞后或 API 数据错误等情况一直存在，因此出现了大量的插件来实现 Mock，现在浏览器自己实现了，真香。
离线开发与测试
在没有网络连接或服务器环境的情况下，通过覆盖文件内容和拦截 API 请求，可以在本地环境中进行开发和测试。
临时修改
在调试过程中，可能需要尝试修改页面中的某些代码或样式。通过覆盖文件内容，可以在本地环境中进行临时修改，而不影响其他用户和环境。
调试第三方库
此功能可实现任何请求的响应修改，比如资源，当页面中引用了第三方库（如 jQuery、React 等），并且需要调试这些库的源代码时，可以使用覆盖文件内容的功能，在本地环境中修改和调试第三方库的源代码。
执行代码片段：编写完代码片段后，可在任意页面快速执行，不再需要手动在 Console 面板中输入。
导入和导出：支持将保存的代码片段导出为文件，或从文件导入代码片段，方便在不同环境和项目中共享和使用。
演示
Chrome 调试工具技巧 —— JS Snippets
入口
? 编写：打开控制台 -> 源代码/来源 -> 代码段 -> 新建（例如 cookies） -> 保存
? 执行：打开控制台 -> command+p -> !cookies -> 执行成功
常用代码片段
在开发和调试过程中，可能会经常使用一些特定的 JavaScript 代码片段。通过 Snippets 功能，可以将这些代码片段保存下来，方便日后快速使用。
调试辅助工具
可以编写一些调试辅助的 JavaScript 代码片段，用于在调试过程中提供额外的信息或功能。
举例：编写一个代码片段，用于在页面中高亮显示所有具有特定 CSS 类名的元素，方便在调试过程中定位这些元素。
代码片段共享
在团队协作过程中，可以通过导入和导出功能共享常用的 JavaScript 代码片段，提高团队的开发效率。
举例：将团队中常用的一些调试工具代码片段打包成文件，分享给团队成员使用。
临时代码测试
在编写和测试一段 JavaScript 代码时，可以将代码保存为 Snippet，方便在当前页面中多次执行和调试。
功能
模拟页面聚焦和失焦状态
概念可能有些模糊，别急，看下面视频，一下就清楚了
演示
Chrome 调试工具技巧 —— Emulate a focused page
入口
打开控制台 -> 更多 -> 更多工具 -> 渲染 -> 渲染面板 -> 开始录制-> 录制完成后 -> 重放/导入/导出
使用场景
前端仔调试
这个就不用说了吧
后台运行优化
当用户切换到其他标签页或最小化浏览器时，页面会进入失焦状态。此时，可以通过模拟失焦状态测试页面中的动画、定时器等是否正确暂停或降低运行频率，以减少后台资源消耗。
用户体验优化
在页面失焦状态下，可以测试页面中的音频、视频等是否正确暂停或静音，以避免在后台播放声音影响用户体验。
参考