ios 使用 PC 调试 ipad Safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20408110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Debug ipad safari with a PC
提问by darklord
I want to test my website on Safari on my ipad. I only have another PC. Is there a way for me to do remote debugging like ADB with mobile Chrome? I searched on StackOverflow, seems there is an Adobe Edge Inspect CC, but I don't know if this is a good choice.
我想在 ipad 上的 Safari 上测试我的网站。我只有另一台电脑。有没有办法让我使用移动 Chrome 进行 ADB 之类的远程调试？我在 StackOverflow 上搜索，似乎有一个 Adobe Edge Inspect CC，但我不知道这是否是一个不错的选择。
Thanks!
谢谢！
采纳答案by David
2018 Update:
2018 更新：
Since the original post, the blog post is dead & Telerik App Builder is discontinuedand no longer offered. Adding this update to inform readers in case they don't read the user comments that follow this answer post. As for the blog post, for those still interested, here's a web cached copy. Regarding the blog, I think the company that blog's from has since shut down.
自原始帖子以来，博客帖子已死，Telerik App Builder 已停产且不再提供。添加此更新以通知读者，以防他们未阅读此回答帖子后面的用户评论。至于博客文章，对于那些仍然感兴趣的人，这里有一个网络缓存副本。关于博客，我认为博客来自的公司已经关闭。
When I get a chance, I'll see if I have a copy of the app builder saved so that I can post it online for those still interested in using it, along with another cached copy of the blog post maybe.
当我有机会时，我会看看我是否保存了应用程序构建器的副本，以便我可以将它发布在网上，供那些仍然有兴趣使用它的人使用，也许还会附上博客文章的另一个缓存副本。
Original Answer
原答案
You can try option of using Telerik AppBuilder (Windows client) as a replacement on Windows for Safari debugger on Mac when remote debugging. There's a nice blog post about the steps to do it in link below. I'd rather not repost the info as there are also screenshots and it's a lot of text. But essentially, you install app, open it, connect device via USB, then you can find it in the app and open up the developer tools/debugger for it. For non-public websites, you'll have to open up port 80 with some firewall configs documented in the post.
远程调试时，您可以尝试使用 Telerik AppBuilder（Windows 客户端）作为 Mac 上 Safari 调试器的替代品。在下面的链接中有一篇很好的博客文章，介绍了执行此操作的步骤。我宁愿不重新发布信息，因为也有截图，而且有很多文字。但本质上，您安装应用程序，打开它，通过 USB 连接设备，然后您可以在应用程序中找到它并为其打开开发人员工具/调试器。对于非公共网站，您必须使用帖子中记录的一些防火墙配置打开端口 80。
The tool requires a license or you can use the trial, which becomes a basic edition afterwards. I think the basic edition will still allow you to do the debugging. I'm going to try it out myself.
该工具需要许可证，或者您可以使用试用版，之后它将成为基本版。我认为基本版仍然允许您进行调试。我要亲自试一试。
You can also try these iOS apps too, you can find them in the iTunes App store. They give you a built in developer tools feature (right on iOS no remote debug) that mobile Safari doesn't offer.
您也可以尝试这些 iOS 应用程序，您可以在 iTunes 应用程序商店中找到它们。它们为您提供了移动 Safari 不提供的内置开发人员工具功能（在 iOS 上，无需远程调试）。
MIH Tool - basic edition https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8
MIH 工具 - 基础版 https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8
HTTPWatch Basic https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
HTTPWatch 基本版 https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8
I gave them a try and they're at least better than the mobile Safari you get on iOS, unless one needs to target full mobile Safari compatibility. I'm guessing the pro/paid editions of those apps give you more/better features.
我试了一下，它们至少比你在 iOS 上获得的移动 Safari 更好，除非需要完全兼容移动 Safari。我猜这些应用程序的专业版/付费版会为您提供更多/更好的功能。
回答by monkeythedev
Update October 2019
2019 年 10 月更新
This solution doesn't work for IOS 12+ (resource 1, resource 2).
Updated and tested on 24/6/2017
2017 年 6 月 24 日更新和测试
Using Chromeon Windows 8 and more recent:
在Windows 8 及更新版本上使用Chrome：
- Download and install Node
Download and install ITunes and connect it to your Device. (A pop-up should shows to your iPad to get authorization) . Be sure to allow web inspector in your iPad
Download and install the remote webkit adapter
- 下载并安装节点
下载并安装 iTunes 并将其连接到您的设备。（弹出窗口应显示在您的 iPad 上以获得授权）。确保在你的 iPad 中允许 web 检查器
下载并安装远程 webkit 适配器
Using Powershell (As administrator):
使用 Powershell（以管理员身份）：
npm install remotedebug-ios-webkit-adapter -g
npm install remotedebug-ios-webkit-adapter -g
- Execute the adapter:
- 执行适配器：
Using Powershell (as administrator):
使用 Powershell（以管理员身份）：
remotedebug_ios_webkit_adapter --port=9000
remotedebug_ios_webkit_adapter --port=9000
You should get a similar output:
你应该得到类似的输出：
C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000
remotedebug-ios-webkit-adapter is listening on port 9000
iosAdapter.getTargets
...
C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000
remotedebug-ios-webkit-adapter is listening on port 9000
iosAdapter.getTargets
...
- Open Chromeand go to the following link:
- 打开Chrome并转到以下链接：
chrome://inspect/#devices
铬：//检查/#devices
- Click on configure next to "Discover network targets" and add the following: localhost:9000
- 单击“发现网络目标”旁边的配置并添加以下内容： localhost:9000
Make sure to have the web page you want debug open on safari, you should see it on chrome inspector page under Remote Target
确保在 safari 上打开要调试的网页，您应该在远程目标下的 chrome 检查器页面上看到它
Extra step for iOS 11Thanks to @skaurus
感谢@skaurus，iOS 11 的额外步骤
回答by John Washam
See monkeythedev's answerfor the easiest way to debug on a Windows 8+ machine with iOS 9+. I updated my blog postusing information from that answer and other sources and also recorded a screenshare. The method below should still work for iOS 8 and down, if needed.
有关在装有 iOS 9+ 的 Windows 8+ 机器上调试的最简单方法，请参阅monkeythedev 的答案。我使用来自该答案和其他来源的信息更新了我的博客文章，并记录了屏幕共享。如果需要，以下方法仍然适用于 iOS 8 及更低版本。
There is actually a pretty easy way to debug a website in Safari on iOS using Firefox on a Windows machine.
实际上有一种非常简单的方法可以在 Windows 机器上使用 Firefox 在 iOS 上的 Safari 中调试网站。
NOTE: Ryan wrote in the comments below that this may only work on iOS 8 and down. I am unable to confirm, but be aware.
注意：Ryan 在下面的评论中写道，这可能仅适用于 iOS 8 及更低版本。我无法确认，但请注意。
I wrote a detailed blog postabout this, but here are the highlights:
- Install iTunes to get the "Apple Mobile Device Support" and "Apple Application Support" applications that come with it. (uninstall iTunes afterward, if you want)
- Connect your iOS device via USB.
- Enable web inspectoron iOS (available on iOS 6 and later).
- Open Safari on your iOS device and browse to a website.
- Open Firefox on your Windows machine and press Shift + F8to open WebIDE, which should include the necessary Valanceadd-on, if you use Firefox Developer Edition (any version) or Firefox 37 and later (any channel).
- For some reason, I couldn't get it to connect to my iOS device until I downloaded the ios-webkit-debug-proxy-win32program and ran it. It opens a blank Command Prompt, but after I went back to WebIDE after opening it, I disconnected, then reconnected, and I saw debug info for the website I had opened in Safari. You may not need to do this though, as another user just had to add an exception to their firewall then disconnect/reconnect, and it worked.
- 安装 iTunes 以获取随附的“Apple 移动设备支持”和“Apple 应用程序支持”应用程序。（如果需要，请稍后卸载 iTunes）
- 通过 USB 连接您的 iOS 设备。
- 在 iOS 上启用网络检查器（在 iOS 6 及更高版本上可用）。
- 在您的 iOS 设备上打开 Safari 并浏览到一个网站。
- 在 Windows 机器上打开 Firefox，然后按Shift + F8以打开 WebIDE，如果您使用 Firefox 开发人员版（任何版本）或 Firefox 37 及更高版本（任何渠道），其中应包含必要的Valance附加组件。
- 出于某种原因，在我下载ios-webkit-debug-proxy-win32程序并运行它之前，我无法让它连接到我的 iOS 设备。它打开一个空白的命令提示符，但在打开它后返回 WebIDE 后，我断开连接，然后重新连接，我看到了我在 Safari 中打开的网站的调试信息。不过，您可能不需要这样做，因为另一个用户只需向他们的防火墙添加一个例外，然后断开/重新连接，它就可以工作了。
The debug info available isn't as exhaustive as Chrome Developer Tools (specifically no "Networking" tab), but it was enough for me to be able to view what was going on in the Console.
可用的调试信息不像 Chrome 开发人员工具那样详尽（特别是没有“网络”选项卡），但足以让我能够查看控制台中发生的事情。
回答by Sinisa
This question was more than 4 years ago, but I feel like it's worth to mention another option which is platform-independent which seems is not mentioned above:
这个问题是 4 多年前的问题，但我觉得值得一提的是另一个与平台无关的选项，上面似乎没有提到：
VConsole
控制台
It's a JavaScript that you can inject into your page(s) which will overwrite all native console output and show it as an overlay on top of your page content, in a level of detail that is almostas good as Google Chrome's Developer Tools.
它是一种 JavaScript，您可以将其注入到您的页面中，它将覆盖所有本地控制台输出并将其显示为页面内容之上的覆盖层，其详细程度几乎与 Google Chrome 的开发人员工具一样好。
Runs well on iOS Safari, as well as on other mobile browsers - for as long as JavaScript is enabled in the browser.
在 iOS Safari 以及其他移动浏览器上运行良好 - 只要在浏览器中启用 JavaScript。
How to install: https://www.npmjs.com/package/vconsole
安装方法：https: //www.npmjs.com/package/vconsole
You will need NPM tools to install it, but not actually required to use NPM to build your project. You can simply install VConsole somewhere in a separate folder, and just copy-paste vconsole.min.js from it.
您将需要 NPM 工具来安装它，但实际上不需要使用 NPM 来构建您的项目。您可以简单地将 VConsole 安装在单独文件夹中的某个位置，然后从中复制粘贴 vconsole.min.js。
Once you inject it into your page, will look like this:
将其注入页面后，将如下所示：
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>
Visually is very appealing, you will see green button in lower-right corner of your page on your mobile/desktop browser, which will open console overlay.
视觉上非常吸引人，您将在移动/桌面浏览器的页面右下角看到绿色按钮，这将打开控制台覆盖。
Very neat!
非常整洁！
Of course, it does not provide you with ability to select an element, see calculated css etc., but if you are looking for console output and some network report, this one is really easy to use.
当然，它并没有为您提供选择元素、查看计算出的 css 等功能，但是如果您正在寻找控制台输出和一些网络报告，这个功能真的很容易使用。
回答by Ben Carp
October 2019
2019 年 10 月
AFAIK, For recent IOS versions there is no overall solution for debugging IOS from a PC.
AFAIK，对于最近的 IOS 版本，没有从 PC 调试 IOS 的整体解决方案。
You can however use one of the following solutions:
但是，您可以使用以下解决方案之一：
- Display console messages in the browser itself. As described hereand in Sinisa's answer.
- The "remotedebug-ios-webkit-adapter" doesn't work for debugging IOS 12+. It requires extra steps for IOS 11, and works for IOS 10 and perhaps older versions as well.
- 在浏览器本身中显示控制台消息。如此处和 Sinisa 的回答所述。
- “remotedebug-ios-webkit-adapter”不适用于调试 IOS 12+。对于 IOS 11，它需要额外的步骤，并且适用于 IOS 10 和可能也适用于旧版本。
回答by Ben Racicot
I use PrePros for CSS preprocessing and it has a built in server for mobile debugging and web inspector. But this is only good for local sites even still...
我使用 PrePros 进行 CSS 预处理，它具有用于移动调试和 Web 检查器的内置服务器。但这仅对本地站点有好处，即使仍然......
回答by Manuel Arwed Schmidt
In my experience it is often not an issue with mobile Safari only but Safari in general. In these cases it can help to try the normal Safari (for Windows) and see if the bugs appear there. If so, it's much easier to debug something by this way.
根据我的经验，这通常不是移动 Safari 的问题，而是 Safari 的问题。在这些情况下，它可以帮助尝试普通的 Safari（适用于 Windows）并查看错误是否出现在那里。如果是这样，通过这种方式调试某些东西要容易得多。
回答by Stephen Johnson
I haven't tried this on a PC, but you should be able to go to http://[DEVICE_IP_ADDRESS]:9999 to debug.
我还没有在 PC 上试过这个，但你应该可以去 http://[DEVICE_IP_ADDRESS]:9999 进行调试。
