218

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.

3
  • 2
    Remote debugging now can be done with Safari on Mac. But if you are developing on Linux or Windows you still have to use weinre (as stated in gregers answer).
    – Dehalion
    Feb 2, 2015 at 15:36
  • 3
    Remote debugging with Safari only supports Mobile Safari, not iOS Chrome. Mar 14, 2018 at 20:03
  • 1
    Please take a look medium.com/@nikoloza/…
    – Machado
    Sep 6, 2018 at 14:12

16 Answers 16

237

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.

enter image description here

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

enter image description here

20
  • 27
    This is the only correct answer, all other relate to Safari (walk in a park) Mar 4, 2014 at 0:13
  • 2
    Very helpful instructions! I'll just add that, to install the bookmarklet, instead of doing the copy, you can just drag the provided "weinre target debug" bookmarklet link to your bookmarks toolbar (make the toolbar visible with Ctrl-Shift-B if it's not visible).
    – Kai Carver
    May 3, 2014 at 2:12
  • I needed to refresh my browser after installing the bookmarklet to get it to work.
    – ooolala
    Mar 11, 2015 at 15:17
  • npm install -g weinre was not working for me. So I had to run it with the version npm install -g [email protected]. check latest version here npmjs.com/package/weinre.
    – vinesh
    Jan 7, 2016 at 11:45
  • 1
    FWIW, weinre doesn't currently support shadow dom - it only shows the top level elements and their light dom. It also doesn't work for shady dom apart from the top-level elements and their shady-dom (and light dom too). Sep 12, 2017 at 14:26
121

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

10
  • 11
    Yep, I'm already using this one. Finally! It sucks that the windows version of Safari does not have it though.
    – Hyangelo
    Sep 26, 2012 at 18:05
  • 5
    I hope Chrome will enable the same feature soon, so that it works across all OS.
    – F Lekschas
    Sep 27, 2012 at 13:17
  • 49
    Yes - it sure would be nice if this answered the question that was asked! Nov 15, 2013 at 19:57
  • 4
    Turning private browsing off is no longer a requirement.
    – Miles
    Jul 24, 2014 at 22:18
  • 3
    Downvote reason: Questions asks for Chrome not Safari.
    – NickG
    Nov 25, 2015 at 9:46
53

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.

enter image description here

enter image description here

enter image description here

3
  • 7
    How to inspect iOS (iPhone / iPad) on a Windows using chrome? Is there any method for that? Mar 10, 2015 at 16:37
  • @SurjithSM This answer will not help with windows while you can't install XCode on windows and create ios app. Try this instead stackoverflow.com/a/22047495/1737158 Feb 25, 2017 at 23:40
  • I've already had experience with github.com/google/ios-webkit-debug-proxy which is awesome tool, and yesterday tried debugging Google Chrome with iOS Emulator - it most awesome experience. Thanks for #3 Mar 15, 2017 at 8:38
12

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

1
  • 1
    Yeah, found that out after I put up this question. That is a shame for apple really. I'm left this question open on the off chance that someone figured out a way to do it.
    – Hyangelo
    Jul 20, 2012 at 13:05
5

I recommend Vorlon, works like weinre. I like the UI of Vorlon, and it support SSL, my application is in HTTPS, I tried weinre with ngrok, ghostlab and vorlon, only vorlon works fine.

3

You also need to have 'Private Browsing' turned OFF.

Settings > Safari > Private Browsing > OFF

3
  • not sure why ppl downvote this answer. private browsing needs indeed to be switched off to allow remote debugging.
    – basecode
    Nov 14, 2013 at 14:23
  • 14
    @basecode Because it is a complementary answer which it should be in the comment.
    – GusDeCooL
    Dec 19, 2013 at 6:07
  • 3
    @GusDeCooL I see, thanks! A comment by a downvoter that explains this would have been helpful.
    – basecode
    Dec 19, 2013 at 9:01
3

I haven't tried it, but iOS WebKit debug proxy (ios_webkit_debug_proxy / iwdp) supposedly lets you remotely debug UIWebView. From the README.md

The ios_webkit_debug_proxy (aka iwdp) allows developers to inspect MobileSafari and UIWebViews on real and simulated iOS devices via the Chrome DevTools UI and Chrome Remote Debugging Protocol. DevTools requests are translated into Apple's Remote Web Inspector service calls.

1
3

Vorlon.JS can be used for remote debugging of iOS or any other client.

  1. Just install it globally using npm i -g vorlon
  2. Start server using vorlon
  3. With the server is running, open http://localhost:1337 in your browser to see the Vorlon.JS dashboard
  4. The last step is to enable Vorlon.JS by adding this script tag to your app:
    <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
  5. All connected clients e.g. iPhone, Android will become available in client list on Vorlon.JS dashboard enter image description here

Note that this approach can also be used to debug apps not running on localhost using ngrok. See https://stackoverflow.com/a/45443203/2073920 for details.

Disclaimer

I am just a user and I am not affiliated with Vorlon.JS and ngrok

1
  • I followed all the steps but my iPhone's outlook is not getting detected in the VorlonJS running in Mac Nov 25, 2019 at 21:59
3

iOS WebKit debug proxy is the simpliest solution - debug and live preview directly in Chrome.

3

Many remote consoles work fine. http://farjs.net is my project, and I was able to successfully debug issues specific to Crome iOS and not happening in safari using it. (and probably all other mobile browsers)

The problem is that injecting the debugging code is slightly tricky since Chrome doesn't allow you to install bookmarklets.

Instead you could open one tab on the page that you would debug, and another on farjs.com and then click "the bookmarklet"

Copy the bookmarklet JS code, get back to the first tab, with the page that should be debugged, and paste the bookmarklet code in the location bar.

Last step is to scroll to the beginning of the location bar and add "javascript:", since Chrome will remove it.

2
  • broken url farjs.com
    – KumailR
    Mar 11, 2021 at 5:34
  • Yeah, I renamed it to farjs.net since it's cheaper domain.
    – BlueStory
    Apr 8, 2021 at 15:32
2

I am using remotedebug-ios-webkit-adapter, works well for me with IOS and debugger open in Chrome on Windows 10.

Will be glad if it helps some one Link

2

2023 Update

with iOS 16.4+ you can remote debug iOS Chrome using Safari on a desktop/laptop, just like iOS Safari. Full instructions here:

https://developer.chrome.com/blog/debugging-chrome-on-ios/

1

Even I am looking for the same feature, and as of today, its yet to be implemented. I can think of two options however,

  1. I noticed that the behavior of Chrome and Safari are quite identical; Chrome even supports the Gyroscope and other related events which are supported by Safari. I am currently debugging my Web App by enabling the debug console on Safari (Through Settings->Safari)

  2. Also try Adobe Shadow, which allows remote debugging/inspection and Sync.

HTH.

1

Adobe Edge Inspect (https://creative.adobe.com/products/inspect) is another way to debug all your mobile devices IOS and Android (no Windows Phone though). It uses weinre for remote DOM inspection/changing. It's not the fastest of methods, but it works on Windows.

3
1

Note: I have no affiliation with Ghostlab creators Vanamco whatsoever.

It was important to me to be able to debug Chrome-specific problems, so I set out to find something that could help me with that. I ended up happily throwing my money at Ghostlab 3. I can test Chrome and Safari mobile browsers as if I was viewing them on my desktop. It just gives me a LAN address to use for any device I’d like to debug. Each application using that address will appear in the list in Ghostlab.

enter image description here

enter image description here

Highly recommended.

0

There is an open bug on Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Unfortunately they depend on Apple to open up an API in WKView for this to happen, after which maybe debugging will be available from Safari.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.