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


78

iOS 6内置了对远程调试的支持(1分钟截屏)。它与新的Safari Web Inspector配合使用时看起来不错,它似乎是WebKit Inspector的1年历史。它缺少一些功能,例如JS编辑和WebSocket框架检查。

Safari的Web检查器确实使用WebKit远程调试协议。但是,Safari并未将TCP / HTTP用作传输层,因此使其与Chrome不兼容。

苹果公司员工蒂莫西·哈彻(Timothy Hatcher,又名氙气)说

  • Safari在传输层使用什么功能?
  • 我可以从这个神秘的传输层到HTTP建立代理,以使其与Chrome DevTools一起使用吗?


1
上面发布的devforums.apple.com链接无效。
史蒂夫

它的工作,但你必须登录。
NVI

1
即使使用我的dev帐户登录,它也对我不起作用。我收到“发生错误”页面。
mbafford,2012年

4
对于没有登录的用户,答案是:“ Safari的Web检查器确实使用WebKit远程调试协议。但是,Safari并不使用TCP / HTTP作为传输层,因此使其与Chrome不兼容。”
埃里克·克里斯滕森

Answers:


93

iOS版的WebKit调试代理项目支持这个。

屏幕截图

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

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

检查错误

在设备上查找错误消息:

无法连接到已锁定。正在退出。:没有此类文件或目录。无法附加检查器ios_webkit_debug_proxy

然后检查设备是否出现类似这样的提示(iOS 7示例:)

信任当前连接的计算机吗?

选择“信任”,然后尝试重新运行代理:

ios_webkit_debug_proxy

打开默认的devtools

然后打开 http://localhost:9221

默认情况下,DevTools是较旧的版本(大约是2012年3月的Chrome 18)。

试用现代devtools

由于协议的更改,现代DevTools前端的某些部件可能无法完全工作。您可以尝试打开

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

其中portpage值是你看不到的值http://localhost:9221。再次,这确实可能是越野车。

ios-webkit-debug-proxy项目页面上阅读更多文档。


更新:这也适用于iOS7更新:通过patrick添加了新的devtools前端说明。。更新:将Chrome 45的devtools.html更改为inspector.html ,并ws通过Scheintod进行了新的修改。


3
大家让我知道是否有Windows版本。Tks!
ed1nh0 2013年

5
无法连接到已锁定。正在退出。:没有此类文件或目录无法附加66c5cb9cc4d362b2aecf208axxxxxxxxxxxxx检查器
tmaximini 2013年


2
@pppeater是的,与iOS6搭配使用效果最好。.该工具在iOS7中存在一些问题,我建议使用与Chrome捆绑在一起的最新devtools(仅适用于iOS7)-它可以解决一些问题。但一般来说,“骇人听闻的”规则会破坏样式标签
artygus

2
我只能通过ws参数使它起作用。如果调用localhost:9222/json,则可以获取一个Web服务URL ,然后像这样附加它:chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/2
Scheintod 2014年

3

根据https://github.com/andydavies/node-iosdriver

Safari使用与Chrome相同的调试命令,但通过RPC封装为二进制,而不是通过Websocket封装为JSON。

因此,是的,有可能编写代理。

通过查看Safari在连接到MobileSafari检查器时建立的TCP连接,发现了该线程,并发现它已连接到名为的进程webinspectord并使用Google搜索:

# pgrep -lf /Applications/Safari.app
33170 /Applications/Safari.app/Contents/MacOS/Safari -psn_0_21144617
# lsof -p 33170 | grep TCP
Safari  33170 ryan   16u    IPv6 0x799d5f43b472a241       0t0      TCP localhost:54892->localhost:27753 (ESTABLISHED)
# lsof -i :27753
COMMAND     PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
launchd     371 ryan   42u  IPv6 0x799d5f43b472aa01      0t0  TCP localhost:27753 (LISTEN)
Safari    33170 ryan   16u  IPv6 0x799d5f43b472a241      0t0  TCP localhost:54892->localhost:27753 (ESTABLISHED)
webinspec 33182 ryan    6u  IPv6 0x799d5f43b472aa01      0t0  TCP localhost:27753 (LISTEN)
webinspec 33182 ryan    7u  IPv6 0x799d5f43b181a621      0t0  TCP localhost:27753->localhost:54892 (ESTABLISHED)
# ps p 33182
  PID   TT  STAT      TIME COMMAND
33182   ??  S      0:00.28 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator6.1.sdk/usr/libexec/webinspectord

2
我现在使用ios-webkit-debug-proxy并已停止在node-iosdriver上工作
Andy Davies
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.