How to use web inspector to debug mobile/tablet in Safari

nana Jeon
nana Jeon
Sep 8, 2018 · 2 min read

1. Enabling inspector in mobile phone or tablet

Settings < Safari < Advanced < Web Inspector

2.Enabling inspector in desktop browser

If there isn’t Develop section in the Safari browser menu bar, go to Preferences and turn on the Develop mode.

3.Connect mobile with mac via USB

① Connect mobile phone/tablet to mac via USB

② Open the web page which you want to inspect in Safari in the mobile phone/tablet.

③ Select your mobile phone and the web page.

4. Press ‘Hide the details sidebar’ icon to check Styles.

Hide the details sidebar icon in Safari

5. Press and hold the “Stop element selection” button and click the element which you want to inspect in the mobile phone/tablet.

That's all for now❤️😄

Lastly, I would like to share <FrontEnd30 /> where I learnt many cool front-end techniques.

🎉🎉🎉🎉🎉 Happy Coding Today 🎉🎉🎉🎉

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

nana Jeon

Written by

nana Jeon

UI / Visual designer who loves CSS 🧙🏻‍♀️

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade