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

a5g8bdjr  于 2023-02-09  发布在  Java
关注(0)|答案(7)|浏览(172)

在我的制作网站上,我编译了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"的解决方案。
有什么想法吗?

bf1o4zei

bf1o4zei1#

我的做法是:
1.如果你使用的是windows系统,请下载并安装Fiddler
1.启用它以捕获http流量[IE/Chrome默认情况下会这样做,Firefox -通过安装的附加功能启用它]
1.加载有问题的页面。
1.在左边的http流量列表中找到要替换的文件,然后单击它。
1.在右边有一个AutoResponder选项卡。点击它。
1.单击复选框以“启用自动响应”
1.单击添加按钮
1.在右侧的第2个下拉菜单中,选择“查找文件”选项
1.在对话框中找到该文件,然后单击“保存
1.重复步骤4-9,直到替换所有要替换的文件
1.刷新浏览器窗口,新的js文件正在运行
您可以替换HTML文件并更改页面上的JS链接,而不是替换JS文件。
如果你在Mac/Linux上,你可以安装X1 E1 F1 X。(不是免费的,有试用版)步骤类似,但不一样。
如果您使用Google Closure来压缩文件,您可以安装他们的插件来执行source mapping

0yg35tkg

0yg35tkg2#

对于静态文件(例如.js文件)使用像http://static.example.com这样的子域并更改主机文件怎么样?

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

将以下行添加到主机文件(/etc/hosts用于Linux,C:\WINDOWS\System32\drivers\etc\host用于Linux):

static.example.com 127.0.0.1

当然,您必须在127.0.0.1上运行http://static.example.com/文件的服务器。
另一个解决方案是使用一个(本地)代理服务器,如Privoxy,将http://example.com/js/重定向到http://localhost/js/

yws3nbqq

yws3nbqq3#

要添加一个***新***文件,您可以使用类似于其他帖子的内容:

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);
ikfrs5lh

ikfrs5lh4#

无需使用任何web代理,即可使用chrome功能对js和css文件应用本地覆盖https://developer.chrome.com/blog/new-in-devtools-65/#overrides

h4cxqtbf

h4cxqtbf5#

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

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

这样做将覆盖最初定义的函数和变量。您必须手动重新运行window.onload。如果您的脚本立即运行或加载时在页面上发生了很大变化,您可能需要做一些工作才能使其恢复到原始状态。
祝你好运!

hiz5n14c

hiz5n14c6#

虽然epascarello的解决方案有效,但是对于缩小文件的调试有一个更快的解决方案。考虑使用JavaScript source maps。现代的Firefox和Chrome都支持它们。
源代码Map的概念是告诉浏览器在哪里可以找到未缩小的版本。当你在浏览器开发工具中开始调试时,浏览器会加载脚本的未缩小版本,并在调试器中显示易于阅读的JavaScript(或任何你编译成JavaScript的代码)代码。

5us2dqdw

5us2dqdw7#

在URL中添加一些内容以区分开发和生产上下文;示例:http://url_of_prod.com
http://url_of_dev.com?debug=true
然后,使用一些javascript检查GET变量debug是否为ON或NOT,或者使用检查URL
如果(窗口位置主机索引(设备的URL)〉-1)...
然后使用一个load函数来加载或不加载你的文件,如下面的例子所示:http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/

相关问题