How to debug remote iOS device using Chrome DevTools

How to debug remote iOS (real device iPhone, iPad) Safari from Chrome devtools

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:

Mac:

brew install ios-webkit-debug-proxy

Windows:

scoop bucket add extras
scoop install ios-webkit-debug-proxy

Linux:

sudo apt-get install autoconf automake libusb-dev libusb-1.0-0-dev libplist-dev libplist++-dev usbmuxd libtool libimobiledevice-dev libssl-dev

git clone https://github.com/google/ios-webkit-debug-proxy.git
cd ios-webkit-debug-proxy

./autogen.sh
make
sudo make install

Running:

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

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

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

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:{port}/devtools/page/1

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

Settings > Safari > Advanced > Web Inspector

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.

For troubleshooting, please check check ios-webkit-debug-proxy/issues