Question

在我的制作网站上，我编译了Javascript。

<script src="/js/mycode.min.js"></script>

如果我可以使用

替换它，那将是非常方便的调试

<script src="http://localhost/js/mycode1.js"></script>
<script src="http://localhost/js/mycode2.js"></script>
...

我知道我可以使用像Greasemonkey用户脚本这样的东西来操纵DOM，但我无法想出一个可以阻止执行“mycode.min.js”的解决方案。

有什么想法吗？

Answer 1

我的方式：

如果您使用的是Windows，请下载并安装Fiddler。
启用它以捕获http流量[IE / Chrome默认执行此操作，Firefox - 通过添加安装启用它]
加载相关页面。
在左侧的http流量列表中找到要替换的文件，然后单击它。
右侧有一个AutoResponder选项卡。点击它。
点击“启用自动回复”复选框
点击添加..按钮
右侧第二个下拉列表，选择“查找文件”
在对话框中找到该文件，然后点击保存
重复步骤4-9，直到替换所有要替换的文件
刷新浏览器窗口并运行新的js文件

您可以替换html文件并更改页面上的js链接，而不是替换js文件。

如果您使用的是mac / linux，则可以安装Charles。（不是免费的，有审判）步骤类似，但不一样。

如果您使用Google Closure压缩文件，则可以安装其插件来执行source mapping。

Answer 2

如何将http://static.example.com这样的子域用于静态文件（例如.js文件），并更改主机文件呢？

<script type="text/javascript" src="http://static.example.com/js/mycode.min.js"></script>

将以下行添加到主机文件（Linux的/etc/hosts，C:\WINDOWS\System32\drivers\etc\host）：

static.example.com 127.0.0.1

当然，您必须在http://static.example.com/上运行包含127.0.0.1文件的服务器。

另一种解决方案是使用像Privoxy这样的（本地）代理服务器将http://example.com/js/重定向到http://localhost/js/。

Answer 3

要添加新文件，您可以使用其他帖子之一：

document.body.appendChild(document.createElement("script").src = "http://example.com/addThisJSFile.js");

此tampermonkey脚本可以替换网页上的任何JS文件，并使用域中的自定义文件：

// ==UserScript==
// @name         ReplaceJS
// @namespace    http://example.com/
// @version      1.0.0
// @description  Replace javascript files on any webpage!
// @author       Mr.Sonic Master
// @match        *
// @run-at       document-start
// ==/UserScript==

var newJSFile = "http://example.com/newJSFile.js"; //The JS file to load in replacment od old JS file

var oldJSFile = "oldJSFile.replaceThis.js"; //The old JS file as it is named in inspect element (make sure its spelled EXACTLY the same)

var pattern = new RegExp(oldJSFile, "i"); //Create the RegExp pattern with the /i switch to make it case-insensitive

function injectScript(originalPage) { //Function injectScript replaces the file
    console.log('Replace stage 2: Replace text matching', oldJSFile, 'with', newJSFile);
    var moddedPage = originalPage.replace(pattern, newJSFile); //Modify the HTML code that we got, replacing the old JS file with the new one
    document.open();
    console.log('Replace stage 3: Write new HTML to page...');
    document.write(moddedPage); //Write to the page the new HTML code
    document.close();
}

setTimeout(function() { //Wait a bit for the page's HTML to load...
    console.log('Replace stage 1: target HTML');
    injectScript(document.documentElement.outerHTML); //Run function injectScript with the page's HTML as oldPage in the function
}, 1111);

Answer 4

假设您的脚本只是生产文件的原始版本，您可以破解打开您喜欢的调试器或JS控制台并导入脚本：

document.body.appendChild(document.createElement("script")).src = 
    "http://localhost/js/mycode1.js";

这样做会覆盖最初定义的函数和变量。您必须手动重新运行window.onload。如果您有立即运行的脚本或在页面上发生更改的负载，您可能需要做一些工作才能使其恢复到原始状态。

祝你好运！

Answer 5

虽然epascarello的解决方案有效，但是对于缩小文件调试有一个更快的解决方案。考虑使用JavaScript source maps。现代Firefox和Chrome支持它们。

源映射的想法是说浏览器在哪里可以找到未经说明的版本。当您在浏览器开发人员工具中开始调试时 - 浏览器会加载未经编辑的脚本版本，并向您显示调试器中易于阅读的JavaScript（或您编译为JavaScript的任何代码）代码。

Answer 6

在不使用任何 web 代理的情况下，chrome 功能可用于对 js 和 css 文件应用本地覆盖 https://developer.chrome.com/blog/new-in-devtools-65/#overrides

Answer 7

在您的网址中添加内容，以区分您的开发和生产环境; 例如： http://url_of_prod.com

http://url_of_dev.com?debug=true

然后，使用一些javascript来检查GET变量调试是否为ON或者检查URL是否为 if（window.location.host.indexOf（'url_of_dev'）＆gt; -1）......

然后使用加载函数加载或不加载文件，如下例所示： http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/

如何用本地Javascript替换生产网站的Javascript？

7 个答案: