Let’s say you are working on a mobile website or a mobile webapp. You develop it in your desktop browser because it’s much easier, right ? When finally comes the time to test it on a device/simulator, something goes wrong. How can you find out what ? There is no debugging tool integrated in mobile Safari… Desktop Safari to the rescue !
Everything following can be done with a real device plugged in usb or with the iPhone/iPad simulator.
The first step to debug a mobile website is to enable the Web Inspector on the device in Settings > Safari > Advanced > Web Inspector. Once it’s done, you will have to plug your Apple device to your computer and run Safari.
By default, the developer mode is not enabled in desktop Safari. You can enable it in Preferences > Advanced > Show Develop menu in menu bar.
Time to plug your device. Now, navigate to the Develop menu of Safari. You can see the list of plugged devices (T-phone is my iPhone) and you can see which pages/apps are available to debug.
Devices won’t appear if you enabled Private Browsing in the settings of mobile Safari.
Just click the website you want to debug and use with the web inspector to fix your mobile website !
