iOS Remote Debugging

Question

The selected answer is only for Safari. At the moment it's not possible to do real remote debugging in Chrome on iOS, but as with most mobile browsers you can use WeInRe for some simple debugging. It's a bit work to set up, but lets you inspect the DOM, see styling, change DOM and play with the console.

To setup:

• Install nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Open http://{wifi-ip-address}:8080/ and copy the target script code
• Paste the script tag into your page (or use the bookmarklet)
• Click on the link to the debug client user interface (http://{wifi-ip-address}:8080/client/#anonymous)
• When you get a green line under Clients the browser is connected

The bookmarklet is a bit more of an hassle to install. It's easiest if you have bookmark-sync turned on for both desktop and mobile Chrome. Copy the bookmarklet url from the local weinre server (same as above). Unfortunately it doesn't work because it's not url-encoded properly. So open the JavaScript console and type in:

copy(encodeURI('')); // paste bookmarklet inside quotes

You should now have the url-encoded bookmarklet in your clipboard. Paste it into a new bookmark under Mobile Bookmarks. Call it weinre or something simple to type. It should be synced to your mobile pretty fast, so load the page you want to inspect. Then type in the bookmark name in the url-bar, and you should see the bookmarklet as an auto-complete-suggestion. Click it to run bookmarklet code :)

Update:

This is not the best answer anymore, please follow gregers' advice.

New answer:

Use Weinre.

Old answer:

You can now use Safari for remote debugging. But it requires iOS 6.

Here is a quick translation of http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

1. Connect your iDevice via USB with your Mac
2. Open Safari on your Mac and activate the dev tools
3. On your iDevice: go to settings > safari > advanced and activate the web inspector
4. Go to any website with your iDevice
5. On your Mac: Open the developer menu and chose the site from your iDevice (its at the top Safari Menu)

As pointed out by Simons answer one need to turn off private browsing to make remote debugging work.

Settings > Safari > Private Browsing > OFF

You cannot directly remote debug Chrome on iOS currently. It uses a uiWebView that may act subtly different than Mobile Safari.

You have a few options.

Option 1: Remote-debug Mobile Safari using Safari's inspector. If your issue reproduces in Mobile Safari, this is definitely the best way to go. In fact, going through the iOS simulator is even easier.

Option 2: Use Weinre for a slimmed down debugging experience. Weinre doesn't have much features but sometimes it's good enough.

Option 3: Remote debug a proper uiWebView that functions the same.

Here's the best way to do this. You'll need to install XCode.

1. Go to github.com/paulirish/iOS-WebView-App and "Download Zip" or clone.
2. Open XCode, open existing project, and choose the project you just downloaded.
3. Open WebViewAppDelegate.m and change the urlString to be the URL you want to test.
4. Run the app in the iOS Simulator.
5. Open Safari, Open the Develop Menu, Choose iOS Simulator and select your webview.
6. Safari Inspector will now be inspecting your uiWebView.

From my understanding, Google Chrome utilizes the iOS's UIWebView rather than a full blown implementation of Chrome like the Android counterpart.