Mobile Safari Web Inspector

There’s a great, albeit slightly hidden, feature that has been part of iOS since version 6 to help with mobile web development. Much like the desktop equivalent the mobile web inspector lets you jump into the live code for a web page to see what’s going on. You can even preview changes to HTML and CSS directly within your iOS Safari browser. This mobile version also comes with useful touch-centric features.

To get this working all you need is a recent iOS device, a Mac running Safari and a cable to connect the two together.

To enable the web inspector on your iPhone or iPad simply go to Settings and look for Safari under the apps listed. Scroll all the way down and tap on ‘advanced’ and you’ll see the toggle switch to enable the Web Inspector. Now you’re ready to connect your device to your Mac with a standard charging cable and launch Safari on both.

To start using the remote web inspector simply navigate to the page you’d like to inspect on your iPhone or iPad and then it should appear as a connected device under the Developer menu on Safari on your mac.

Up pops the code and then you can dig through the usual info you’d usually find and even quickly edit the HTML and CSS for instant live previewing.

The mobile web inspector has the same code highlighting as you get on the desktop and to make jumping to the right bit even easier there’s a handy tap-to-inspect feature.

Aside from being a neat party trick it’s really handy for quickly jumping in and seeing what is going on with the code or testing some content or layout adjustments.