打开 webkit 远程调试的移动浏览器

Posted 2023-02-25

【中文标题】打开 webkit 远程调试的移动浏览器

【英文标题】：Start mobile browsers with webkit remote debugging ON

【发布时间】：2011-10-09 05:59:14

【问题描述】：

在 Google I/O 2011: Chrome Dev Tools Reloaded，Paul Irish 和 Pavel Feldman 介绍了新的 remote debugging 功能 - 顺便说一句 included into webkit。

--

这是个好消息，尤其是对于移动网络开发人员而言。 但是我们如何启用它，例如启动 ios 模拟器，或者只是在 iPhone 上运行 Safari Mobile？ （对于 chrome，这通常是在启动时使用 --remote-debugging-port=9222 选项完成的）。

我尝试在 Safari 设置中启用开发者模式 (Settings > Safari > Developer > Debug Console: ON) 但没有成功...

我不知道这里的 android，但有谁知道 Apple（Safari Mobile）或 Google（android 的浏览器）何时会包含这个新功能，以便我们可以在移动开发中享受远程调试？

谢谢。

参考：http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/#comment-63113

【问题讨论】：

相关的谷歌项目？ github.com/google/ios-webkit-debug-proxy

【参考方案1】：

iOS 6 上的 Safari 在 iOS6 中，您现在可以从 Safari 6（仅限 OS X）进行远程调试。在设备上，打开设置 > Safari > 高级 > 启用 Web 检查器。打开 Safari 偏好设置，高级，选中“在菜单栏中显示开发菜单”。使用 USB 数据线连接您的 iPhone/iPad。现在，在“开发”菜单栏下，您应该会为您的设备提供一个子菜单，其中包含您在设备上的 Safari 中打开的选项卡。

iOS 7 上的 Safari 除了上述要求之外，您还需要 Safari 6.1，目前（2013 年 10 月 8 日）仅作为种子提供给开发人员：https://developer.apple.com/downloads/index.action?name=Safari%206.1

Android 4 上的 Chrome 在 Android 上有点复杂。在此处为 Android 版 Chrome 进行远程调试的说明：https://developers.google.com/chrome/mobile/docs/debugging 我还没有找到在Android默认浏览器（v4.04）中启用远程调试的方法。

【讨论】：

仅供参考，您现在还可以在 Windows 上远程调试移动 Safari，请参阅 autumnator.wordpress.com/2014/06/13/…

【参考方案2】：

看看这个 bash 脚本，用 iOS 模拟器启动远程检查器：https://gist.github.com/2241976

【讨论】：

为我工作。非常有用！

太棒了 :) 谢谢！

【参考方案3】：

现在Chrome for Android 支持它。

【参考方案4】：

目前没有移动浏览器实现 webkit 远程调试协议。 （也许您可以获得支持它的 android 的自定义构建）

但是有 weinre，它为您提供了一个远程版本的 web-inspector。但是您必须在页面中包含一些代码才能支持它。 （因为它不是浏览器功能）。

Weinre website

Weinre github repo

【参考方案5】：

仅仅因为一项功能在 WebKit 的一个端口（在本例中为 Apple 和 Chromium）中实现，并不意味着它总是在其他地方可用。我在关于different WebKit ports implementation的博文中详细写了这个。

到目前为止，唯一具有远程调试功能的移动 WebKit 端口是 RIM Playbook 浏览器。

对于 iOS，很难知道，因为 Apple 从未提供有关其未来产品的任何信息。至少我们知道 iOS 5 不会有它，因为 beta 版本没有显示任何相关内容。

对于 Android，它肯定会在未来的版本中推出，因为 Android 用户将 adopting Chromium 作为其 WebKit 的新基础。

【参考方案6】：

Nathan de Vries 想出了如何在模拟器中运行的 iOS5 上执行此操作。它围绕调用私有_enableRemoteInspector 方法。

阅读。总结如下：

要为 Mobile Safari 启用此功能，请使用 gdb 附加到它并调用方法：

MobileSafari_PID=$(ps x | grep "MobileSafari" | grep -v grep | awk ' print $1 ')

if [ "$MobileSafari_PID" == "" ]; then
  echo "Mobile Safari.app must be running in the Simulator to enable the remote inspector."
else

  cat <<EOM | gdb -quiet > /dev/null
  attach $MobileSafari_PID
  p (void *)[WebView _enableRemoteInspector]
  detach
EOM

fi

然后通过http://localhost:9999/ 访问检查器。

使用嵌入的UIWebView，像这样启用它：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
  // ...Snipped...
  [NSClassFromString(@"WebView") _enableRemoteInspector];
  // ...Snipped...

在真实设备上它不起作用，可能是因为端口被防火墙保护 - 如果您有越狱设备，您可能会绕过它（如果您这样做，请更新我们）。

【讨论】：

是的，该端口在设备上被防火墙保护，但您可以在您的应用程序中编写一个简单的代理，并通过不同的端口传输流量。

这个要点应该可以帮助您在模拟器中自动启动 inpsector gist.github.com/2241976

【参考方案7】：

Thomas 指出了一个极好的远程调试资源，但他指出您需要将代码添加到网页中。这并不完全正确，因为 weinre 还允许通过小书签进行交互。在页面here（在方便地称为“使用小书签”的部分下）的部分位置，它说它应该适用于 Android 2.2+ 和 iOS。

一些相关的注意事项：

它不允许您调试启动错误（必须加载页面才能打开小书签）。 如果您失去连接，它似乎不会重新连接（您必须刷新页面才能重新获得连接）。 如果你的js已经坏了，那么它也已经坏了。

也可以（我自己做过）使用 webview 从 android 浏览器“调试”代码。您可以让 webview 捕获所有方法调用（即 console.log）。使用它，您可以捕获并保存消息，或将消息转发到 logcat。

与您已经尝试过的方法有关 - 当您在 iOS 上启用调试控制台时，您在哪里寻找交互/日志记录输出？更具体地说，您是否检查了 xCode/iPhone 模拟器中的调试控制台？

【参考方案8】：

Adobe 的Shadow 实用程序（刚刚发布）允许您使用weinre 进行远程调试，而无需将任何代码注入您的网页。它与 Windows 和 Mac 上的 Chrome 作为“主”浏览器配合使用，并将每个页面导航同步到运行 iOS 或 Android 客户端的任意数量的设备。

请注意，weinre 本身有些受限。例如，您将无权访问“网络”选项卡。