I recorded a tutorial video of this solution, step-by-step, to go along with this post:
- Install iTunes on your Windows 10 PC.
I installed the 64-bit version. We mostly need the Apple Mobile Device Support and Apple Application Support apps that come with iTunes. I actually uninstalled iTunes after ensuring those other apps were installed, but it looks like you need iTunes installed to connect devices to your PC, so you might want to keep it installed. Here’s what you need to see:
- Install Node.js.
When you install, make sure the package manager is selected (it is by default), as we’ll be needing that to install the webkit adapter.
- Run Windows PowerShell as administrator.
Windows Key + Sto search, then search for “PowerShell”. Right-click on Windows PowerShell and click Run as administrator.
- Install the remotedebug-ios-webkit-adapter.
Use the following PowerShell command:npm install remotedebug-ios-webkit-adapter -gWhen that is complete, you will see an “updated 1 package in Xs” message:
- Connect your iOS device to your Windows 10 PC via USB.
If you haven’t connected the devices previously, you will need to click to trust the connection on both devices.
- Start the webkit adapter plugin listening on port 9000.
Paste the following command into PowerShell:remotedebug_ios_webkit_adapter –port=9000You will need to allow the plugin through your firewall as well. I use the default Windows Firewall, so I got a dialog like this:
Once it begins running, you will see the message remotedebug-ios-webkit-adapter is listening on port 9000 followed by iosAdapter.getTargets:
- Open up the Chrome browser and browse to chrome://inspect/#devices.
Since we set the adapter to listen on port 9000, we need to add a network target. Click “Configure” next to Discover network targets:
Then, make sure the target “localhost:9000” is in the list:
- Enable web inspector on your iOS device.
On your iOS device, go to
Settings > Safari > Advancedand enable Web Inspector.
- Open Safari on your iOS device and browse to a website.
You should almost immediately see the website appear in Chrome under the Remote Target section:
- Click inspect under the target.
Success! You can now debug the site in Safari on your iOS device, but from Chrome DevTools on your Windows machine.
It should take you around 5 minutes to set this up, and you can be debugging a website in no time!
Run the following command from your PowerShell to install scoop to its default location (
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh') # or shorter iwr -useb get.scoop.sh | iex
Once installed, run
scoop help for instructions.
scoop bucket add extras
scoop install ios-webkit-debug-proxy