How to debug remote iOS device using Chrome DevTools

nikoloza
nikoloza
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.


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

Mac:

brew 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-devgit clone git@github.com:google/ios-webkit-debug-proxy.git
cd ios-webkit-debug-proxy
./autogen.sh
make
sudo make install

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:


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 in your iPhone:

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.