iOS Remote Debugging

Question

With the recent release of Chrome for iOS, I was wondering how do you enable remote debugging for Chrome iOS?

Update: With the release of iOS 6, remote debugging can now be done with Safari.

Answer 1

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 :)