Debugging the Classic Mobile UI from your Desktop

[John Armstrong]

Being able to debug your scripts on the desktop can save a lot of time. Troubleshooting the mobile user interface on a desktop gives you access to your desktop's full sized keyboard and monitor, and browser's developer tools. Using your desktop to debug your mobile interface issues makes troubleshooting easier in situations where a physical mobile device is not available to you. I will show you how to access the supported Mobile and Tablet user interface on a desktop browser, as well as some information on tools that can be used to help with the troubleshooting process.

Using the Mobile UI on a Desktop Browser

Both the Mobile and Tablet UI can be accessed on any supported desktop browser. Going through the steps on a desktop will give you all of the functionalities of the desktop but on the limited interface of the device. Sounds like a strange approach? Not quite. Using your company's mobile interface on a desktop can help find any holes in functionality or troubleshoot issues that arise.

      Above:   The ServiceNow Mobile UI within a Chrome desktop browser

You can access the mobile device interface by using these URLs, just add your instance name where indicated:

• If you want the smartphone mobile UI add /$m.do to the end of your instance name: https://<instance_name>.service-now.com/$m.do
• If you want the tablet interface, you add $tablet.do to the end: https://<instance_name>.service-now.com/$tablet.do

Once you're in either of these alternate UIs, you can get back to the desktop UI by using the sysparm_device=doctype, like this:

https://<instance_name>.service-now.com?sysparm_device=doctype

While the look and feel won't be exactly the same, you will be able to interact with the instance in the same way you would on a mobile device.   Right-clicking can be used to simulate a 'tap and hold' action.

Mobile Device Emulation

There are a couple of options that can be used to more closely model a smartphone or tablet's appearance and behavior. This can be important when you want an accurate representation of how something will look on a mobile device.   These options allow you to do things like set the display to a phone's native resolution, or to jump between landscape and portrait format without manually resizing you browser window.   Chrome and Xcode provide developer tools for Macs and PCs to emulate different devices. Using these options provides a more accurate representation of how your changes will appear on your device of choice.

Above:   The XCode iOS Simulator

Chrome (Mac and PC)

Chrome has mobile device emulation built into its developer tools. This can be accessed using the following steps:

1. Access the developer tools:
   1. In Windows: Control + Shift + I
   2. In Mac: Press option + ⌘ + J
2. Press escape, then select the "Emulation" tab.
3. Here there are a number of options, but the 'Model' selector will allow you to quickly emulate a number of devices.

Above:   The Chrome Developer Tools window, with the Emulation tab shown

XCode (Mac Users)

XCode is an IDE suite for OSX and iOS that includes an iOS simulator. XCode can be used to simulate a variety of iPhone and iPad devices.   Due to an issue with the way XCode handles its user string, this option may not work on Eureka Instances, but will perform as expected in Fuji, as well as instances still using the legacy mobile UI. Details on the use of this tool can be found on Apple's developer site.

Debugging a Physical Mobile Device with a Desktop Computer (Mac Only).

In some rare cases, you'll run into an issue that isn't reproducible on the desktop browser, but does occur on your phone or tablet.   In these cases, iOS devices can be connected to a PC/Laptop and debugged with the Safari browser's Web Inspector.   Unfortunately   was introduced in Safari 6, after Apple stopped updating Safari on Windows.   So, you'll need a mac using OSX 10.7.4 or later to do this.

1. Connect your iPhone / iPad to your computer using a USB cable.
2. Open Safari on your Mac
3. Browse to Safari → Preferences
4. Click on the Advanced tab
5. Check the checkbox next to "Show Develop menu in menu bar"
6. On your iPhone, open your browser and log onto your instance.
7. On your Mac, Click on Develop → iPhone → <site name>

This will open the Web Inspector, while will allow you to inspect elements of the page, as well as view console logs.

Above:   The Safari Develop Menu.   With the connected iPhone highlighted

In the image above, you can see the connected iPhone listed in the Develop Menu.   Note that just above it is the iOS Simulator mentioned earlier.   If you're using the Simulator, you can also use Safari's developer tools to debug the iOS simulator using the same steps.

  Above:   The iOS Simulator alongside the Safari Web Inspector

More information see Web Inspector.

The above information should allow you to access the Mobile and Tablet UI on your desktop, giving you the ability to test and debug on your instance.   This should speed up your development process and make it much easier to identify and correct client side issues that come up during the creation of new content for mobile.

 

Related Articles

KB0549598:   Known Error:   console.log statements can cause errors in Internet Explorer 9 if the br...

KB0546854:   Info on troubleshooting UI Policies.   Examples include the use of the developer consol...

KB0547069:   Determining if there are client script errors on your instance.

KB0550574:   Troubleshooting form issues

Using the Smartphone Interface - ServiceNow Wiki