如何用本地 Javascript 替换生产网站的 Javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3936490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to replace Javascript of production website with local Javascript?
提问by Julius Eckert
On my production website, I have compiled Javascript.
在我的生产网站上，我已经编译了 Javascript。
<script src="/js/mycode.min.js"></script>
It would be very convient for debugging if I could make my browser replace that with
如果我可以让我的浏览器将其替换为
<script src="http://localhost/js/mycode1.js"></script>
<script src="http://localhost/js/mycode2.js"></script>
...
I know I could manipulate the DOM using something like Greasemonkey userscripts, but I couldn't come up with a solution which would prevent the execution of "mycode.min.js".
我知道我可以使用 Greasemonkey 用户脚本之类的东西来操作 DOM，但我无法想出一个解决方案来阻止“mycode.min.js”的执行。
Any ideas?
有任何想法吗？
回答by epascarello
The way I do it:
我这样做的方式：
- Download and install Fiddlerif you are on windows.
- Enable it to catch http traffic [IE/Chrome does it by default, Firefox - enable it through the add on it installs]
- Load up the page in question.
- Find the file you want to replace in the http traffic list on the left and click on it.
- On the right there is an AutoResponder tab. click on it.
- Click on the checkbox to "enable automatic responses"
- Click Add.. button
- The 2nd dropdown on right, choose the option that says "find a file"
- Locate the file in the dialog and click save
- Repeat steps 4-9 until you replace all the files you want to replace
- Refresh the browser window and your new js files are running
- 如果您使用的是 Windows ，请下载并安装Fiddler。
- 启用它以捕获 http 流量 [IE/Chrome 默认情况下会这样做，Firefox - 通过它安装的插件启用它]
- 加载有问题的页面。
- 在左侧的http流量列表中找到要替换的文件，点击即可。
- 右侧有一个 AutoResponder 选项卡。点击它。
- 单击复选框以“启用自动响应”
- 单击添加...按钮
- 在右侧的第二个下拉菜单中，选择“查找文件”选项
- 在对话框中找到该文件，然后单击保存
- 重复步骤 4-9，直到替换所有要替换的文件
- 刷新浏览器窗口，你的新 js 文件正在运行
Instead of replacing the js file, you can replace the html file and change the js links on the page.
除了替换js文件，你可以替换html文件，改变页面上的js链接。
You can install Charlesif you are on a mac/linux. (not free, has trial) Steps are similar, but not the same.
如果您使用的是 mac/linux，则可以安装Charles。（非免费，有试用） 步骤类似，但不一样。
If you are using Google Closure to compress files, you can install their plug-in to do the source mapping.
如果你使用Google Closure来压缩文件，你可以安装他们的插件来做源映射。
回答by Lekensteyn
What about using a subdomain like http://static.example.comfor static files (e.g. .js files), and changing the hostfile?
http://static.example.com对静态文件（例如 .js 文件）使用子域并更改主机文件怎么样？
<script type="text/javascript" src="http://static.example.com/js/mycode.min.js"></script>
Add the following line to the hostfile (/etc/hostsfor Linux, C:\WINDOWS\System32\drivers\etc\host):
将以下行添加到主机文件（/etc/hosts对于 Linux，C:\WINDOWS\System32\drivers\etc\host）：
static.example.com 127.0.0.1
Of course you've to run a server with the files from http://static.example.com/on 127.0.0.1.
当然，您必须使用来自http://static.example.com/on的文件运行服务器127.0.0.1。
Another solution is using a (local) proxy server like Privoxy for redirecting http://example.com/js/to http://localhost/js/.
另一种解决方案是使用像 Privoxy 这样的（本地）代理服务器来重定向http://example.com/js/到http://localhost/js/.
回答by Mr.Sonic
To add a NEWfile you can use something like one of the other post:
要添加新文件，您可以使用类似于另一篇文章的内容：
document.body.appendChild(document.createElement("script").src = "http://example.com/addThisJSFile.js");
This tampermonkey script can replaceany JS file on a webpage with your custom one from a domain:
这个 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);
回答by gilly3
Assuming your scripts are simply the raw version of the production file, you can just crack open your favorite debugger or JS console and import your scripts:
假设你的脚本只是生产文件的原始版本，你可以打开你最喜欢的调试器或 JS 控制台并导入你的脚本：
document.body.appendChild(document.createElement("script")).src =
"http://localhost/js/mycode1.js";
Doing so will overwrite the originally defined functions and variables. You'll have to manually re-run window.onload. If you have script that runs immediately or on load that changes much on the page, you may have some work to do to get it back to the original state.
这样做将覆盖最初定义的函数和变量。您必须手动重新运行window.onload. 如果您有立即运行或加载时在页面上发生很大变化的脚本，您可能需要做一些工作才能将其恢复到原始状态。
Good luck!
祝你好运！
回答by Anton Boritskiy
Though the epascarello's solution works, there is a quicker solution for the minified files debugging. Consider using JavaScript source maps. Modern Firefox and Chrome supports them.
尽管 epascarello 的解决方案有效，但对于缩小文件的调试有一个更快的解决方案。考虑使用JavaScript 源映射。现代 Firefox 和 Chrome 支持它们。
The idea of source map is to say browser where to find the unminified version. When you start the debugging in your browser developer tools - browser loads unminified version of the script and shows you the easy-to-read JavaScript (or whatever code you compiled to JavaScript) code in the debugger.
源地图的想法是说浏览器在哪里可以找到未缩小的版本。当您在浏览器开发人员工具中开始调试时 - 浏览器会加载脚本的未缩小版本，并在调试器中向您显示易于阅读的 JavaScript（或您编译为 JavaScript 的任何代码）代码。
回答by Ademus
Add something to your URL to distinguish between your dev and prod context ; example : http://url_of_prod.com
在您的 URL 中添加一些内容以区分您的开发和生产上下文；示例：http: //url_of_prod.com
http://url_of_dev.com?debug=true
http://url_of_dev.com?debug=true
and then, use some javascript to check if the GET variable debug is ON or NOT or check the URL with
if (window.location.host.indexOf(‘url_of_dev') > -1) ...
然后，使用一些 javascript 来检查 GET 变量 debug 是否开启或使用
if (window.location.host.indexOf('url_of_dev') > -1) ...
THEN USE a load function to load or not your file, as in this example : http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/
然后使用加载函数加载或不加载您的文件，如本例所示：http: //www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/
