Remote Debugging for Chrome iOS (and Safari)

Asked 29/6, 2012 at 12:58 Answered 1/8, 2023 at 2:30

Solved google-chrome google-chrome-devtools chrome-for-ios

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.

Garrote answered 29/6, 2012 at 12:58 Comment(3)

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). – Ludly 2/2, 2015 at 15:36

Remote debugging with Safari only supports Mobile Safari, not iOS Chrome. – Grassy 14/3, 2018 at 20:3

Please take a look medium.com/@nikoloza/… – Salute 6/9, 2018 at 14:12

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

Connect your iDevice via USB with your Mac
Open Safari on your Mac and activate the dev tools
On your iDevice: go to settings > safari > advanced and activate the web inspector
Go to any website with your iDevice
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

Marris answered 26/9, 2012 at 17:23 Comment(10)

Yep, I'm already using this one. Finally! It sucks that the windows version of Safari does not have it though. – Garrote 26/9, 2012 at 18:5

I hope Chrome will enable the same feature soon, so that it works across all OS. – Marris 27/9, 2012 at 13:17

I think apple will have to enable remote debugging for WebViews and not just mobile safari for this to work since chrome is just using webviews. – Garrote 27/9, 2012 at 14:40

Yes - on an IOS device, apple does not allow alternative installs of webkit and all apps must use the webkit version installed on the device. So Chrome on an IOS device is just webviews with chrome tool bars :) – Andrus 18/7, 2013 at 13:25

For iOS 7 you need to install Safari 6.1 in order to use remote debugging which right now is only available for developers and requires at least OS X 10.7: developer.apple.com/downloads/index.action?name=Safari%206.1 – Lakh 9/10, 2013 at 19:40

Yes - it sure would be nice if this answered the question that was asked! – Heywood 15/11, 2013 at 19:57

Turning private browsing off is no longer a requirement. – Closeup 24/7, 2014 at 22:18

Downvote reason: Questions asks for Chrome not Safari. – Moffitt 25/11, 2015 at 9:46

Guys, if we had a mac and were apple minded i'm sure we wouldn't ask this question ... – Seiber 10/8, 2017 at 18:41

upvoted for sending into better answer :) that what I call good SO users – Saraband 24/5, 2018 at 12:54

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

Atul answered 26/2, 2014 at 16:33 Comment(20)

This is the only correct answer, all other relate to Safari (walk in a park) – Lasonyalasorella 4/3, 2014 at 0:13

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). – Breadstuff 3/5, 2014 at 2:12

I needed to refresh my browser after installing the bookmarklet to get it to work. – Erlandson 11/3, 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. – Genip 7/1, 2016 at 11:45

Do your phone and your pc have to be on the same network? I noticed that the 4th bullet point calls for the wifi-ip – Burgher 27/1, 2016 at 20:23

@Burgher Yes, both needs to be connected to the same wifi network, or use a publicly available IP/domain instead of wifi-ip-address. – Atul 28/1, 2016 at 9:27

fwiw, to debug sites that are accessible through https only, follow these instructions. The given command line to launch ngrok is missing a http (ngrok command), otherwise it worked like a charm. – Heartbreaking 9/2, 2016 at 11:50

browser-sync comes with this and seems like it is a bit easier to install. browsersync.io It also has a couple of other things worth the install. – Vanburen 19/2, 2016 at 7:8

This worked for me without URL encoding the bookmarklet in Mobile Safari. – Harvest 26/12, 2016 at 20:13

You'll have to add the script tag to the BOTTOM of the page. – Novelistic 20/1, 2017 at 19:54

Downvoted. I hope you understand that it is too hard to use a tutorial which contains a lot of missed info. Open http://{wifi-ip-address}:8080/ and copy the target script code - what is that? Where is wi-fi appeared? I use a pc without wi-fi + device with wi-fi - what should I do. And the same for next steps - totally unclear and useless without of additional info. – Enugu 21/2, 2017 at 14:28

@VyachaslavGerchicov Sorry, it's hard to find the balance between too much and too little info. You need an IP-address to your development computer from your iOS device to connect to the WeInRe server. The easiest is to connect both to the same WiFi-network and type in the IP-address of your computers WiFi network interface. How to do this depends on computer and OS, so you need to google how to do that on your computer. When you find the IP-address and open the page (http://{wifi-ip-address}:8080/) - you'll find the target script code and probably other parts you're missing. – Atul 27/2, 2017 at 20:50

ngrok seems to want me to pay to use TLS, anyone gotten around that? – Sibyls 7/8, 2017 at 23:27

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). – Jerusalem 12/9, 2017 at 14:26

FYI, Vorlon (recommended in one of the answers) is way easier to setup. – Regenaregency 6/10, 2017 at 10:54

This should be the accepted answer. The current accepted answer is not even addressing the technical question whether Chrome for iOS can be debugged by using the common approach of attaching a remote debugging console. weinre is likely the best solution for iOS debugging right now (if you can't use Web Inspector for iOS), but unsuitable for some tasks (try debugging a service worker with that)... – Boost 22/11, 2017 at 15:32

@Vanburen Browser-sync a bit easier to install? How do I set it up at all for this use case? Stared at the site for 10 minutes, still have no idea. What happens after I install it, how can I debug the page on my phone remotely now? The site says nothing about it. It says something about grunt and gulp, I don't use them, now what? – Scipio 9/1, 2018 at 13:10

weinre doesn't support https, this is a big problem – Intramolecular 25/1, 2018 at 10:16

weinre homepage now has a huge banner warning that it is out of date – Mister 7/2, 2018 at 21:55

Another option for Chrome: medium.com/@nikoloza/… – Salute 6/9, 2018 at 14:13

121