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

nana 🧙🏻‍♀️
Design & Code Repository
2 min readSep 8, 2018

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 🎉🎉🎉🎉

--

--