Instructions not clear for Linux

[avnermosh]

Hi,
The instructions in here are not clear to me.
Specifically, instruction "6) Open your favorite tool"

I want to debug a web application that runs in the browser on an iOS device (iPhone, or iPad) from
Google Chrome devtools that runs on a Linux webserver

My environment is:
Linux (Ubuntu 18.04) with Chrome 74 devtools
iPhone with iOS 12.3.2
iPad with iOS 12.2
webserver is on the Linux machine
web client (browser) is Safari or Chrome on the iPhone / iPad

I followed the instructions as described:

1. Install dependencies - followed the Linux instructions - ios-webkit-debug-proxy and libimobiledevice installed ok
   I plugged in an iOS device to my Linux machine (via USB)
   I can list the device via "idevice_id -l" (see snippet1 below)

2. Install latest version of the adapter - followed the instructions

3. Enable remote debugging in Safari - followed the instructions (enabled "Web Inspector")

4. Make your computer trust your iOS device. I did not follow any instructions (there are no instructions for Linux)

5. Run the adapter from your favorite command line - I followed the instructions
   remotedebug_ios_webkit_adapter --port=9000
   I verified that the proxy is running (see snippet2 below)

6. Open your favorite tool
   Here I'm not clear on how to configure Chrome DevTools to connect to the protocol adapter
   I opened a tab in Devtools http://localhost:9000/ and it shows
   {"msg":"Hello from RemoteDebug iOS WebKit Adapter"}
   I don't know what I should do with it...

The instructions in "Usage with Chrome (Canary) and Chrome DevTools" are also not clear to me
There is no Chrome Canary for Linux I files another issue here
I opened another tab in Chrome (stable) and typed:
chrome://inspect/#devices

In the page, I see "Remote Target" but there no pages are listed underneath (although in my iOS device safari is openned with some tabs)

Thanks,
Avner

---

snippet1 - An iOs device that is plugged to the Linux machine can be listed

idevice_id -l 
131af37a2f93625a0376ae01dc3ae484579c8105

snippet2 - verify that the proxy is running

ps aux | grep webkit
avner    19060  0.2  0.3 981448 56112 pts/5    Sl+  21:38   0:02 remotedebug-ios-webkit-adapter
avner    19089  0.0  0.0  52572  5904 ?        Ss   21:38   0:00 /usr/local/bin/ios_webkit_debug_proxy --no-frontend --config=null:9100,:9101-9201
avner    19841  0.0  0.0  14428  1096 pts/6    S+   21:52   0:00 grep --color=auto -i webkit

[ewanharris]

Hey @avnermosh,

So on step 6 when you're on chrome://inspect you should see a Configure... button

If you click that and enter the IP and port you used (so the default will be localhost:9000) Chrome will begin to discover the available debug targets. I don't currently have a device to hand to confirm, but you might also need to enable Web Inspector on your device, see Safari on iOS here

[avnermosh]

Hi @ewanharris ,
I enabled Web Inspector on my iPad Pro.
I entered the default IP and port, localhost:9000, as you suggested (see image1)

Still, the iPad does not appear in the list of remote targets (see image2) (it does show up in the file system when I plug it into my Linux machine, for file transfer, etc...)
as well as in idevice_id -l (see snippet1 in the original post)

Do you have any other idea on what to do?

Thanks,
Avner

p.s. versions of ios_webkit_debug_proxy, remotedebug_ios_webkit_adapter

/usr/local/bin/ios_webkit_debug_proxy --version
ios_webkit_debug_proxy 1.8.5
Built with libimobiledevice v1.2.1, libplist v2.0.0

cd ~/Downloads
sudo npm install remotedebug-ios-webkit-adapter -g

remotedebug_ios_webkit_adapter --version 
0.3.2

which remotedebug_ios_webkit_adapter 
/usr/local/bin/remotedebug_ios_webkit_adapter

image1 - discovery settings, in Chrome in my Ubuntu 18.04 machine

image2 - iPad does not show up in the list of remote targets, in Chrome in my Ubuntu 18.04 machine

[avnermosh]

The instructions mention to use Chrome Canary. But there is no Chrome Canary for Linux (see here: https://askubuntu.com/questions/309813/how-to-have-google-chrome-canary-on-ubuntu).
What flavor and version of Chrome should be used when using Linux to remote debug?
Thanks

[uragun91]

The same issue for me, I cannot see my iphone on linux

[kolbasa]

Same problem for me.

[vendramini]

I see my iphone on Linux, but when I click to inspect the window is totally blank.

Chrome: Version 78.0.3904.70 (Official Build) (64-bit)

[Dylanderv]

I just used this tool with vscode on linux (my chrome debug did not find my device)
It seems that even if you add the --port=9000 on cli tool the port isn't 9000 (dunno if it is mentioned anywhere, maybe i already have something attached to my port 9000)

Anyway, I used this:

DEBUG=remotedebug remotedebug_ios_webkit_adapter --port=9000

With DEBUG=remotedebug, you can have more log, and it will show you information about your device and the port attached.
For me it was:

{ 
devtoolsFrontendUrl: '',
  faviconUrl: '',
  thumbnailUrl:  'URL',
  title: 'TITLE',
  url: 'URL',
  webSocketDebuggerUrl: 'ws://127.0.0.1:9101/devtools/page/1',
  appId: 'PID:187' } { deviceId: 'ID',
  deviceName: 'iPhone',
  deviceOSVersion: '9.3.6',
  url: '127.0.0.1:9101',
  version: '9.3.6' 
}

The port attached was 9101, so I just used this launch.json config on vscode:

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

And it worked. I hope it will help someone :)

[BruneXX]

Hi @Dylanderv doing that are you currently able to debug in chrome 80.x ? that will be awesome. thanks

[john-doherty]

I can confirm @Dylanderv suggestion worked for me using Google Chrome Debugger, steps are:

1. run DEBUG=remotedebug remotedebug_ios_webkit_adapter --port=9000
2. copy port number from webSocketDebuggerUrl, in my case it was 9101
3. open Chrome with chrome://inspect/#devices
4. open Discover network targets > Configure
5. Addlocalhost:9101 (or whatever your port number is)
6. Click Done
7. Connected devices should appear

[avnermosh]

Recently I repeated the steps and was able to debug remote using
Chrome stable (not Canary) (e.g. chrome version 87.0.4280.141 (Official Build) (64-bit))

The instructions could be updated.

---

In the section: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter#usage-with-chrome-canary-and-chrome-devtools
the instructions can be generalized from:
Usage with Chrome (Canary) and Chrome DevTools
to:

  Usage with:
  - Chrome (Canary), or
  - Chrome stable (e.g. chrome version 87.0.4280.141 (Official Build) (64-bit))
  and Chrome DevTools

---

In the section: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter#linux
the instructions can be updated from:

Follow the instructions to install [ios-webkit-debug-proxy](https://github.com/google/ios-webkit-debug-proxy#installation) and libimobiledevice

to:

Follow the instructions to install [ios-webkit-debug-proxy](https://github.com/google/ios-webkit-debug-proxy#installation) and libimobiledevice
  Use https://github.com/libimobiledevice/libimobiledevice/issues/1067#issuecomment-726234592 to build from source and install the packages libmobiledevice, libusbmuxd, usbmuxd, libplist, as a workaround for the instructions in the install [ios-webkit-debug-proxy](https://github.com/google/ios-webkit-debug-proxy#installation) link.

[auchenberg]

This project is now super-seeded 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.

RemoteDebug iOS WebKit Adapter is not proactively maintained or extended.