RemoteDebug iOS WebKit Adapter

This is a slightly modified version forked from https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter for be used with iOS 12.2+.

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.

Read more in the introduction blog post on Medium: Hello RemoteDebug iOS WebKit Adapter: iOS web debugging with Chrome DevTools, VS Code & Mozilla Debugger.html 📡📱

Getting Started

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.

Linux

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

Windows

Install ios-webkit-debug-proxy and libimobiledevice. On Windows you can use scoop:

If you don't have scoop just open a PowerShell and execute:

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

and then install with it the dependecies:

scoop bucket add extras
scoop install ios-webkit-debug-proxy
npm install -g vs-libimobile

OSX/Mac

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

brew update
brew unlink libimobiledevice ios-webkit-debug-proxy usbmuxd
brew uninstall --force libimobiledevice ios-webkit-debug-proxy usbmuxd
brew install --HEAD usbmuxd
brew install --HEAD libimobiledevice
brew install --HEAD ios-webkit-debug-proxy

2) Install latest version of the adapter

This is a forked and modified version of the original RemoteDebug iOS WebKit Adapter with some improvements for running correctly on iOS 12.2+. The best way to use it is cloning this repo or download the zipped version from github, and then execute in the containing folder:

npm install

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

Jut run this command and the project will be automatically built and run on the default port (9000)

npm start

if you want to specify a custom port use:

node out/index.js --port=9222

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.

Configuration

Usage: remotedebug_ios_webkit_adapter --port [num]

Options:
  -p, --port  the adapter listerning post  [default: 9000]
  --version   prints current version

Usage

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:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "iOS Web",
            "type": "chrome",
            "request": "attach",
            "port": 9000,
            "url": "http://localhost:8080/*",
            "webRoot": "${workspaceRoot}/src"
        }
    ]
}

Architecture

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.

How to contribute

npm install
npm start

Diagnostics logging

DEBUG=remotedebug npm start

License

MIT