Debug mobile websites in Safari

We live in a time when customers no longer visit and use websites exclusively with their home PC. This circumstance leads to the fact that we (have to/should) develop websites in such a way that they can run on multiple devices.

We live in a time when customers no longer visit and use websites exclusively with their home PC. This circumstance leads to the fact that we (have to/should) develop websites in such a way that they can run on multiple devices.

There are different techniques here, such as Responsive Design or custom template sets for different device classes. No matter which solution we prefer - we have to test the site to make sure that the customer can use it without any problems. Since Safari 6.0, websites can be tested on the iPhone with the help of the web inspector integrated in Safari. If the mobile view of the website is not displayed correctly on the iPhone, we can work on the page live via the web inspector and solve the problem. This is much faster than trying to fix the error locally, uploading the file to the server and calling up the page again. In the worst case, we repeat this procedure several times for the same error.

With Safari 6.0, this is now much easier. In this article I describe what exactly is required and how this test environment can be set up.

Two ways of debugging

There are two ways to test mobile websites. Both via the iPhone simulator and via a real iOS device! As a third option you can use the desktop version of Safari as well, but there might be rendering differences.

Safari version 6.0 or higher is required for both cases! In addition, a developer mode activated in Safari is a prerequisite!

This can be activated in Safari > Preferences under the item Advanced! Simply tick the box and the item Show develop menu in menu barr appears in the menu bar!

The developer mode can be activated in preferences - advanced
The developer mode can be activated in preferences - advanced

Debugging with the iOS Simulator and the Web Inspector

Under OS X, it has been possible for some time to test websites and apps locally, i.e. in a simulator. The iOS simulator is part of the free Developer Tools and can be downloaded here from the Mac App Store

If we now open any website in the iOS simulator, we have the possibility in the Safari browser (the desktop version) to access and manipulate the page in the iPhone simulator via Developer > iPhone Simulator > ... with the web inspector!

The Webinspector accesses the simulator
The Webinspector accesses the simulator

Remote debugging with the Webinspector and the iPhone

It is similarly easy to access websites on a real iPhone. The prerequisite for this is that the iPhone is connected to the computer via USB. In addition, the Web Information option must be activated on the iPhone. This requires at least iOS 6.

The web information can be activated as follows: Preferences > Safari > Advanced

Activate the web information to grant Safari access to the iPhone
Activate the web information to grant Safari access to the iPhone

Once the iPhone is connected to the computer, we can now access and edit the website in desktop Safari via Developer > iPhone name > ...!

Mac only

The iPhone Simulator has always required the Macintosh as a platform, and Safari 6.x is not yet available for any other platform. Unfortunately, it is very likely that this will remain the case in the future!