简体繁体 English

在本地修改第三方网站进行测试

[英]modifying 3rd party website locally for testing

原文 2016-08-16 00:31:58 4 1 google-chrome/ http

What's the general approach on modifying 3rd party websites for testing? 修改第三方网站进行测试的一般方法是什么？ For example, I want to modify certain aspects of a random website (HTML, js, css, images whatever) that I do not control and see locally modified site with my changes. 例如，我想修改我无法控制的随机网站的某些方面（HTML，js，css，图像等），并查看更改后的本地修改网站。 There are multiple ways: 1. copy everything to local server and do whatever I want. 有多种方法：1.将所有内容复制到本地服务器，然后执行我想做的任何事情。 This is a bit tedious, messy and won't replicate exact behavior of original server: some headers might not be the same (CORS for example). 这有点乏味，混乱并且不会复制原始服务器的确切行为：某些标头可能不相同（例如，CORS）。 Also, host name is different (but this can be "fixed" by overriding host name in hosts file) 2. Another approach is to create a chrome extension that does what I want: there are hooks for chrome.webRequest where I can redirect to another file (on other server or stored in the extension folder). 另外，主机名是不同的（但是可以通过覆盖hosts文件中的主机名来“固定”）2。另一种方法是创建一个chrome扩展名，该扩展名可以实现我想要的功能：chrome.webRequest的钩子可以重定向到另一个文件（在其他服务器上或存储在扩展文件夹中）。 This also doesn't work for me: when I redirect somewhere else I get CORS issues because redirected file is located elsewhere. 这对我也不起作用：当我重定向到其他地方时，我遇到了CORS问题，因为重定向的文件位于其他地方。

My goal is to get absolutely identical behavior (eg it's best to access the site in question directly, and not its copy on my local server) but before content is rendered have a chance to modify it. 我的目标是获得完全相同的行为（例如，最好直接访问有问题的网站，而不是在我的本地服务器上访问它的副本），但是在呈现内容之前有机会对其进行修改。 I could for example setup a local proxy and would make my changes on the fly, but the remote site uses https, so I cannot do it that way. 例如，我可以设置一个本地代理，并即时进行更改，但是远程站点使用https，所以我不能那样做。 If I had a chance to run regex.replace on received content buffer that would be perfect. 如果我有机会在接收到的内容缓冲区上运行regex.replace，那将是完美的。 Any ideas how to do something like that? 任何想法如何做这样的事情？

1 个解决方案

A third party site will typically be published via a build process that minifies and bundles together JavaScript and CSS (eg closure , jspm , webpack , browserify ), and sometimes images as well (as sprites). 第三方网站将典型地经由minifies构建过程被公开和捆绑在一起JavaScript和CSS（例如closure ， jspm ， webpack ， browserify ），有时图像以及（如子画面）。 If you don't have the source files, you can still resort to the methods below. 如果没有源文件，您仍然可以使用以下方法。

If you want to modify the CSS and have it persist, you can use a Chrome extension like Live CSS editor . 如果您想修改CSS并使其保持不变，则可以使用Chrome扩展程序，例如Live CSS editor 。

For JavaScript, Chrome supports user scripts , and you can manage user scripts more easily with Tampermonkey . 对于JavaScript，Chrome 支持用户脚本，您可以使用Tampermonkey轻松管理用户脚本。

A proxy to do regex replacements is another valid approach, and it works over HTTP as well as HTTPS. 进行正则表达式替换的代理是另一种有效的方法，它可以在HTTP和HTTPS上运行。 See Fiddler , Charles or the good old Proxomitron for Windows, which also has plugins that can intercept SSL traffic. 请参阅Fiddler ， Charles或适用于Windows的老式Proxomitron ，它们也具有可以拦截SSL流量的插件。