有没有办法改变 chrome 中的 <script src=??> url 值并重新加载页面？答案

【问题标题】：Is there a way to change <script src=??> url value in chrome and reload page?有没有办法改变 chrome 中的 <script src=??> url 值并重新加载页面？
【发布时间】：2018-03-13 21:36:54
【问题描述】：

我有一个 js 文件，在我的 html 代码中使用如下：

<script src="//some-website/files/CURRENT_JS_FILE.js" async></script>

我没有 QA 环境，也没有能力在生产中更改 html 代码

我想测试我更新的js代码如下：

1) 检查 html
2) 更新源文件url：

<script src="//some-website/files/NEW_JS_FILE.js" async></script>

3) '软' 刷新页面以在本地测试（重新加载页面，但使用新的 js 文件 url）

有没有办法做到这一点？我尝试了以下没有好的结果：

1) 更新src url，按刷新（按预期刷新整个页面和src url）

2) 按CMD+P，打开有问题的JS文件，更新代码，保存；再次刷新但不行。

【问题讨论】：

尝试硬重新加载？
你能创建任何使用该文件的页面，然后将其命名为不同的名称，这样你就可以在不破坏产品的情况下更改页面上的内容
设置wireshark拦截流量:)
@TricksfortheWeb 什么是“硬”重载？
你读过this question吗？

标签： javascript html google-chrome google-chrome-devtools

【解决方案1】：

我以前也是这样的：

转到您的网页
查看源代码
将其复制并粘贴到新的 file.html 或本地的任何内容中

如果这向您展示了“正确”的页面设计，那么现在您可以以同样的方式复制/粘贴您的 js 文件，在您的 file.html 中更改 js 的导入并尝试一下

【讨论】：

我最终使用了 resourceoverride chrome 扩展，但这种方法也可以。

【解决方案2】：

是的。使用Local Overrides。

转到chrome://version。确保您拥有 Chrome 65（引入该功能时）。
打开来源面板。
打开覆盖标签。
单击选择要覆盖的文件夹。
选择一个目录，然后单击允许，授予 DevTools 对该目录的读写权限。
在 Sources 面板中编辑您的 HTML 文件。不是元素面板。按 Cmd+S 或 Ctrl+S 保存更改。
重新加载页面。 DevTools 提供您刚刚修改的文件的本地版本，而不是网络版本。

【讨论】：

谢谢，我最终使用了 Resource Override chrome 扩展，它也能正常工作。

【解决方案3】：

您也可以使用eval 和XMLHttpRequest。但是如果你用那种方式，你就不能用document.currentScript。

<script src="/your-source.js" id="script-characteristic"></script> 
<!-- Set after loading -->
<script>
var scriptElement = document.getElementById("script-characteristic");
if (scriptElement.innerHTML != "") {
    eval(scriptElement.innerHTML);
} else if (scriptElement.src && scriptElement.src != "") {
    var scriptRequest = new XMLHttpRequest()
    scriptRequest.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            eval(this.responseText);
        }
    }
    scriptRequest.open("GET",scriptElement.src,true);
    scriptRequest.send();
}
</script>

【讨论】：