How to debug iPhone Safari on Windows

#webdev #beginners #mobile #css

Motivation

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 :)

Setup

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

Steps

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
Debug!
DONE

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)
Go to settings -> Safari
Go to Advanced
Enable Web Inspector(will be required if you use a tool like Inspect)
Check if you are ahead of your time (Experimental Features)
Cry over hours of wasted time