ios safari remote debugging windows

Access dev tools for debugging iPhone/iPad Safari on Windows

Jun 13, 2020

Came across this issue on a site where the site is crashing due to some reason on iPhone and wanted to debug. But since the debug tools is no longer on iOS(was there way back in 2012 I guess?), I was looking for an easier way to do it with my iPhone and desktop running Windows.

And unfortunately there aren’t many resources online which descibe how this can be done. So while looking around I stumbled upon a github repo remotedebug-ios-webkit-adapter which is precisely what I was looking for. I have tested this and works fine.

Below are the steps that I followed:

• Install Node

Install Scoop

a. Run this command to install scoop Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

b. While installing scoop you may see an error PowerShell requires an execution policy in [Unrestricted, RemoteSigned, ByPass] to run Scoop.

Run the below command to set execution policy(Press Y and enter when prompted) and then run command 2.a again to complete it’s installation.

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

Run the below commands to install ios-webkit-debug-proxy

scoop bucket add extras

scoop install ios-webkit-debug-proxy

In cmd run the below command as adminstrator to install latest version of the adapter

npm install remotedebug-ios-webkit-adapter -g

• Install iTunes and connect your device to PC. (Tap on ‘trust’ when pop-up displayed on your phone to trust the computer). Make sure Web Inspector is enabled in iOS Settings > Safari > Advanced

Run the adapter using below command

remotedebug_ios_webkit_adapter -— port=9000

• Now tht the adapter is listening, open chrome and go to this link chrome://inspect/#devices and click on ‘Configure…’ next to Discover network targets and add localhost:9000
• Open the web page you want to debug on safari, you should see it on chrome inspector page under Remote Target - Target (RemoteDebug iOS Webkit Adapter)
• Click on inspect and you can access the console and network tabs to see if any errors to debug. 

Below is reference url if need more info

https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter

How I brought back iOS Safari remote debugging to Windows and Linux

Published by himbeer on 3rd june 2021 3rd june 2021, note: this posts describes my development process, if you just want to debug your site, check out the finished project here ..

Here’s how I managed to get a local copy of the WebKit WebInspector working with Google’s ios-webkit-debug-proxy on iOS 14.6 in 2021.

This work is inspired by Arty Gus’s webkit-webinspector which seems to have been abandoned.

Note: All terminal commands shown work in both bash and PowerShell unless otherwise noted.

Setting up our workspace

Requirements.

• On Windows we must also install iTunes
• On Windows, I suggest either using git for Windows or svn in WSL
• A Chromium based browser (like Google Chrome, Edge or Opera) or WebKit based browser (like Epiphany/GNOME Web)

First we create a directory to work in and enter it:

Getting the WebInspector files

The most important part is the WebInspector itself. It can be found in the source code of WebKit.

To download it we can either use the following svn command (thank you Arty Gus ):

or this git command (thank you Stack Overflow ):

We should now have a folder called WebKit with the subfolder structure Source/WebInspectorUI/UserInterface in which we will find the needed files.

Adding some ancient files to the mix

The WebSocket protocol offered by ios-webkit-debug-proxy isn’t supported in newer versions of the WebKit WebInspector anymore. Thanks to the power of version control however we can add that support back in.

We need two different things, the code that initialises the connection that goes into the Main.js file and the InspectorFrontEndHostStub.js files, which is what replaces the InspectorFrontEndHost that would normally be created by the method that replaced WebSockets.

Both of those things were removed in commit b65bda90170215a72fcdf2a1bb80ffcc4aa15e73 .

The Main.js part can be found here and the InspectorFrontEndHostStub.js file here .

I downloaded InspectorFrontEndHostStub.js into the UserInterface folder and kept a browser tab with the Main.js part open.

Making some changes

Since the InspectorFrontEndHostStub.js file is pretty old by now, it’s missing some of the properties and methods that have been added since. I also rewrote it to use a class instead of the old fashioned way it was written in before.

• The name WebInspector has also been shorted to WI .
• The missing properties and methods have been added. I used InspectorFrontendHost.cpp and the WebInspector inspected with another WebInspector in Epiphany (a WebKit based browser) as references.
• I added _initializeWebSocketIfNeeded into the WI object.
• I added a very primitive polyfill for getPropertyCSSValue and a dummy function for getCSSCanvasContext . These are WebKit specific legacy functions that are still used by the WebInspector. These changes are nedded to make it work in Chromium based browsers. With a bit more work one could probably also get it to work in Firefox.

Lastly, WI._initializeWebSocketIfNeeded() must be called when the WebInspector loads, so we add that call to the top of the WI.loaded function like so:

The following sed command does that automatically:

or the PowerShell variant:

Just like with the JavaScript, the CSS also makes use of some WebKit specific features and quirks. So I wrote a little css file that fixes some of them. In the UserInterface folder I created a new file named AdditionalStyles.css .

• I gave the navigation bar items (the warning and error icons) a fixed with of 16px, before they would be way too large due to differences in svg handling.
• I gave the .popover class a fixed background color, because previously the background was created using getCSSCanvasContext() which doesn’t work in non-WebKit browsers.

The WebInspector CSS also makes a lot of use of the :matches() pseudo-class. :matches() was the WebKit-specific name for the now standardised :is() .

We can use a quick string replacement to update them by running this command in the UserInterface folder:

Of course we need to load our JS and CSS file. To do that, we add

to the Main.html file right after <script src="Base/WebInspector.js"></script>

Selecting the version

In the WebKit/Source/WebInspectorUI/UserInterface/Protocol/Legacy folder we can find folders with InspectorBackendCommands.js files for different versions of iOS. We copy the InspectorBackendCommands.js for the one that is lower than or equal to ours (e.g. if we are running 14.6, copy 14.5; if we are running 14.5, copy 14.5) into the WebKit/Source/WebInspectorUI/UserInterface/Protocol folder.

For example:

Bash script for automatically copying the latest version:

PowerShell equivalent:

Now that all the needed changes are done, we can test it.

On our iOS device, we go to Settings->Safari->Advanced->Web Inspector and enable it. Then open a webpage in Safari.

After downloading ios-webkit-debug-proxy and installing iTunes, we plug in our iOS device via USB and launch ios-webkit-debug-proxy without a frontend using the -F argument. For example on Windows: .\ios-webkit-debug-proxy-1.8.8-win64-bin\ios_webkit_debug_proxy.exe -F .

The output should then look something like this:

To view the inspector, we need to open it in our browser. However opening the Main.html file directly would give us origin errors because "file:" URLs are treated with extra security.

So we need to run a web server that serves WebInspector for us. Any static file server will work.

• Node.JS: The http-server npm package (adds the terminal command http-server )
• Python 3: python3 -m http.server 8080
• PHP: php -S localhost:8080

Whichever server we choose, we run it from the WebKit/Source/WebInspectorUI/UserInterface folder. Then open our Chromium or WebKit based browser with the following URL:

http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1

(if ios_webkit_debug_proxy gave a port different from 9222 for the device we want to debug, that port should be used instead, of course)

We should now be greeted with the WebInspector and can debug to our heart’s content.

Share this post:

• Click to share on Telegram (Opens in new window)
• Click to share on WhatsApp (Opens in new window)
• Click to share on Twitter (Opens in new window)

Leave a Reply Cancel reply

Related posts.

Remotely debugging iOS Safari on Windows and Linux

Using this project you can debug your websites and web applications running in iOS Safari from a PC running Windows or Linux.

Decoding my satellite-receiver’s channel list file

TL;DR? Click here to jump directly to the decoding website: Preamble So I have this Triax-Hirschmann S-930 DVB-S2 satellite television receiver. It has a feature that allows exporting the channel list to a USB-Drive which Read more…

Updated 2019: Finding out your Discord user’s token (on mobile too)

Attention: This post is for educational purposes only. I highly advise you to respect Discord’s guidelines. Never share your token with anyone for any reason whatsoever. Do not run bots under a user account, bot Read more…

Debug a Website in iOS Safari on Windows 10

• Post author By John Washam
• Post date May 6, 2018
• 4 Comments on Debug a Website in iOS Safari on Windows 10

Have you ever needed to debug a website (especially JavaScript or CSS) in Safari on an iOS device but didn’t have a Mac handy? I ran into this problem, and after hours of trying other ways to debug, I finally discovered a pretty easy way to load up a debug interface on my Windows 10 PC that displayed debug info about a website in Safari on an iPad Mini.

[update 10/20/2019 – I’ve heard reports that this solution only works in iOS 12 and below, not iOS 13 and up. I can neither confirm or deny.]

[update 5/6/2018 – I previously included a solution that used WebIDE in the Mozilla Firefox browser, along with the Valence plugin. At some point, possibly beginning with iOS 9, that solution stopped working. I recently had a chance to try some other solutions and found an even easier solution that works with Google Chrome DevTools!]

Thankfully, this solution uses the Google Chrome browser on your PC and the built-in Chrome DevTools that you should already be used to, but the content is coming from the website in Safari on the iOS device.

According to what I’ve read online, it appears this solution only works with Windows 8 and up, so this may not work on Windows 7.

Let’s get to it!

I recorded a tutorial video of this solution, step-by-step, to go along with this post:

• 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. Press the Windows Key + S to search, then search for “PowerShell”. Right-click on Windows PowerShell and click Run as administrator .

When 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.

Once it begins running, you will see the message remotedebug-ios-webkit-adapter is listening on port 9000 followed by iosAdapter.getTargets :

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 > Advanced and enable Web Inspector .

• 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!

Using iOS 11?

You may need some extra steps to get this working on an iOS 11 device. Evidently, the version of the remotedebug-ios-webkit-adapter downloaded via npm is broken for iOS 11. The user bdice wrote a post on the remotedebug-ios-webkit-adapter Github Issues page describing how he was able to get this working on Windows 10 with an iOS 11 device. I tested it out, and here’s the lowdown:

• Download the most recent ZIP release file of remotedebug-ios-webkit-adapter. I downloaded version 1.8.
• Create a new folder named “ios-webkit-debug-proxy-1.8-win64-bin” in the following path (assumes you installed Node.js in the default directory): %AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\node_modules\vs-libimobile\

%AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\node_modules\vs-libimobile\ios-webkit-debug-proxy-1.8-win64-bin

  %AppData%\npm\node_modules\remotedebug-ios-webkit-adapter\out\adapters\iosAdapter.js

On line 132, change the proxy variable to the following value:

const proxy = path.resolve(__dirname, '../../node_modules/vs-libimobile/ios-webkit-debug-proxy-1.8-win64-bin/ios_webkit_debug_proxy.exe');

After you have jumped through all these hoops, I would restart Windows PowerShell (as Administrator!), restart Chrome, and unplug then plug back in your iOS device, just to be safe. After doing so, go back to step 6 above, and when you get to step 9, you should now see your device under the list of Remote Targets!

I tested this out, and it definitely worked!

Have you tried debugging a website in Safari on iOS with a Windows machine before? How did it work out for you, and what tool(s) did you use? Or did you have a problem with this solution you’d like to discuss? I’d love to hear from you, so let’s discuss in the comments below!

Share this:

• Tags chrome devtools , debug , ios , javascript , remote-ios-webkit-adapter , safari

Do you need to process or display PDF files?

Remote debugging ios safari on os x, windows and linux.

February 17, 2015 2 min read

Recently, I have been working on improving mobile support in the content produced by our PDF to HTML5 converter . One problem that I have encountered is how to debug iOS Safari, particularly if you are not a Mac user.

If you are a web developer, you are likely very familiar with the tools available to you when debugging a web page or web app in a desktop browser, but how do you debug when developing for a mobile device such as the iPad or iPhone?

The answer is that you debug remotely, using the same tool as you would on desktop, except connected to your mobile device. If you are debugging Safari on iOS this will require Safari version 6 and up. Windows & Linux developers will be disappointed to hear that the latest version of Safari available for Windows is version 5, and it’s not available at all on Linux.

If you don’t own or have access to a Mac this can be very frustrating (though I would not say it’s the most frustrating thing about developing a web app for iOS, there are many ). It would be great if Apple offered Virtual Machines with Safari pre-installed for testing, as Microsoft does for Internet Explorer . Fortunately, all is not lost – there are some alternatives available which I will discuss below.

Remote Debugging iOS Safari on OS X:

Firstly, you need to have a device running iOS, such as an iPad or an iPhone that you can connect by USB to a Mac computer with Safari version 6 onwards installed.

Next, you need to enable ‘Web Inspector’ on your iOS device. You can do this by going to Settings > Safari > Advanced, and toggling Web Inspector so that it is enabled.

Then, you need to enable the Develop menu in Safari on your Mac computer if it is not already enabled. You can do this by going to Safari > Preferences > Advanced, and ticking the check box for Show Develop menu in menu bar.

Remote Debugging iOS Safari on Windows and Linux:

[Update – Jan 2019] Since writing this article, the recommended solution is no longer available. There is however a new tool which allows you to debug iOS Safari using the Chrome Web Developer tools. You can find instructions for setting this up here: RemoteDebug iOS WebKit Adapter . I have tested this tool (in January 2019) and can confirm it is working.

There are very few options available to the web developer using Windows, and even fewer for those using Linux. Apparently, the Telerik Platform AppBuilder includes a Chrome Developer Tools capable of remote debugging pages in Safari.

In my option, the best solution for debugging Safari on Windows and Linux is to use a really cool web app called JSConsole. JSConsole works by inserting a script tag into your web page that overrides the console behavior. Rather than writing logs and errors to a console you can’t see, instead they will be streamed to a jsconsole session open in your desktop web browser that will be listening to your device.

To start, go to jsconsole.com and run :listen in the prompt. This will give you a unique session ID and a script tag that you insert into your mobile web page.

If you found this article useful, feel free to try our PDF to HTML5 converter online for free .

Our software libraries allow you to

How jpedal allows you to view the commands in….

How to view PDF files in Java

How to embed pdf files in html web pages.

15 Replies to “Remote debugging iOS Safari on OS X, Windows and…”

Other options for remote debugging on Windows and Linux:

* https://creative.adobe.com/products/inspect

Thanks for the suggestions Matt, I had not come across those in my searching.

I’ve taken a look and it looks like Adobe Edge Inspect uses weinre internally. It’s actually really good!

Thanks for pointing to JS Console and explaining how to use it! It helped me fix an issue on iOS today. I also found https://github.com/google/ios-webkit-debug-proxy , but could not install it on Ubuntu 15.04 due to unmatched dependencies. JS Console for the win.

Thanks for the iOS debugging guide. I have followed your instructions using a Mac Mini and iPad, but even though I have my iPad plugged in and, using Safari, have chosen the site I want to debug, I get ‘No Inspectable Applications’ when I choose my iPad from the Mac Mini Safari Develop menu. Can you think of anything that I might need to do?

Thanks! Richard.

When I have encountered that issue in the past it has been because of a version miss-match. My advice would be to make sure that everything is up to date.

I use another trick: 1: I use an existing div or I add a div to show the console.log in the div in the browser itself 2: javascript: var myDiv; console.origLog = console.log; console.log = function(x) { if(!myDiv) myDiv = document.getElementById(‘myDiv-id’); if(myDiv) myDiv.innerHTML = x; else console.origLog(“can not determine myDiv”); }

Thanks for the article. But I only get multiple times:

Connected to "352576ab-4922-4ca1-a850-15ffc5faabea"

But I never get a “connection established …” as seen in your screenshot. Is this service still working?

It’s not working for me either.

I have tried running it locally (it’s available on GitHub at https://github.com/remy/jsconsole ) but it still has the same issue.

Thanks Leon. It would have been such a handy tool. Now I am stuck again. The apache link from the first comment does not exist anymore either. So I need to buy a Mac I guess … 😀

Great idea to use jsconsole, injecting the script worked as described. All my calls to the console are now logged to this remote session, perhaps the people who are having trouble have inserted the script at the end of their page? You’ll need to make this the first script if you want to capture all logs sent to the console.

thanks for posting this! 🙂 finally solved an issue in my app that was running me crazy cause I couldn’t see the error message :]

It would appear that JSConsole doesn’t provide this functionality anymore. https://github.com/remy/jsconsole/issues/103

Thank you! Very useful tool. It helped me to fix a difficult bug on Safari.

I can’t get it to work with Linux (Ubuntu 18.04). You wrote: > Remote Debugging iOS Safari on Windows and Linux: > [Update – Jan 2019] … The instructions in the “RemoteDebug iOS WebKit Adapter” site that you referred to, instruct 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 did you use, to confirm that it is working? Thanks

I’m afraid I’ve not tested on Linux. Looking at the history of the readme, it looks like the suggestion to use Chrome Canary was added over 3 years ago, so I suspect the required functionality is now in the stable version (I believe it’s the network discovery feature ).

Comments are closed.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Debug Safari and WebViews on iOS from tools like VS Code and Chrome DevTools

RemoteDebug/remotedebug-ios-webkit-adapter

Folders and files, repository files navigation, update on remotedebug ios webkit adapter.

RemoteDebug is now superseeded 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 🤯🎉🔥

Maintenance status: RemoteDebug iOS WebKit Adapter is not proactively maintained or extended.

RemoteDebug iOS WebKit Adapter

RemoteDebug iOS WebKit Adapter is an protocol adapter that Safari and WebViews on iOS to be debugged from tools like VS Code, Chrome DevTools, Mozilla Debugger.html and other tools compatible with the Chrome Debugging Protocol.

Read more in the introduction blog post on Medium: Hello RemoteDebug iOS WebKit Adapter: iOS web debugging with Chrome DevTools, VS Code & Mozilla Debugger.html 📡📱

Getting Started

1) install dependencies.

Before you use this adapter you need to make sure you have the latest version of iTunes installed, as we need a few libraries provided by iTunes to talk to the iOS devices.

Follow the instructions to install ios-webkit-debug-proxy and libimobiledevice

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

Make sure you have Homebrew installed, and run the following command to install ios-webkit-debug-proxy and libimobiledevice

2) Install latest version of the adapter

3) enable remote debugging in safari.

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.

On MacOS you can use Safari to inspect an iOS Safari tab. This will ensure the device is trusted.

On Windows starting iTunes could prompt the "Trust this computer" dialog.

5) Run the adapter from your favorite command line

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

6) Open your favorite tool

Open your favorite tool such as Chrome DevTools or Visual Studio Code and configure the tool to connect to the protocol adapter.

Configuration

Usage with chrome (canary) and chrome devtools.

You can have your iOS targets show up in Chrome's chrome://inspect page by leveraging the new network discoverbility feature where you simple add the IP of computer running the adapter ala localhost:9000 .

Using with Mozilla debugger.html

You can have your iOS targets show up in Mozila debugger.html , by starting remotedebug_ios_webkit_adapter --port=9222 and selecting the Chrome tab.

Using with Microsoft VS Code

Install VS Code , and the VS Code Chrome Debugger , then create a launch.json configuration where port is set to 9000, like below:

Architecture

The protocol adapter is implemented in TypeScript as Node-based CLI tool which starts an instance of ios-webkit-debug-proxy , detects the connected iOS devices, and then starts up an instance of the correct protocol adapter depending on the iOS version.

How to contribute

Diagnostics logging, releases 13, contributors 23.

• TypeScript 97.0%
• JavaScript 3.0%