How to debug an HTML page in iOS Safari using Windows machine and Chrome DevTools?

Photo by Storres Jayr on Unsplash

This is a quick how-to article that should help you with setting up an html page/website debugging session in iOS Safari using a Windows machine and Chrome DevTools.

Prerequisites:

• First of all, you will need to install iTunes on your Windows machine where you are planning to debug the web app. Specifically, we need the following tools:
  Apple Mobile Device Support and Apple Application Support.
  Download link: https://www.apple.com/itunes/download/
• Node.js will be also required, please download it and install if you don’t have it already.
  Download link: https://nodejs.org/en/

Step 1

• Connect your iOS device to your Windows 10 PC via USB
• On your iOS device, go to Settings > Safari > Advanced and enable Web Inspector, more details can be found here.

Step 2

Instal the RemoteDebug iOS WebKit Adapter npm package:
npm i -g remotedebug-ios-webkit-adapter

Step 3

Install the iOS WebKit Debug Proxy, the easiest option is probably to use the scoop tool:

• Powershell script to install the scoop tool:
  iex (new-object net.webclient).downloadstring(‘https://get.scoop.sh')
  (the scoop tool installation details can be found here as well)
• Additionally, we need to add the ‘extras’ scoop bucket with the following command:
  scoop bucket add extras https://github.com/lukesampson/scoop-extras.git
• And finally, we can install the iOS WebKit Debug Proxy by executing the following command:
  scoop install ios-webkit-debug-proxy

Step 4

Now we can start the debugging session of a page opened in iOS Safari browser using your Windows machine:

• open chrome://inspect/#devices page in the Chrome browser
• add localhost:9000 discovery setting as below on the screenshot:

• run the below Powershell script to initiate the debugging session:
  remotedebug_ios_webkit_adapter — port=9000

• open Safari on your iOS device and browse to a website, the new page should then immediately appear on the chrome://inspect/#device to be inspected:

Final result

More details can be found here: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter