How to Debug IOS web apps on Windows

 

Require

+ Hardware:

• Computer can be PC or LAPTOP

• IPhone device

• Lighting cable

+ Software: 

Name	Description	URL	Version
ITunes	using for connect IPhone and Computer (get trusted certificate, using some libraries for talk with IOS)	Download	Latest
Chrome	Using debug tools on chrome for debug our device	Download	Latest
Node Js	Using Node Js to install tools and dependencies	Download	10.15.3
Scoop	Using for install and dependencies	Included in CMD
RemoteDebug iOS WebKit Adapter	Make adapter to connect and sync data from Iphone and computer	install guide

Install guide

I’ll do not go through the way how to install: ITunes, Chrome, Node Js because it’s very friendly and easy to install.

Let’s start to install Adapter flow step by step bellow

1) Install dependencies

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

scoop bucket add extras

scoop install ios-webkit-debug-proxy

npm install -g vs-libimobile

2) Install latest version of the adapter

npm install remotedebug-ios-webkit-adapter -g

3) Enable remote debugging in Safari (IPhone device)

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.

Starting iTunes could prompt the "Trust this computer" dialog, click to trust

After when you see your iphone displayed on itunes like that

5) Run the adapter from your favorite command line

remotedebug_ios_webkit_adapter --port=9000

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

The popup request for allow access just click on Allow Access

 

Adapter running

Open Chrome got to address: localhost:9000  it should be hello screen

 

6) Open your favorite tool

Open your favorite tool such as Chrome DevTools on chrome enter: chrome://inspect/#devices

Click to Configure enter: localhost:9000

Configuration (in case you want to change to another port)

Usage: remotedebug_ios_webkit_adapter --port [num]

 

Options:

  -p, --port  the adapter listerning post  [default: 9000]

  --version   prints current version

 

Usage

On IPhone device open safari  got to URL of Web apps you want to debug: For example I’ve just go to http://tinhtd.info

On Pc go to chrome://inspect/#devices it should be 

Now click to Inspect  you can see screen and debug area. You can start debug from here

Also can test some simple function in console ( to avoid deploy loop)

For example: you need develop some simple function but it only run on Q system, you don’t need to release D to Q you can test directly from Q system using console.

Ex: I’ve just want to show an Message alert for test.

I’ve just type to console: window.alert("Test debug on mobile TinhTD");

And message will show immediately on Iphone like this.