ResourceOverride
使用场景:
-
调试线上JS代码:在需要紧急调试环境中的JavaScript代码时,可以使用这个插件来覆盖线上的JS文件,实现快速调试。
-
重定向特定URL地址:将网页的JS文件替换为自己的版本,或者需要测试不同版本的资源,实现URL的重定向。
-
注入JS或CSS文件:注入自定义的JavaScript或CSS文件,从而修改网页的行为或样式。
-
修改请求头:在开发过程中,需要修改HTTP请求头以包含授权信息或其他自定义数据
-
优化网页资源加载:可以利用这个插件将线上资源重定向到本地,进行本地开发和调试,优化资源加载过程。
-
动态编辑和注入代码:在生产环境中调试网站时,允许用户动态编辑和注入代码,而无需重新扫描压缩后的代码。
Url->Url
在 Resource Override 插件中,“url” 通常指的是网页资源的地址链接,这个地址链接可以是指向静态资源(如JavaScript文件、CSS文件、图片等)的URL,也可以是指向动态内容的API请求的URL。使用 Resource Override 插件时,“url” 相关的操作可能包括:
-
重定向URL:将线上的资源URL重定向到本地的资源,这样浏览器就会加载本地的文件而不是线上的文件。这通常用于本地开发和调试。
-
修改请求URL:在开发过程中,可能需要修改请求的URL,比如更改API的基础路径或测试不同的服务器地址。
-
使用正则表达式匹配URL:Resource Override 插件可能支持使用正则表达式来匹配和修改URL,提供更灵活的资源覆盖和重定向功能。
Url->File
在 Resource Override 插件中,使用 “url” 和 “file” 这两个概念通常与资源的重定向和覆盖有关。
-
重定向到文件:你可以将一个线上资源的URL重定向到本地的文件。例如,如果你想要覆盖一个线上的JavaScript文件,你可以将该文件的URL指向你电脑上的对应文件。
-
使用文件覆盖资源:在浏览器的开发者工具中,你可以为特定的资源设置一个覆盖,这意味着当浏览器请求该资源时,它会加载你指定的本地文件而不是线上的资源。
Change Headers
在使用 Resource Override 插件时,“change headers”(修改请求头)是一个重要的功能,它允许用户修改HTTP请求或响应头,以适应不同的开发和调试需求。
-
修改请求头:在开发过程中,有时需要在请求中添加或修改特定的HTTP头部,例如添加自定义的认证令牌或API密钥。
-
模拟不同的用户代理:通过修改User-Agent头部,可以模拟不同浏览器或设备的请求,这对于测试网页在不同环境下的表现非常有用。
-
修改响应头:除了请求头,有时也需要修改响应头,比如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