前端调试三大利器：1. ResourceOverride 2. React DevTool 3. Chrome DevTool breakpoint debugger

ResourceOverride

使用场景：

1. 调试线上JS代码：在需要紧急调试环境中的JavaScript代码时，可以使用这个插件来覆盖线上的JS文件，实现快速调试。

2. 重定向特定URL地址：将网页的JS文件替换为自己的版本，或者需要测试不同版本的资源，实现URL的重定向。

3. 注入JS或CSS文件：注入自定义的JavaScript或CSS文件，从而修改网页的行为或样式。

4. 修改请求头：在开发过程中，需要修改HTTP请求头以包含授权信息或其他自定义数据

5. 优化网页资源加载：可以利用这个插件将线上资源重定向到本地，进行本地开发和调试，优化资源加载过程。

6. 动态编辑和注入代码：在生产环境中调试网站时，允许用户动态编辑和注入代码，而无需重新扫描压缩后的代码。

Url->Url

在 Resource Override 插件中，“url” 通常指的是网页资源的地址链接，这个地址链接可以是指向静态资源（如JavaScript文件、CSS文件、图片等）的URL，也可以是指向动态内容的API请求的URL。使用 Resource Override 插件时，“url” 相关的操作可能包括：

1. 重定向URL：将线上的资源URL重定向到本地的资源，这样浏览器就会加载本地的文件而不是线上的文件。这通常用于本地开发和调试。

2. 修改请求URL：在开发过程中，可能需要修改请求的URL，比如更改API的基础路径或测试不同的服务器地址。

3. 使用正则表达式匹配URL：Resource Override 插件可能支持使用正则表达式来匹配和修改URL，提供更灵活的资源覆盖和重定向功能。

Url->File

在 Resource Override 插件中，使用 “url” 和 “file” 这两个概念通常与资源的重定向和覆盖有关。

1. 重定向到文件：你可以将一个线上资源的URL重定向到本地的文件。例如，如果你想要覆盖一个线上的JavaScript文件，你可以将该文件的URL指向你电脑上的对应文件。

2. 使用文件覆盖资源：在浏览器的开发者工具中，你可以为特定的资源设置一个覆盖，这意味着当浏览器请求该资源时，它会加载你指定的本地文件而不是线上的资源。

Change Headers

在使用 Resource Override 插件时，“change headers”（修改请求头）是一个重要的功能，它允许用户修改HTTP请求或响应头，以适应不同的开发和调试需求。

1. 修改请求头：在开发过程中，有时需要在请求中添加或修改特定的HTTP头部，例如添加自定义的认证令牌或API密钥。

2. 模拟不同的用户代理：通过修改User-Agent头部，可以模拟不同浏览器或设备的请求，这对于测试网页在不同环境下的表现非常有用。

3. 修改响应头：除了请求头，有时也需要修改响应头，比如Content-Type，以确保资源被浏览器正确解析。

注意事项

• Resource Override 插件只能修改客户端加载的资源，不能修改服务器端的逻辑。
• 使用插件时需谨慎，特别是在处理敏感信息时，确保替换的内容安全无误。
• 有时候可能需要清理浏览器缓存以确保替换规则生效。

React DevTool

https://juejin.cn/post/6877546408925200391

Chrome DevTool breakpoint debugger

https://juejin.cn/post/7301472893114892297?searchId=20240827205203FB7347A3556FE8036939

【chrome断点调试技巧【渡一教育】】 https://www.bilibili.com/video/BV1jc411c7G4/?share_source=copy_web&vd_source=bf005d0d0ad6ce1c53742985c3786c8e

参考文章

http://t.csdnimg.cn/YWLCa