How to use the Safari Web Inspector for debugging on mobile devices?

The Safari Web Inspector provides developers with a powerful set of tools for debugging and analyzing sites running on iOS mobile devices directly from a Mac. This feature is indispensable when testing adaptive design, checking console errors, and optimizing web application performance.

To successfully use the inspector, you need to perform preliminary setup on both devices. On your iPhone or iPad, open system settings, go to the Safari section, scroll to the very bottom, open the Advanced menu, and enable the Web Inspector toggle switch.

On your Mac, open the Safari browser, go to general settings, open the Advanced tab, and check the box next to Show Develop menu in menu bar. This will unlock access to additional developer tools system-wide.

Now connect your mobile device to the computer using a cable or make sure they are on the same Wi-Fi network when using wireless debugging. Open the desired page in mobile Safari, then on your computer in the top menu select Develop, find your device's name, and select the desired tab to launch the debugging console.