如何使用 weinre 调试 https 加载页面？答案

【问题标题】：How do I debug an https loaded page using weinre?如何使用 weinre 调试 https 加载页面？
【发布时间】：2014-01-04 13:54:36
【问题描述】：

我正在尝试使用 weinre 进行调试，并在 Chrome 中设置了一个简单的测试以确保一切正常。但是，在开发人员工具中，我得到了错误：

"The page at 'https://myhost/...' was loaded over HTTPS, but ran insecure content from 'http://localhost:8080/target/target-script-min.js': this content should also be loaded over HTTPS.

我看到了一些关于调试“Cordova”或“Phonegap”的其他答案。我没有使用这些东西，建议的答案似乎不适用于这里。我正在尝试仅调试简单的 HTML/Javascript。

我在 weinre 网页上没有看到启用 https 支持的任何提及（它明确提到它不使用 https），并且我对浏览器端没有太多控制权（这需要在各种臭名昭著的 android 浏览器上工作，无论如何，在我看来，对本地调试完全不友好，这实际上是我尝试使用 weinre 调试的原因），所以我不知道如何继续。不使用 https 是不可能的，因为页面会传递敏感信息；通过 http 使用 weinre 是可以接受的，因为我通过 ssh 建立隧道连接。

更新：我也尝试过使用 boomarklet 方法：我将书签 URL 添加到 Chrome Mobile，但是当我尝试导航到书签时，它似乎卸载了原始页面：我可以看到建立的连接，但是当我查看资源，我所看到的只是小书签。但是，如果我尝试通过键入书签的名称来运行书签，直到加星标的 javascript 代码出现在自动完成中，它会保留在当前页面上，但客户端页面中不会显示任何目标。我认为这是出于同样的原因，因为我看到引用 http://localhost:2000 的小书签。

【问题讨论】：

标签： https weinre

【解决方案1】：

为了通过浏览器限制，可以使用反向代理从 https 而不是 http 提供 weinre 页面。这在某种程度上是一个蛮力解决方案，但是将以下行添加到我的 /etc/httpd.conf 文件的末尾足以代理来自服务器的所有页面 weinre 请求：在我的情况下，这些都不会与现有文件或目录冲突.

ProxyPass       /target/  http://localhost:8080/target/
ProxyPassReverse          /target/  http://localhost:8080/target/
ProxyPass       /client/  http://localhost:8080/client/
ProxyPassReverse          /client/  http://localhost:8080/client/
ProxyPass       /weinre/  http://localhost:8080/weinre/
ProxyPassReverse          /weinre/  http://localhost:8080/weinre/
ProxyPass       /interfaces/  http://localhost:8080/interfaces/
ProxyPassReverse          /interfaces/  http://localhost:8080/interfaces/
ProxyPass       /modjewel.js  http://localhost:8080/modjewel.js
ProxyPass       /images/  http://localhost:8080/images/
ProxyPassReverse          /images/  http://localhost:8080/images/
ProxyPass       /ws/  http://localhost:8080/ws/
ProxyPassReverse          /ws/  http://localhost:8080/ws/

还需要定义window.WeinreServerURL，因为Weinre 在http:/ 上做了一个正则表达式来尝试获取服务器的URL。这将失败，因为服务器是 https，而不是 http。在我的例子中，我在书签中添加了以下形式的语句作为函数中的第一个语句：

window.WeinreServerURL="https://server:port/

有了这个，我可以将浏览器指向https://server:port/client/#anonymous 以调出调试页面，并从处于调试状态的页面运行小书签。

【讨论】：

我使用 ngrok.com 来解决 Weinre 的 https 问题。有关它的更多信息，请参阅本文undefinednull.com/2015/03/17/…
使用window.WeinreServerURL 可以在子目录下运行整个程序，并使用 Nginx 代理在 https 下运行！谢谢！

【解决方案2】：

很好的问答，@Michael！我有同样的问题，并按照您的指导来使用我的设置，即 Windows 上的 IIS。我在这里发布此作为参考，以防其他人遇到同样的问题。

使用 IIS，我使用以下过程来设置反向代理：

首先，安装 IIS 的 Application Request Routing 扩展及其依赖项。这使得设置反向代理变得非常容易。
我为此创建了一个新网站，以避免与我现有网站的潜在冲突。在 IIS 管理器中，右键单击 Sites 并选择 Add Web Site...。给它一个名字（例如'weinre'）并将它指向一个临时目录。将绑定更改为https，并选择一个未使用的端口，例如8005。如果您愿意，还可以添加http 绑定。
选择新创建的站点，然后双击URL Rewrite 模块。
点击右侧面板中的Add Rule(s)...，然后使用Reverse Proxy 模板。
确保选中 Enable SSL Offloading 框，然后输入 weinre 服务器所在的服务器名称/端口（例如 `127.0.0.1:8080'）。添加规则，重启网站，大功告成！

现在，要使用它，只需更新目标脚本的路径以指向您在步骤 2 中绑定的端口。而且，正如 Michael 指出的那样，您还需要设置 window.WeinreServerURL，因为它不能使用此设置自动检测。

调试愉快！

【讨论】：

嗨，Dan，我已经尝试了您描述的方法，并已将自签名 SSL 证书添加到 IIS 服务器。我添加了一个名为 weinre 的站点，并添加了对 http:80 和 https:443 的绑定。还添加了选中“启用 SSL 卸载”框的反向代理。我已经重新启动了站点，并且我的设置在 http 协议下运行良好。问题是我无法让它在 https 下工作。我尝试将 window.WeinreServerURL="http s://server:port/" （带和不带端口）设置为不走运。有任何想法吗？（我要测试的网站在不同的域上）
原来是因为自签名证书，导致浏览器出现安全异常。
太棒了。您刚刚为我节省了数小时尝试通过 HTTPS 进行远程调试的工作。
@Dan 我一直在尝试实施您的 HTTPS 解决方案，但我被卡住了。 Weinre 在注入了书签的 http 上工作得很好。我安装了正确的 IIS 组件，但有几个问题。您是否使用了 weinre 站点的测试机 IP 地址（例如 192.168.1.6）？您能否分享第 5 步的 IIS 设置的详细信息？你的输入是什么，你在哪里输入服务器：端口信息。有许多字段可供选择。你能提供你相关的书市代码吗？谢谢...如果您愿意，我可以打开另一个堆栈溢出问题。
@Highdown，刚刚看到这个；在第 5 步中，重写规则使用“localhost:8080{R:1}”作为重写 URL（使用包含查询字符串选项）。我好久没碰这个了，所以我的记忆很模糊。

【解决方案3】：

您可以run weinre on a PaaS 喜欢 Heroku 或 Bluemix，它们通常提供 https 终止，因此应用程序基本上免费获得 https 支持。

你可以试试我的公共访问weinre服务器的https版本，这里：https://weinre.mybluemix.net/

【讨论】：