ios - 使用 Chrome DevTools 调试 iOS 6+7 Mobile Safari

Question

iOS 6 内置了对远程调试的支持 (1 minute screencast)。它与新的 Safari Web Inspector 配合得很好，它似乎是 WebKit Inspector 的 1 年前的分支。它缺少一些功能，例如 JS 编辑和 WebSocket 帧检查。

Safari's Web inspector does use the WebKit remote debugging protocol. However, Safari does not use TCP/HTTP as a transport layer, thus making it incompatible with Chrome.

says Timothy Hatcher (aka Xenon), Apple employe

• Safari 将什么用于传输层？
• 我可以从这个神秘的传输层创建一个代理到 HTTP 以使其与 Chrome DevTools 一起工作吗？

Answer 1

iOS WebKit Debug Proxy项目实现了这一点。

首先，使用自制软件安装:

brew install ios-webkit-debug-proxy

运行模拟器(如果运行模拟器):

SIM_DIR=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer
  "$SIM_DIR/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator" \
  -SimulateApplication \
  $SIM_DIR/SDKs/iPhoneSimulator6.1.sdk/Applications/MobileSafari.app/MobileSafari

运行代理:

ios_webkit_debug_proxy

检查错误

在设备上查看错误消息:

Could not connect to lockdownd. Exiting.: No such file or directory. Unable to attach inspector ios_webkit_debug_proxy

然后检查设备是否有提示like this (iOS 7 示例:)

Trust the currently connected computer?

选择“信任”并尝试重新运行代理:

ios_webkit_debug_proxy

打开默认的开发者工具

然后打开http://localhost:9221

默认情况下，DevTools 是旧版本(从大约 2012 年 3 月的 Chrome 18 开始)。

尝试现代开发工具

由于protocol更改，部分现代 DevTools 前端可能无法完全工作。你可以打开试试

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/pag‌​e/2

其中 port 和 page 值是您从 http://localhost:9221 看到的值。同样，这可能确实有问题。

在 ios-webkit-debug-proxy project page 阅读更多文档.

---

更新: 这适用于 iOS7 as well . 更新:通过 patrick 添加了新的 devtools 前端指令.. 更新:将 devtools.html 更改为 inspector.html for Chrome 45 ，以及通过 Scheintod 进行的新的 ws hack。