logo标签列表

从Windows机器访问iOS Safari Web Inspector

ioswindowssafariweb-inspector
55

新的iOS 6 Safari带有Web Inspector功能，可以通过USB电缆从桌面Safari连接到它。然后允许您从桌面上调试在iOS Safari中打开的页面。但据我所见，目前仅在Mac Safari上支持此功能，而在Windows上似乎不支持？我是对的吗？还是Windows Safari也有可能？或者以后会推出这个功能吗？

请参阅 iOS6 - removed console log for IPad - how to use web inspector on windows?。 - user456814
7个回答
44

看起来需要 Safari 6，但它尚未在 Windows 上发布。关于 Safari 6 在 Windows 上不可用，苹果公司表示：“Safari 6 可供 Mountain Lion 和 Lion 使用。Safari 5 仍可在 Windows 上使用。”

49
我通常是个苹果粉丝，但这很恼人。 - aaaidan
136
我不太是苹果粉丝，这相当令人恼火；-) - Jeroen
我猜在PC上无法使用iDevices进行“真实设备方法”网页检查... - Ben Racicot
40
我从未是一个苹果的迷，但现在我讨厌它们。 - Rolf
3
我理解您的处境。我也有一台iPad，但没有其他苹果设备。因此，我需要购买一台苹果桌面电脑或者选择自己组装一台黑苹果电脑。 - Csaba Toth
27

我经常使用weinre。它基本上运行一个Web服务器，然后作为一个增强的代理来浏览网页和网站。可以通过将脚本添加到您的页面或运行书签来启动检查器。

weinre是用于Web页面的调试器，类似于FireBug（适用于FireFox）和Web Inspector（适用于基于WebKit的浏览器），不同的是它被设计为远程工作，并且特别适用于在移动设备上（如手机）调试网页。

要安装它，您需要NodeJS和NPM（已包含在NodeJS中）。您还需要一个基于WebKit的桌面/接收端浏览器（Safari、Google Chrome或Chromium）。它应该可以在Windows、OSX和Linux上运行。

如果您已经安装了NodeJS和NPM，可以使用以下命令安装和运行：

npm i -g weinre
weinre
# Go to the URL that it outputs for instructions to use it

展示了Weinre工具在开发者工具和iOS模拟器中运行的截图

更新:

@EvAlex指出另一个与Weinre非常相似的工具，叫做Vorlon.js。它是可插拔的，并支持同时查看/切换多个设备的检查器。

2
太棒了！我轻松地安装了Node包。之后，我启动了两个ngrok实例，其中一个服务于我的本地开发网站，另一个服务于weinre。然后，我添加了脚本标签（指向weinre的公共ngrok DNS名称js include）。然后，我可以使用公共ngrok地址在iPad上查看网站，并且可以从我的本地Linux或Windows进行调试。这真的让我的一天！ - Csaba Toth
3
感谢weinre和ngrok。我现在在考虑使用vorlon.js代替weinre。 - EvAlex
使用iOS 10和Windows 10上的Nginx，我无法使其正常工作。浪费了几个小时的时间。我现在对苹果感到非常失望。 - Ryan
哇，就在我放弃的时候，我发现了https://www.undefinednull.com/2015/03/17/remote-debugging-localhost-with-weinre/。现在看起来我已经搞定了。我的Windows命令提示符中的命令是`weinre --boundHost 192.168.0.103 --httpPort 8080，然后我将其添加到了我的网页顶部：<script> window.WeinreServerURL="http://192.168.0.103:8080"; </script> <script src="http://192.168.0.103:8080/target/target-script-min.js#anonymous"></script>` 然后在我的iPhone上浏览到了http://192.168.0.103。谢谢。希望这能帮助调试iOS上的JS。 - Ryan
Weinre并不是一个100%可靠的调试解决方案。首先，它会向运行时环境注入代码，这些代码可能会干扰您正在尝试调试的应用程序（即您正在尝试调试的应用程序）中不再出现的错误。我正在这里为一个Web应用程序（通过Apache Cordova框架显示在所谓的“Web视图”中）遇到问题而苦恼，只要我链接了Weinre调试器脚本，问题就消失了。因此，我既无法使用Weinre进行调试（我没有Mac），也无法使用它进行调试。看看Weinre的代码，你就会明白为什么。 - Armen Michaeli
9

在Windows上安装Vorlon

npm i -g vorlon
vorlon

确认 Vorlon 是否运行

打开网络浏览器并导航至 http://localhost:1337

设置 Ngrok

  • 下载 Ngrok: https://ngrok.com/download
  • 解压缩
  • 打开命令提示符: 开始 -> 搜索 -> cmd
  • 导航至 ngrok.exe: cd <存储ngrok.exe的路径>/
  • 运行它: ngrok.exe http <端口号> 例如: ngrok.exe http 1337

Ngrok 提供一个 URL，例如: https://0ad8c32f.ngrok.io -> localhost:1337

将 Ngrok URL 复制并粘贴到您的网页中。

<script src="https://0ad8c32f.ngrok.io/vorlon.js"></script>

在您的设备上导航到要测试的页面：

http://thepageiwanttotest.com/testing123

参考资料

请访问 http://vorlon.herokuapp.com/dashboard/default 快速设置。祝你好运！ - Aakash
3
1
我发现了一个很棒的工具叫做GapDebug，对我来说是正确的解决方案 :)
请记得在PhoneGap Build网站的设置中指定Debug版本，这样您的应用程序就可以正常运行。GapDebug也对我有帮助。 - user1036944
很遗憾地报告，GapDebug在2016年被终止了。它只适用于旧版本的iOS（我认为是9或10），因此现在基本上不再是一个选择。但那个产品真是太棒了！ - Marcus Pope
0

在尝试在运行IIS和本地主机客户端的Windows 10机器上安装Weinre并且从未能够使其正常工作后，我寻找了替代解决方案。

结果发现苹果已经停止了Safari for Windows，但是在发现以下链接后，我能够找到一份副本。哦，一旦安装了它，Safari中的Web Inspector就能够帮助我找到应用程序中的问题。

https://apple.stackexchange.com/questions/68836/where-can-i-download-safari-for-windows

一旦安装了Safari，我需要打开开发者工具。这需要进入“偏好设置”>“高级”>勾选“在菜单栏中显示开发菜单”>（点击扳手图标旁边的页面图标，在“开发”上悬停）开始调试JavaScript。从这里开始，感觉非常像Chrome... :-)
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接