在我的生产网站上，我已经编译了 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”执行的解决方案。
有什么想法吗？
【问题讨论】：
标签： javascript debugging
对于静态文件（例如 .js 文件）使用像 http://static.example.com 这样的子域并更改主机文件怎么样？
<script type="text/javascript" src="http://static.example.com/js/mycode.min.js"></script>
将以下行添加到主机文件（/etc/hosts for Linux，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/。
【讨论】：
我的做法：
不用替换js文件，你可以替换html文件，改变页面上的js链接。
如果您使用的是 mac/linux，则可以安装 Charles。 （不是免费的，有试用版） 步骤类似，但不一样。
如果你使用 Google Closure 来压缩文件，你可以安装他们的插件来做source mapping。
【讨论】：
假设您的脚本只是生产文件的原始版本，您可以打开您喜欢的调试器或 JS 控制台并导入您的脚本：
document.body.appendChild(document.createElement("script")).src =
"http://localhost/js/mycode1.js";
这样做会覆盖原来定义的函数和变量。您必须手动重新运行window.onload。如果您的脚本可以立即运行或在加载时在页面上发生很大变化，您可能需要做一些工作才能将其恢复到原始状态。
祝你好运！
【讨论】：
虽然 epascarello 的解决方案有效，但对于缩小文件的调试，还有一个更快的解决方案。考虑使用JavaScript source maps。现代 Firefox 和 Chrome 支持它们。
source map 的想法是告诉浏览器在哪里可以找到未缩小的版本。当您在浏览器开发人员工具中开始调试时 - 浏览器会加载未缩小版本的脚本，并在调试器中向您显示易于阅读的 JavaScript（或您编译为 JavaScript 的任何代码）代码。
【讨论】：
要添加 NEW 文件，您可以使用其他帖子中的内容：
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);
【讨论】：
在您的 URL 中添加一些内容以区分您的开发和产品上下文； 例子 ： http://url_of_prod.com
http://url_of_dev.com?debug=true
然后，使用一些 javascript 检查 GET 变量调试是否打开或检查 URL
if (window.location.host.indexOf('url_of_dev') > -1) ...
然后使用加载函数加载或不加载您的文件，如下例所示： http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/
【讨论】：
无需使用任何低于 chrome 的 Web 代理功能，即可对 js 和 css 文件应用本地覆盖 https://developer.chrome.com/blog/new-in-devtools-65/#overrides
【讨论】：