Start mobile browsers with webkit remote debugging ON - mobile

Question

At Google I/O 2011: Chrome Dev Tools Reloaded, Paul Irish and Pavel Feldman introduced new remote debugging feature — which was in passing included into webkit.
--
This is great news, particularly for mobile web-developers.
But how do we enable it, for example launching IOS simulator, or just running Safari Mobile on an iPhone? (for chrome this is traditionally done with --remote-debugging-port=9222 option while launching it).
I tried enabling developer mode in safari settings (Settings > Safari > Developer > Debug Console: ON) but without success...
I don't know about android here, but does anyone know when Apple (Safari Mobile) or Google (android's browser) will include this new feature so we can enjoy remote-debugging in mobile development?
Thank you.
Ref: http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/#comment-63113

Answer 1

Safari on iOS 6
In iOS6 you can now remote debug from Safari 6 (only OS X). On the device, open Settings > Safari > Advanced > Enable Web Inspector. Open Safari Preferences, Advanced, check "Show Develop menu in menu bar". Connect your iPhone/iPad with a USB cable. Now under the Develop menu bar you should get a submenu for you device with the tabs you have open in Safari on your device.
Safari on iOS 7
In addition to requirements above you will need Safari 6.1, which at the moment (Oct. 8th 2013) is only available as a seed for developers: https://developer.apple.com/downloads/index.action?name=Safari%206.1
Chrome on Android 4
It's a bit more complicated on Android. Instructions for remote debugging on Chrome for Android here: https://developers.google.com/chrome/mobile/docs/debugging
I haven't found a way to enable remote debugging in the Android default browser (v4.04).

Answer 2

Take a look at this bash script to start the remote inspector with iOS simulator: https://gist.github.com/2241976

Answer 3

It's now supported in Chrome for Android.

Answer 4

Currently no mobile browser is implementing the webkit remote debugging protocol. (Maybe you can get custom builds for android that support it)
However there is weinre, which is giving you a remote version of the web-inspector. But you have to include some code in your page in order to support it. (Because it's not a browser feature).
Weinre website
Weinre github repo

Answer 5

Just because a feature is implemented in one port of WebKit (in this case, Apple and Chromium), does not mean it is always available elsewhere. I wrote this in details in my blog post about different WebKit ports implementation.
So far, the only mobile WebKit port which has the remote debugging feature is RIM Playbook browser.
For iOS, it is very difficult to know because Apple does not give any information about its future product ever. At least we know that iOS 5 will not have it since the beta versions do not show anything related.
For Android, definitely it is coming in a future release, since Android folks are adopting Chromium as the new basis for its WebKit.

Answer 6

Nathan de Vries figured out how to do this on iOS5 running in the simulator. It revolves around calling the private _enableRemoteInspector method.
Read it. Summary follows:
To enable this for Mobile Safari, attach to it with gdb and call the method:
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
Then access the inspector at http://localhost:9999/.
With an embedded UIWebView, enable it like this:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// ...Snipped...
[NSClassFromString(#"WebView") _enableRemoteInspector];
// ...Snipped...
}
On a real device it doesn't work, probably because the port is firewalled - if you have a jailbroken device you may get around that (update us if you do).

Answer 7

Thomas points out an excellent resource for remote debugging, however he states that you need to add the code to the webpage. This is not strictly true, as weinre also allows interaction through bookmarklets. Part way down the page here (under the section conveniently called "Using a bookmarklet"), it says it should work for Android 2.2+ and iOS.
Some relevant things to note:
It will not allow you to debug start errors (page already has to be loaded to open the bookmarklet).
It doesn't seem to reconnect if you lose connection (you have to refresh the page to get the connection again).
If your js is broken already, it will already be broken as well.
It is also possible (I have done it myself) to 'debug' code from the android browser using a webview. You can have the webview catch all method calls (ie. console.log). Using that you can catch and save, or forward the messages to logcat.
Related to the method you have already tried - when you enabled the Debug console on iOS, where were you looking for interaction/logging output? More particularly, did you check in the debugging console in xCode/iPhone simulator?

Answer 8

Adobe's Shadow utility (which was just released) allows you to debug remotely using weinre without needing to inject any code into your web pages. It works with Chrome on Windows and Mac as the "master" browser and will sync every page navigation over to any number of devices running the iOS or Android client.
Note that weinre itself is somewhat limited. For example you won't have access to the Network tab.