mobile dev hint #1 – Remote Debugging Websites on iOS Devices

When it comes to mobile testing, we need to talk about testing on real devices. What seems to be an easy task for the tester, could be hard when you try to debug device specific errors on the device itself.

This short guide will help you with the setup of the remote debugging with the Safari Developer Tools. It is easy as counting to three, but you need to find the right settings.

First, we need to activate the „Web Inspector“ on the device itself.  Just navigate to Settings – Safari – Advanced Settings and activate the „Web Developer“ setting.

IMG_0008-1024x768

To connect your device and your local development computer, you have to rely on Apples Safari Browser. By default the „Developer Mode“ is disabled, so we need to enable it in the Advance-Tab on the settings screen. Just tick the „Show Develop in menu bar“ option.

Screen-Shot-2015-02-16

With „Developer Mode“ activated we will see a new topic in the Safari menu, called Developer.

To start the remote debugging on the device, just open your website on the device with the Safari browser. Currently, it is not possible to remote debug in other browsers on the device.

After navigating to the page on the device, click on the Developer menu item on your development machine and your remote device should be visible in the menu (f.e. „My first iPad“). In the opening submenu, you will see the open tabs on the device. Click on it and the „Developer Console“ will open and you can start debugging.

Happy debugging!

Dieser Eintrag wurde veröffentlicht in Development, English Articles, Mobile und verschlagwortet mit , von Steffen Hartmann. Permanenter Link zum Eintrag.

Über Steffen Hartmann

Steffen Hartmann betreut als Product Owner (Scrum/CSPO-zertifiziert) gemeinsam mit seinem agilen Team anspruchsvolle Kundenprojekte für die Mayflower GmbH. Seine über zehn Jahre bereits auf Kundenseite gereifte Erfahrung fließt heute in die Entwicklung und Ausgestaltung großer E-Commerce-Environments – dazu steht Steffen nicht nur intern, sondern auch auf Konferenzen und Workshops als Speaker und Trainer zur Verfügung und setzt seine individuellen Schwerpunkte auf die Themen User Experience, Mobile und Teamkommunikation.

Für neue Blogupdates anmelden:


3 Gedanken zu “mobile dev hint #1 – Remote Debugging Websites on iOS Devices

  1. Excellent post. Thank you :).
    So I’m a Linux user (Ubuntu 16.04 Xenial Xerus) and needed to debug the frontend of a website on safari. I already installed safari with the help of playonlinux, but without any success of using the webdeveloper tools in a useful manner.
    After a long search for a solution I found something which worked for me. There’s an option to use Linux and an iPad/iPhone (NOT the iPad 2 Mini !) to debug the frontend. Therefore there’s a github project from google which allows you to debug in the safari browser using the chrome developer tools. Sounds crazy, heh!?
    You can clone the project from here: https://github.com/google/ios-webkit-debug-proxy/
    The README is quite comprehensive and worked with my ancient iPad 2. Before I tried to use my iPad 2 mini. I couldn’t connect to it with error messages like:
    * GnuTLSGnuTLS error: Error in the pull function.
    * Could not connect to lockdownd. Exiting.: Broken pipe
    As I had a look at http://www.libimobiledevice.org/ (which you need for comminication between the device and you linux system) there was no positive feedback that it’s tested with just this iPad model.

    Hope that will help one or another linux fanboy :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.