How to debug remote iOS device using Chrome DevTools

Jun 22, 2016 · 2 min read

After some night surfing on the internet, I’ve found Google’s repository about proxying DevTools for iOS devices. It makes a proxy server to inspect your mobile safari experience from Chrome’s DevTools. Usually, you do it from Safari’s Web Inspector from Developers tab, but if you prefer Chrome and its DevTools, take following instructions.

Installing:

The only thing you need to install is ios-webkit-debug-proxy package:

Running:

Open Safari in your device or Simulator first and run (Chrome v45+ tested):

It will detect all your available devices and list them on the port 9221 like:

• The list of all devices: localhost:9221
• The first connected device goes to: localhost:9222
• The second connected device goes to: localhost:9223
• etc…

Note: d ue to the error that Chrome does not allow opening the URL chrome-devtools:// from the DOM, you might need to navigate by clicking at Open in new tab or copy the given URL and paste it to your address bar.

It must look like this:

Note 2: You need to enable Web Inspector on your iOS device:

For the first time, it may throw an error that it can’t connect to Safari in a device (even if you have Web Inspector enabled). Try to remove the USB cable and plug it again.

How to debug an HTML page in iOS Safari using Windows machine and Chrome DevTools?

This is a quick how-to article that should help you with setting up an html page/website debugging session in iOS Safari using a Windows machine and Chrome DevTools.

Prerequisites:

• First of all, you will need to install iTunes on your Windows machine where you are planning to debug the web app. Specifically, we need the following tools:
  Apple Mobile Device Support and Apple Application Support.
  Download link: https://www.apple.com/itunes/download/
• Node.js will be also required, please download it and install if you don’t have it already.
  Download link: https://nodejs.org/en/

Step 1

• Connect your iOS device to your Windows 10 PC via USB
• On your iOS device, go to Settings > Safari > Advanced and enable Web Inspector, more details can be found here.

Step 2

Instal the RemoteDebug iOS WebKit Adapter npm package:
npm i -g remotedebug-ios-webkit-adapter

Step 3

Install the iOS WebKit Debug Proxy, the easiest option is probably to use the scoop tool:

• Powershell script to install the scoop tool:
  iex (new-object net.webclient).downloadstring(‘https://get.scoop.sh’)
  (the scoop tool installation details can be found here as well)
• Additionally, we need to add the ‘extras’ scoop bucket with the following command:
  scoop bucket add extras https://github.com/lukesampson/scoop-extras.git
• And finally, we can install the iOS WebKit Debug Proxy by executing the following command:
  scoop install ios-webkit-debug-proxy

Step 4

Now we can start the debugging session of a page opened in iOS Safari browser using your Windows machine:

Is it possible debug iOS Chrome on Windows 10?

As the title says, I need to debug a website opened with mobile Chrome on an iOS device (iPod, iPad etc.) on Windows 10. I have successfully set up iOS Safari debugging on Windows 10 via Chrome DevTools (GitHub repo , helpful comment). I would love to do the same thing except with Chrome or Firefox and not Safari. Is it even possible?

2 Answers 2

Yes it is. You’ll need node first and (web inspector enabled on iOS>Settings>Safari) then.

1. Install weinre sudo npm -g i weinre (or) npm i -g weinre
2. Run weinre weinre —boundHost YOUR_IP:PORT
3. When it runs copy paste the following script to your code

Connect your iOS device via USB

Go to http://YOUR_IP_ADDRESS:PORT/client/ from your browser (your pc) where you want to debug and you’ll see your device.

Error in Step 2

If you see any error in step 2, first check your IP via ipconfig and then bound a similar IP with a free port that is not being used. For example my local ip is 192.168.1.5 so I used the same with a free port — 192.168.1.5:4576

Error in Step 5

If you can’t see your device try adding a name myDevice to the script in Step 3 as follows

Then in Step 5, when reaching your device add the device name to the URL as http://YOUR_IP_ADDRESS:PORT/client/#myDevice

If everything runs fine, you’ll be able to inspect your code, read indexedDB, session and localStorage and see outputs in Console among other dev tools.

Debug ios chrome on windows

Update on RemoteDebug iOS WebKit Adapter

RemoteDebug is now superseeded by https://inspect.dev/ – a new developer tool for macOS and Windows to inspect and debug your web apps and websites in Safari and WebViews on iOS devices 🤯 🎉 🔥

Maintenance status: RemoteDebug iOS WebKit Adapter is not proactively maintained or extended.

RemoteDebug iOS WebKit Adapter

RemoteDebug iOS WebKit Adapter is an protocol adapter that Safari and WebViews on iOS to be debugged from tools like VS Code, Chrome DevTools, Mozilla Debugger.html and other tools compatible with the Chrome Debugging Protocol.

1) Install dependencies

Before you use this adapter you need to make sure you have the latest version of iTunes installed, as we need a few libraries provided by iTunes to talk to the iOS devices.

Follow the instructions to install ios-webkit-debug-proxy and libimobiledevice

Make sure you have Homebrew installed, and run the following command to install ios-webkit-debug-proxy and libimobiledevice

2) Install latest version of the adapter

3) Enable remote debugging in Safari

In order for your iOS targets to show up, you need to enable remote debugging.

Open iOS Settings => Safari preferences => enable «Web Inspector»

4) Make your computer trust your iOS device.

On MacOS you can use Safari to inspect an iOS Safari tab. This will ensure the device is trusted.

On Windows starting iTunes could prompt the «Trust this computer» dialog.

5) Run the adapter from your favorite command line

BTW: ios-webkit-debug-proxy will be run automatically for you, no need to start it separately.

6) Open your favorite tool

Open your favorite tool such as Chrome DevTools or Visual Studio Code and configure the tool to connect to the protocol adapter.

Usage with Chrome (Canary) and Chrome DevTools

You can have your iOS targets show up in Chrome’s chrome://inspect page by leveraging the new network discoverbility feature where you simple add the IP of computer running the adapter ala localhost:9000 .

Using with Mozilla debugger.html

You can have your iOS targets show up in Mozila debugger.html, by starting remotedebug_ios_webkit_adapter —port=9222 and selecting the Chrome tab.

Using with Microsoft VS Code

Install VS Code, and the VS Code Chrome Debugger, then create a launch.json configuration where port is set to 9000, like below:

The protocol adapter is implemented in TypeScript as Node-based CLI tool which starts an instance of ios-webkit-debug-proxy, detects the connected iOS devices, and then starts up an instance of the correct protocol adapter depending on the iOS version.

Is there any way to debug chrome in any IOS device

Is there any way to debug chrome browser on IOS device?

If there is no way, how i can approach to bug in chrome on ios?

Searched the web and didn’t find sufficient answer.

2 Answers 2

Old Answer (July 2016):

You can’t directly debug Chrome for iOS due to restrictions on the published WKWebView apps, but there are a few options already discussed in other SO threads:

If you can reproduce the issue in Safari as well, then use Remote Debugging with Safari Web Inspector. This would be the easiest approach.

WeInRe allows some simple debugging, using a simple client-server model. It’s not fully featured, but it may well be enough for your problem. See instructions on set up here.

You could try and create a simple WKWebView browser app (some instructions here), or look for an existing one on GitHub. Since Chrome uses the same rendering engine, you could debug using that, as it will be close to what Chrome produces.

There’s a «bug» opened up for WebKit: Allow Web Inspector usage for release builds of WKWebView. If and when we get an API to WKWebView , Chrome for iOS would be debuggable.

Update January 2018:

Since my answer back in 2016, some work has been done to improve things.

There is a recent project called RemoteDebug iOS WebKit Adapter, by some of the Microsoft team. It’s an adapter that handles the API differences between Webkit Remote Debugging Protocol and Chrome Debugging Protocol, and this allows you to debug iOS WebViews in any app that supports the protocol — Chrome DevTools, VS Code etc.

Check out the getting started guide in the repo, which is quite detailed.

If you are interesting, you can read up on the background and architecture here.