Dev Helper
ID
kbbgddcndpjnadfacanamniaomcohlcc应用截图
详细介绍
Dev Helper
Dev Helper 是一款适用于 Google Chrome 的一体化开发和性能分析扩展程序,具有以下功能:
- 分析网页性能并绘制图表,按域名显示所有资源的加载时间(包括收到第一个字节所需的时间)。
- 设置重写规则以覆盖请求和响应网址,让开发者无需实际部署新代码即可进行测试。
开发者可以覆盖、添加或替换请求头和响应头,以测试不同场景。例如,在响应头部分添加“Access-Control-Allow-Origin: *”可以解决跨域脚本阻止问题。
另一种用法是用本地副本替换资源或脚本(JavaScript 和 CSS)。这样开发者无需部署即可修改并测试功能。
1. 从 Chrome 应用商店安装扩展程序。
2. 打开页面源代码,找到想要重写的 script 标签。
3. 复制代码并将其托管在本地。
4. 设置重写规则,从本地 Web 主机加载此文件。
注意:请记住,匹配网址实际上是一个正则表达式,因此任何正则表达式字符都应转义!
例如,如果您想匹配 http://mysite.com/global.js?version=1 并将其重定向到 http://localhost?version=1,
可以这样做:
匹配网址:http:\/\/mysite\.com\/global.js?(.*)
替换网址:http://localhost?($1)
$1 会在替换网址中使用原始网址的查询字符串参数替换所有查询字符串参数。
- 设置重写规则,从不同位置加载资源。
例如,开发者可以编写正则表达式模式,匹配正在开发的特定网站上的所有 JavaScript 文件,并从本地主机加载它们。这样就可以实时进行开发,并在部署到生产环境之前测试新功能。此方法也有助于调试生产环境中的问题。
示例:如果开发者想测试新代码对生产网站 http://www.mysite.com 的影响,而所有 JavaScript 均来自 http://mysite.com/scripts/all_java_script.js 文件,则可以编写一条规则,匹配“http://mysite.com/scripts/all_java_script.js”,并从本地主机“http://localhost/all_java_script.js”加载它。
- 设置与不同正则表达式模式匹配的代理规则。
开发者可以为不同代理规则编写不同的匹配模式。
- 脚本注入,可向网站添加新的 CSS 或 JavaScript 以供测试。
详细使用说明和示例见:https://www.toni-develops.com/a-homepage-section/projects/using-dev-helper-chrome-extension-for-local-development/