debug iphone safari on windows 10

DEV Community

Posted on Oct 28, 2021

How to debug iPhone Safari on Windows

Want to ensure that your website & web application works across different screen sizes and devices? One of the must-dos is to check that it works well on iPhone Safari(as you know, people tend to stick with the defaults and one does not simply tell the user to download another web browser .-.).

Here's how I debugged a display issue on my website and hopefully it will save you some time when sh*t happens :)

• Problem: something wrong with your website, perhaps due to CSS or JS, but you don't know why.
• iPhone with Safari

You may be testing your website on your iPhone Safari browser, you realized something is wrong and you want to access the debug console to check any relevant error messages. One available tool is Inspect (not affiliated, just something that worked)

• Create an account (free 30 days trial)
• Download the installer for your OS
• Setup and connect your iPhone according to the instructions given

After setting it up, I was able to discover an error message in my debug console:

"ResizeObserver loop completed with undelivered notifications"

...Which I have no idea what that means. So, what else can be done?

If the above does not solve your problem, you might want to find out if you have accidentally introduced a CSS feature that is not yet supported. To do this, you may want to search for the feature on caniuse . Here is how I found out that the CSS property: aspect-ratio is not fully supported on all iPhone Safari:

• Check caniuse CSS property: aspect-ratio

Check your iPhone Safari Settings (as you will see, there are a ton of properties and features that are experimental and not enabled by default)

Cry over hours of wasted time

That's all. Go back to coding...

Top comments (1)

Templates let you quickly answer FAQs or store snippets for re-use.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

The refactors I did to stop my Jetpack Compose LazyColumn from constantly recomposing

Tristan Elliott - May 3

Cyber-safe Digital Space

Anushka Tripathi - Apr 24

Be a Better UI Engineer: Selectively Exclude CSS Styles

phukon - Apr 21

Laravel Reverb: Getting started

Bert De Swaef - Apr 19

We're a place where coders share, stay up-to-date and grow their careers.

• Editor's Choice: Tech Gifts for Mom
• New! iPad Air 6 Details

How to Activate the iPhone Debug Console or Web Inspector

Use Safari's web developer tools to study problematic websites

• Saint Mary-of-the-Woods College
• Switching from Android

What to Know

• Activate Web Inspector on iOS: Go to Settings > Safari > Advanced and move the Web Inspector toggle switch to the On position.
• Use Web Inspector on macOS: Connect your iOS device to a Mac and choose the URL to inspect from the Develop menu.

If you run into a bug or another issue with a website on Safari mobile, use the Web Inspector tool to investigate. This article explains how to use the Safari console for iPhone to debug errors with the help of your Mac computer. Instructions apply to iPhones with iOS 14, iOS 12, or iOS 11, and well as Macs with macOS Big Sur (11.0), macOS Catalina (10.15), or macOS Mojave (10.14).

Activate Web Inspector on Your iPhone or Other iOS Device

The Web Inspector is disabled by default since most iPhone users have no use for it. However, if you're a developer or you're curious, you can activate it in a few short steps. Here's how:

Open the iPhone  Settings  menu.

On an iPhone with an early version of iOS, access the Debug Console through Settings > Safari > Developer > Debug Console . When Safari on the iPhone detects CSS, HTML, and JavaScript errors, details of each display in the debugger.

Scroll down and tap  Safari  to open the screen that contains everything related to the Safari web browser on your iPhone, iPad, or iPod touch.

Scroll to the bottom of the page and select Advanced .

Move the Web Inspector toggle switch to the On position.

Connect Your iOS Device to Safari on a Mac

To use the Web Inspector, connect your iPhone or another iOS device to a Mac that has the Safari web browser and enable the Develop menu .

With Safari open, select Safari from the menu bar and choose  Preferences .

Select the  Advanced  tab.

Select the Show Develop menu in menu bar check box and close the settings window.

From the Safari menu bar, select Develop and choose the name of your attached iOS device, then select the URL that appears under Safari to open the debug console for that site.

After you connect your device, use your Mac to inspect the website you want to debug and have it open in the Safari mobile browser.

What Is Web Inspector?

Web developers use Web Inspector to modify, debug, and optimize websites on Macs and iOS devices. With Web Inspector open, developers can inspect the resources on a web page. The Web Inspector window contains editable HTML and notes regarding the styles and layers of the web page in a separate panel.

Before iOS 6, the iPhone Safari web browser had a built-in Debug Console that developers used to find web page defects. Recent versions of iOS use Web Inspector instead.

With Safari 9 and OS X Mavericks (10.9), Apple introduced Responsive Design Mode in Web Inspector. Developers use this built-in simulator to preview how web pages scale to different screen sizes, resolutions, and orientations.

To set up Web Inspector on your iPad, open your iPad's Settings and select Safari > Advanced , then turn Web Inspector On . Connect the iPad to a Mac computer, then open Safari on the Mac and select Safari > Preferences > Advanced , then turn on Show Develop menu in menu bar .

You cannot just connect your iPhone to a Windows PC and start using Web Inspector through Chrome like you can with a Mac. Installing package manager software can provide you a sort of workaround, but it's not recommended unless you're familiar with the package management app you intend to use.

Get the Latest Tech News Delivered Every Day

• Add More Features by Turning on Safari's Develop Menu
• 4 Ways to Play Fortnite on iPhone
• How to Activate and Use Responsive Design Mode in Safari
• How to Change the Default Search Engine in Chrome for iOS
• What Is Safari?
• How to Inspect an Element on a Mac
• How to Use Web Browser Developer Tools
• How to Clear Search History on iPhone
• How to Disable JavaScript in Safari for iPhone
• How to Reset Safari to Default Settings
• How to View HTML Source in Safari
• How to Manage History and Browsing Data on iPhone
• 10 Hidden Features in macOS Sonoma
• How to Manage Cookies in the Safari Browser
• How to Change Your Homepage in Safari
• How to Clear Private Data, Caches, and Cookies on Mac

Remotely debugging iOS Safari on Windows and Linux

Published by himbeer on 3rd june 2021 3rd june 2021.

Note: This blog post is a mirror of the README of my GitHub repository .

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

It provides a free and up-to-date alternative to the discontinued remotedebug-ios-webkit-adapter by RemoteDebug and is the spiritual successor to the abandoned webkit-webinspector by Arty Gus .

The setup scripts ( generate.sh or generate.ps1 ) download the latest version of WebKit’s built-in WebInspector and patch it to work with the WebSocket ios-webkit-debug-proxy provides and to be compatible with Chromium based browsers.

Requirements for running

• On Windows, it will automatically be downloaded, but you must also install iTunes for it to work
• For Linux, please follow the installation instructions .
• If you have Python or PHP on your system, you don’t need to change anything
• If you have Node.JS on your system, just run npm i -g http-server and you’re set.
• like Google Chrome, Edge or Opera
• like Epiphany/GNOME Web

Requirements for setup

• On Windows, I suggest using git for Windows in PowerShell
• On Linux, I suggest installing svn from your package manager

Instructions

• Clone this repository, https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit to your PC
• On Windows, run generate.ps1 . On Linux, run generate.sh .

This will result in the folder WebKit being created inside src . It contains the WebInspector files.

• Plug your iOS device into your PC via USB
• On the iOS device, go to Settings->Safari->Advanced->Web Inspector and enable it
• Open the website you want to debug in Safari
• On Windows, run start.ps1 . On Linux, run start.sh .
• Then open the Chromium or WebKit based browser of your choice with the following URL: http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/1
• You should be greeted with the WebInspector and can now debug to your heart’s content.
• Two windows will open. One manages the web server and the other one is ios-webkit-debug-proxy .
• Alternatively you can also press Ctrl+C in the web server window
• Press Ctrl+C in the terminal window to exit

Known Issues

• "Events" on the "Timelines" tab don’t work
• Canvas content doesn’t show on the "Graphics" tab
• Minor style glitches due to Webkit vs. Chromium differences

If you want to see details about how this was made, you can read a detailed explanation in in my other post here .

Attribution

• webkit-webinspector for the idea
• ios-webkit-debug-proxy for the ios-webkit-debug-proxy tool
• WebKit for the WebInspector itself

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)

13 Comments

Nicholas Fenwick · 26th June 2023 at 09:44

Hi! When trying to debug an old iPhone running iOS (and therefore Safari) 12, do we need to issue commands to change the webkit protocol to 12? I can list available pages with http://localhost:9222/ but when I try to run http://localhost:8000/Main.html?ws=localhost:9222/devtools/page/1 the Web Inspector throws an error “‘Browser’ domain was not found (at :undefined:undefined)”. This message is mentioned at https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit but I am not “trying to inspect a page that is not inspectable” since this same page on a newer iPhone 16 and same URL works fine.

Himbeer · 26th June 2023 at 10:51

Hello, You can select the iOS version when running generate.sh/generate.ps1 using “-i ” or “-iOSVersion ” respectively. (You also need to run with “-f” or “-Force” if you already ran the script before to clean up the old data) Using an incompatible iOS version usually results in an “Unknown Instrument” error ( https://github.com/HimbeersaftLP/ios-safari-remote-debug-kit/issues/12 ). Does the list at http://localhost:9222/ only show this one page? The message “Error: ‘Browser’ domain was not found” usually indicates a successfull WebSocket connection but the selected page/Safari not cooperating with the debugger.

Alex Malz · 9th February 2023 at 15:06

Thank you very much for your great project! Works very well for me and is so easy to install and use!! I previously wasted hours with compiling the old webkit stuff without any benefit…

However, do you have any idea how to get it working with vs code? As vs code is capable of the chrome remote debug protocol it should work somehow. I just don’t get the correct settings for the launch.json configuration.

Thanks! Alex.

Himbeer · 9th February 2023 at 15:13

Hi Alex! You are right that VS Code is capable of the Chrome Remote Debug protocol. However, WebKit uses their own protocol, that’s why my tool bundles the WebKit inspector. There used to be a tool that could translate between the protocols ( remotedebug-ios-webkit-adaptor ) and also a VS Code extension with the same purpose ( vscode-ios-web-debug ), however those are sadly both deprecated (which is the reason I made this project, as running the WebKit inspector is far less maintenance effort than keeping up to date with the inspector protocol).

Alex · 9th February 2023 at 16:31

Thanks for your reply and – again – your great work!

Himbeer · 9th February 2023 at 16:33

You’re welcome!

EVC · 26th July 2022 at 15:09

“This site can’t be reached

localhost refused to connect.

ERR_CONNECTION_REFUSED”

Himbeer · 10th August 2022 at 23:14

Edit the powershell script to use another web server

Rodrigo · 16th February 2022 at 13:13

Thanks for the repo and the blog. I have managed to install most of it but the web server is not loading in Chrome. I get localhost refused to connect.

I tried going directly to http://localhost:9222/ and there it shows my ipad and the web I want to debug that is open but when going to http://localhost:9222/devtools/page/1 it says:

404. That’s an error.

The requested URL /devtools/page/1 was not found. Frontend is disabled

It is using Python3 to serve the WebInspector

Himbeer · 19th February 2022 at 10:57

Hello! Using the python (or other) webserver instead of the page served by the ios-webkit-debug-proxy is necessary as the latter is very outdated. It looks like there might be something else already using port 8080 on your machine that causes the webserver of my script not to load. Try changing the port number in the script.

Joe · 21st June 2021 at 20:50

Hi, I just wanted to write and say THANK YOU VERY MUCH for making these scripts available, and also for taking the time to document everything. I had been pulling my hair out trying to just simply get proper error messages from iOS Safari console. Apple is totally unreasonable with their restricted access to the crippled web browser on iOS, and they furthermore prevent you from really having any other alternatives either because every browser is on iOS is still running the webKit engine as a rule. People like you, however, are making a difference, and I just wanted to say thanks for the effort. If there is a place to make a donation to you, I’d be willing to do so because you have saved me hundreds of dollars by circumventing the necessity to buy an actual Mac just to test my software against their awfully crippled browser, Safari. Your efforts are much appreciated. Thanks, Joe.

Himbeer · 8th July 2021 at 12:03

Thank you for your cheerful comment! I am very glad my project turned out useful for you. I appreciate your offer, but I think there are places that need a donation more than me ^^. btw I love the animations on your website 😀

Joe Harris · 8th July 2021 at 18:31

Thank you once again! 🙂

Leave a Reply Cancel reply

Related posts.

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

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.

Fixing DaVinci Resolve high-DPI scaling on Windows

After opening Resolve for the first time since I have upgraded to an UHD-monitor I noticed that something was off: Everything is way to small even though I had set my display scaling in Windows Read more…

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…

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

Remotely debugging iOS Safari on Windows and Linux

HimbeersaftLP/ios-safari-remote-debug-kit

Folders and files, repository files navigation, remote 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.

It provides a free and up-to-date alternative to the discontinued remotedebug-ios-webkit-adapter by RemoteDebug and is the spiritual successor to the abandoned webkit-webinspector by Arty Gus . It is a free and open source alternative to inspect.dev.

The setup scripts ( generate.sh or generate.ps1 ) download the latest version of WebKit's built-in WebInspector and patch it to work with the WebSocket ios-webkit-debug-proxy provides and to be compatible with Chromium based browsers.

Requirements for running

• On Windows, it will automatically be downloaded, but you must also install and trust the device in iTunes for it to work
• For Linux, please follow the installation instructions .
• If you have Python or PHP on your system, you don't need to change anything
• If you have Node.JS on your system, just run npm i -g http-server and you're set.
• like Google Chrome, Edge or Opera
• like Epiphany/GNOME Web

Requirements for setup

• On Windows, I suggest using git for Windows in PowerShell
• On Linux, I suggest installing git from your package manager

Instructions

• Clone this repository to your PC
• On Windows, run generate.ps1 . On Linux, run generate.sh .

This will result in the folder WebKit being created inside src . It contains the WebInspector files.

• Plug your iOS device into your PC via USB
• On Windows, open iTunes and mark the iOS device as trusted (pop-up asks for confirmation the first time you connect a new device)
• On the iOS device, confirm that you trust the connection if asked
• Go to Settings->Safari->Advanced->Web Inspector and enable it
• Open the website you want to debug in Safari
• On Windows, run start.ps1 . On Linux, run start.sh . Make sure your iOS device's screen is unlocked.
• The ios-webkit-debug-proxy will show your iOS device's name as connected.
• If you have mutliple pages open or extensions installed, refer to http://localhost:9222/ for the page number that is at the end of the URL
• You should be greeted with the WebInspector and can now debug to your heart's content.

Troubleshooting

• If you get an error like Uncaught (in promise) Error: 'Browser' domain was not found from Connection.js:162 you are trying to inspect a page that is not inspectable (this could be caused by having Safari extensions installed). Refer to http://localhost:9222/ for the available pages and put the correct one at the end of the URL (for example http://localhost:8080/Main.html?ws=localhost:9222/devtools/page/2 ) for inspecting the second page.
• If you get an error like WebSocket connection to 'ws://localhost:9222/devtools/page/1' failed: from InspectorFrontendHostStub.js:68 , try unplugging your device and plugging it back in while the site you want to debug is open in Safari. Once you see the ios-webkit-debug-proxy console window display a message like Connected :9222 to Himbeers iPad (...) , refresh the inspector page inside your browser (do not use the refresh button on the inspector page, refresh the entire site from your browser).
• Two windows will open. One manages the web server and the other one is ios-webkit-debug-proxy .
• Alternatively you can also press Ctrl+C in the web server window
• Press Ctrl+C in the terminal window to exit

Known Issues

• "Events" on the "Timelines" tab don't work
• Canvas content doesn't show on the "Graphics" tab
• Minor style glitches due to Webkit vs. Chromium differences

If you want to see details about how this was made, you can read a detailed explanation in HOW_IT_WORKS.md (note that this document only describes how the very first version of this tool was created and might not be completely up-to-date).

Attribution

• webkit-webinspector for the idea
• ios-webkit-debug-proxy for the ios-webkit-debug-proxy tool
• WebKit for the WebInspector itself

Contributors 6

• PowerShell 35.9%
• JavaScript 34.7%
• Shell 28.4%

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