DEV Community

Jyotishman Saikia
Jyotishman Saikia

Posted on

4

How to debug iPhone safari on mac in 2 steps?

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 .

iphone web inspector tutorial

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-

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

Image 1
safari technology preview

Image 2

safari technology preview

Sentry mobile image

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)

Collapse
 
thsmdt profile image
Thomas (he/his)

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

Collapse
 
jyotishman profile image
Jyotishman Saikia

I tried with safari . But somehow the newer version doesn't work . So this tool helps here.

Collapse
 
manavshah123 profile image
manav shah

Great

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay