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

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:

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.

Now, if your iOS device is plugged in to your computer with the web page you wish to debug currently open, you can go to Develop > iOS Device Name in desktop Safari, and click on the page you wish to debug.

You can now view and update the DOM, access the JavaScript console and more.

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. You can find a guide for doing that here. Be aware that this is not a free solution.

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.

Now, any console output that your mobile page generates will be streamed to the console open in your desktop web browser, including any errors!

It is certainly no replacement for a full web inspector, but it can get you out of trouble when you don’t have access to a Mac.

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

Debug iOS Safari html layout on Windows

My ASP.NET MVC web site markup looks «wrong» in iOS (both iPad and iPhone). In desktop Safari Chrome, IE, etc. I just use and embedded developer tools in the browser to locate problems.

Is there a way to debug iOS Safari (via some emulator) from Windows. I also have Mac with xCode at hand, if it provides the ways to facilitate the process.

2 Answers 2

On your mac you can open the iOS Simulator (previously the iPhone simulator). If you have XCode you have the simulator. Just open the simulator, open Safari and navigate to your page from there, just as you would in a normal browser.

Since Mobile Safari doesn’t have a capable HTML/CSS inspector Firebug Lite might work.

I know this is quite an old question, but since I run into this myself recently, and found a solution, let me share it here with anyone else that might come looking.

The weinre project offers a remote debugger that works more or less like the old version of webkit dev tools. While it’s not as fully featured as proper remote debugging tools found in Safari, it can get the job done when working with HTML and CSS.

The weinre package is available on npmjs.com and it requires NodeJS / NPM installed on your system. It can debug any app running any browser, and works on all platforms where NodeJS is supported including Windows.

Then start it on port 9000 (or whatever port you want):

Visiting localhost:9000 gives you access to instructions on how to instrument the web page you are testing (look under Target Script section). For example add this to your page:

Once the page is instrumented, you can go to the debug interface pointed to by the instructions page.

Ios safari debugging windows

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.

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

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.

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:

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.

Debugging Mobile Safari on a Linux or Windows Machine

I know it’s possible to debug mobile Safari through this method. It requires you to have Safari installed on your computer. Mobile Safari is emulated on your desktop Safari to give you standard web dev features.

Safari was discontinued on Windows a few years ago. Is this possible on a non-Mac machine?

1 Answer 1

Yes. You can use ios-webkit-debug-proxy and Chrome. It is slower than OS-X and Safari, but tolerable and you may have some issues when Chrome’s developer tools don’t quite match Safari, but it’s much better than nothing.

I have not been able to get the ‘chrome-devtools’ URL working, so I just go to localhost:9222/ in Chrome after connecting my phone and starting the ios-webkit-debug-proxy.

I’ve had issues with ios-webkit-debug-proxy crashing or hanging — I have found it more reliable to restart it for each debugging session.

Not the answer you’re looking for? Browse other questions tagged safari mobile-safari or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.4.16.39093

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.