remote debugging safari

When developing for mobile, it can be helpful to test on a real device. But if that means giving up DevTools, it can be a bit like flying blind ot understand what’s actually going on.

Fortunately, Apple actually does allow debugging mobile OS, albeit the route is rather roundabout.

Connect the mobile device (iPhone, iPad) to a Mac computer and trust the computer (this only needs to happen the first time, later you can connect via Bluetooth).

Then, within the Settings tab on the mobile device, go to Safari > Advanced and turn Web Inspector on.

Once done, on the Mac, open Safari’s settings (⌘ + ,) and go to Advanced. At the bottom there’s a checkbox for “Show Develop menu in menu bar” - make sure it’s selected.

Now, within Safari, there’s a new menu option, Develop, from which you can select your mobile device and select the web page you want to inspect.

And voilá, you now have access to DevTools for a remote debugging session!