How to debug iPhone safari on mac in 2 steps?

#webdev #debugging #ios

Debug HTML, CSS and Javascript issues for the website open on iPhone safari directly from your mac in just 2 steps.

Step1: Activate the Web inspector in your iPhone.

On your iPhone go to Settings > Safari > Advanced and toggle on Web Inspector .

Step2: Download Safari Technology Preview Browser

Goto this Link and download this super useful browser which will help in debugging the iOS safari on mac

Once downloaded-

Open the Safari Technology Preview
Goto Develop -> Select your iphone -> click on the iphone safari tab

Image 1

Image 2

Mobile Vitals: A first step to Faster Apps

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read the guide →

Top comments (3)

Thomas (he/his) • Sep 13 '21

This is great! Inspecting the console output and networking of a web app running on an iPhone helped me dozens of times in the past already.

Actually, you can do the same without installing the technology preview. Just open Safari's Settings on the Mac, go to Advanced, and toggle "Show develop menu in menu bar".