使用 Greasemonkey 或用户脚本将远程 JavaScript 文件替换为本地调试副本

Replace remote JavaScript file with a local debugging copy using Greasemonkey or userscript

提问by Tom H

While debugging a client app that uses a Google backend, I have added some debugging versions of the functions and inserted them using the Chrome Developer Tools script editor.

在调试使用 Google 后端的客户端应用程序时，我添加了一些调试版本的函数并使用 Chrome 开发人员工具脚本编辑器插入它们。

However there are a number of limitations with this approach, first is that the editor doesn't seem to always work with de-minified files, and when the JS file is 35K lines long, this is a problem.

然而，这种方法有许多限制，首先是编辑器似乎并不总是处理缩小的文件，当 JS 文件长 35K 行时，这是一个问题。

Another issue is that all the initialization that is done during load time, uses the original "unpatched" functions, hence this is not ideal.

另一个问题是在加载期间完成的所有初始化都使用原始的“未修补”函数，因此这并不理想。

I would like to replace the remote javascript.jsfile with my own local copy, presumably using some regex on the file name, or whatever strategy was suitable, I am happy to use either Firefox or Chrome, if one was easier than the other.

我想javascript.js用我自己的本地副本替换远程文件，大概在文件名上使用一些正则表达式，或者任何合适的策略，我很乐意使用 Firefox 或 Chrome，如果一个比另一个更容易。

采纳答案by Tom H

So basically, as @BrockAdams identified, there are a couple of solutions to these types of problem depending on the requirements, and they follow either 1 of 2 methods.

所以基本上，正如@BrockAdams 所确定的那样，根据需求有几种解决这些类型问题的方法，它们遵循两种方法中的一种。

1. the browser API switcharoo.
2. The proxy based interception befiddlement.

1. 浏览器 API switcharoo。
2. 基于代理的拦截困惑。

the browser API switcharoo.Both firefox and chrome support browser extensions that can take advantage of platform specific APIs to register event handlers for "onbeforeload" or "onBeforeRequest" in the case of firefox and chrome respectively. The chrome APIs are currently experimental, hence these tools are likely to be better developed under firefox. 2 tools that definitely do something like what is required are AdBlock plusand Jsdeminifierboth of which have the source code available.

浏览器 API switcharoo。firefox 和 chrome 都支持浏览器扩展，可以利用特定于平台的 API 分别在 firefox 和 chrome 的情况下为“onbeforeload”或“onBeforeRequest”注册事件处理程序。chrome API 目前处于试验阶段，因此这些工具可能会在 firefox 下更好地开发。AdBlock plus和Jsdeminifier两个绝对可以完成所需操作的工具都提供了源代码。

The key point for these 2 firefox apps is that they intercept the web request beforethe browser gets its hands on it and operate on the other side of the http/https encrpytion stage, hence can see the decrypted response, however as identified in the other postthat they don't do the whole thing, although the jsdeminifier was very useful, I didn't find a firefox plugin to do exactly what I wanted, but I can see from those previous plugins, that it is possible with both firefox and chrome. Though they don't actually do the trick as required.

这 2 个 firefox 应用程序的关键点是它们在浏览器得到它之前拦截 Web 请求并在 http/https 加密阶段的另一侧操作，因此可以看到解密的响应，但是在另一个发帖说他们没有做所有的事情，虽然 jsdeminifier 非常有用，但我没有找到一个 firefox 插件来做我想要的，但我可以从以前的插件中看到，firefox 和铬。尽管他们实际上并没有按要求完成任务。

The proxy based interception befiddlementThis is definitely the better option in a plain HTTP environment, there are whole bunch of proxies such as pivoxy, fiddler2, Charles Web HTTP proxy, and presumably some that I didn't look at specifically such as snort that support filtering of some sort.

代理基于拦截befiddlement这绝对是在一个普通的HTTP环境是更好的选择，也有一大堆的代理，如pivoxy的fiddler2，查尔斯网页的HTTP代理，想必一些我没看具体如Snort的支持某种过滤。

The simplest solution for myself was foxyproxy and privoxy on firefox, and configure a user.action and user.filter to detect the url of the page, and then to apply a filter which swapped out the original src tag, for my own one.

对我来说最简单的解决方案是在 firefox 上使用 foxyproxy 和 privoxy，并配置一个 user.action 和 user.filter 来检测页面的 url，然后应用一个过滤器来换掉原来的 src 标签，用于我自己的标签。

The https case. proxy vs pluginWhen the request is https the proxy can't see the request url or the response body, so it can't do the cool swapping stuff. However there is one option available for those who like to mess with their browser. And that is the man-in-the-middle SSL proxy. The Charles Web HTTP proxyappears to be the main solution to this problem. Basically the way it works is that when your browser makes a request to the remote HTTPS server, the ssl proxy intercepts the request and from the ip address of the server generates a server certificate on the fly, which it signs with its own root CA, and sends back to the browser. The browser obviously complains about the self-signed cert, but here you can choose to install the ssl proxy root CA cert into the browser, befuddling the browser and allowing the ssl proxy to man in the middle and make replacements and filters on the raw response body.

https 案例。代理 vs 插件当请求是 https 时，代理看不到请求 url 或响应正文，因此它无法进行很酷的交换。但是，对于那些喜欢弄乱浏览器的人来说，有一种选择。这就是中间人 SSL 代理。在查尔斯的Web HTTP代理似乎是解决这个问题的主要方法。基本上它的工作方式是，当您的浏览器向远程 HTTPS 服务器发出请求时，ssl 代理会拦截该请求，并从服务器的 ip 地址动态生成服务器证书，并使用自己的根 CA 签名，并发送回浏览器。浏览器显然抱怨自签名证书，但在这里你可以选择将 ssl 代理根 CA 证书安装到浏览器中，迷惑浏览器并允许 ssl 代理在中间进行替换和过滤原始响应身体。

Alternative roll your own chrome extensionI decided to go with rolling my own chrome extension, which I am planning to make available. Currently its in a very hardcoded to my own requirements state, but it works pretty good, even for https requests and another benefit is that a browser plugin solution can be more tightly integrated with the browser developer tools.

替代滚动你自己的 chrome 扩展我决定滚动我自己的 chrome 扩展，我计划提供它。目前它对我自己的需求状态进行了非常硬编码，但它工作得很好，即使对于 https 请求也是如此，另一个好处是浏览器插件解决方案可以与浏览器开发人员工具更紧密地集成。

回答by sachinjain024

There is one more tool Requestly- Chrome Extension which can be used to rewrite URLs and replace your production libraries with local hosted libraries with much easy setup and very friendly interface.

还有一个工具Requestly- Chrome 扩展程序，它可用于重写 URL 并用本地托管库替换您的生产库，设置非常简单，界面非常友好。

Have a look at this:

看看这个：

PS: I know this was answered but I still answered this considering it will be very beneficial to future readers.

PS：我知道已经回答了，但考虑到这对未来的读者非常有益，我仍然回答了这个问题。