78

iOS 6 comes with built-in support for remote debugging (1 minute screencast). It plays nice with the new Safari Web Inspector which seems to be a 1 year old fork of WebKit Inspector. It misses some features such JS editing and WebSocket frames inspection.

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

  • What does Safari use for transport layer?
  • Can I make a proxy from this mysterious transport layer to HTTP to make it work with Chrome DevTools?
NVI
  • 14,907
  • 16
  • 65
  • 104

2 Answers2

93

The iOS WebKit Debug Proxy project enables this.

screenshot

To get started, install with homebrew:

brew install ios-webkit-debug-proxy

Run the simulator (if running simulator):

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

Run the proxy:

ios_webkit_debug_proxy

Check for errors

Look on the device for an error message:

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

Then check the device for a prompt like this (iOS 7 example: )

Trust the currently connected computer?

Choose "Trust" and try rerunning the proxy:

ios_webkit_debug_proxy

Open default devtools

Then open http://localhost:9221

The DevTools are, by default, an older version (from Chrome 18 circa March 2012).

Try modern devtools

Due to protocol changes, parts the modern DevTools frontend may not work completely. You can try by opening

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

where the port and page values are the values you're seeing from http://localhost:9221. Again, this may indeed be buggy.

Read more docs at the ios-webkit-debug-proxy project page.

Update: This works with iOS7 as well. Update: Added fresh devtools frontend instructions via patrick.. Update: Changed devtools.html to inspector.html for Chrome 45, and the new ws hack via Scheintod.

Community
  • 1
  • 1
NVI
  • 14,907
  • 16
  • 65
  • 104
  • 4
    Please guys let me know if there's a Windows version for it. Tks! – ed1nh0 Sep 19 '13 at 17:52
  • I use chromes current devtools, but use chrome-devtools://devtools/bundled/devtools.html?host=localhost:9222&page=1 - making sure the localhost:port&page=# is the same as the one created for you when you go through port 2221 – Patrick Sep 21 '13 at 04:49
  • 5
    Could not connect to lockdownd. Exiting.: No such file or directory Unable to attach 66c5cb9cc4d362b2aecf208axxxxxxxxxxxxx inspector – tmaximini Oct 09 '13 at 09:29
  • 4
    @ed1nh0 just finished win32 port https://github.com/artygus/ios-webkit-debug-proxy-win32 – artygus Feb 05 '14 at 09:41
  • @artygus Looks great except I don't see any styles. – peater Feb 26 '14 at 18:52
  • 2
    @pppeater yeah, works best with iOS6.. the tool has some issues with iOS7, i suggest using the latest devtools (only for iOS7) bundled with Chrome - it solves some issues. but generally "hackish" rules breaks styles tab – artygus Feb 26 '14 at 19:41
  • 1
    @artygus I tried with the last version of Chrome before the switch to Blink (not sure if it actually matters) and I can see styles: https://chrome-devtools-frontend.appspot.com/static/27.0.1453.116/devtools.html?host=localhost:9222&page=2 – peater Feb 26 '14 at 20:58
  • 1
    @pppeater it's related to https://github.com/google/ios-webkit-debug-proxy/issues/20 i guess – artygus Feb 28 '14 at 21:08
  • @NVI I still can not debug javascript function. Can I do it? – sahara108 Mar 26 '14 at 10:00
  • @sahara108 I have not used it but I found this page linked from weinre: http://lexandera.com/aardwolf/ – peater May 29 '14 at 17:39
  • For those waiting for Windows support, there's another option in the meantime: http://autumnator.wordpress.com/2014/06/13/debugging-mobile-and-tablet-websites-on-ios-on-windows-or-locally-on-device/ – David Jul 31 '14 at 05:12
  • 2
    I only got this to work via `ws` parameter. You can get a webservice url if you call `localhost:9222/json` and then append this like so: `chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9222/devtools/page/2` – Scheintod Dec 04 '14 at 16:29
  • Can I use for this tool for debugging iOS apps (i.e: sencha touch). Can anyone suggest me please ? Or any such tool which help in debugging iOS apps (hybrid apps) by using chrome dev tools. – Yash Vekaria Mar 11 '15 at 06:00
3

According to https://github.com/andydavies/node-iosdriver,

Safari uses the same debugging commands as Chrome but wrapped as binary plists over RPC rather than JSON over websockets.

So, yes, it would possible to write a proxy.

I found this thread by looking at what TCP connections Safari was making while connected to the MobileSafari inspector, seeing that it was connected to a process called webinspectord and Googling that:

# 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
Community
  • 1
  • 1
also
  • 974
  • 7
  • 21