Debug ios safari 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"

Debug ios safari on windows

4) Make your computer trust your iOS device.

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

Debug ios safari on windows

After when you see your iphone displayed on itunes like that

Debug ios safari on windows

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

Debug ios safari on windows

Adapter running

Debug ios safari on windows

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

Debug ios safari on windows

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

Debug ios safari on windows

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

Debug ios safari on windows

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

Debug ios safari on windows

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

Debug ios safari on windows

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");

Debug ios safari on windows

And message will show immediately on Iphone like this.

Debug ios safari on windows


Can I debug iOS on Windows?

Debugging iPhone Safari on Windows using BrowserStack. BrowserStack makes iPhone Safari debugging simple, irrespective of the operating system being used. Windows users (on Windows XP, 7,8,10) can test and debug on the desired iPhone – Safari combination directly from their web browser (Firefox, Chrome, Safari, etc).

Does Safari have a debugger?

Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions.