logo

NJP

Accessing Your Developer Tools in the Classic Mobile and Tablet UI

Import · Sep 17, 2015 · article

Sometimes your Client Scripts, UI Policies, and other client side scripting doesn't work as expected. This can be especially frustrating when you don't have access to debugging tools like your browser's developer console, which allows you to see any errors being thrown and what's triggering them. Fortunately there are a number of ways to see what's going on under the hood in the mobile UI. Listed below are a few ways to see what's happening in your scripts.

Accessing the Mobile and Tablet UI from a Desktop Browser

Most of the time, an issue occurring on your mobile UI will be reproducible by using the Mobile UI on your desktop browser. Using the mobile UI on a desktop browser will allow you to find any potential issues you may encounter within the mobile UI. This is also useful as it allows troubleshooting on a full sized monitor and keyboard, as well as eliminating the need for a physical mobile device when testing. This is also the simplest way to see any client side errors being generated while using the mobile UI. Since we're on a desktop browser, you have access to the developer console and tools that are available in all major browsers.

The mobile and tablet UI can be accessed by using the following URLs:

  • Mobile UI: https://.service-now.com/$m.do
  • Tablet UI: https://.service-now.com/$tablet.do

At some point, you're going to want your desktop UI back. The following link will get you back from either mobile or tablet.

Desktop UI: https://.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.

A Note on Impersonation Impersonation options are only visible in the desktop UI. This does not mean that will not be able to impersonate, you'll just need to do so before switching to an alternate UI. Impersonate as normal, then browse to one of the above links. Alternately, you can impersonate on a physical mobile device by first using the desktop link, impersonating, and then using one of the mobile links to get back. While doing this does allow you to see the desktop UI on a mobile device, it's not recommended that you do so for anything other than impersonation. The full desktop UI is not designed to run on the more limited mobile hardware, and is not supported.

The Developer Console

Now that you're in your UI of choice, you can use the developer console to check for any client side errors you may be getting. You may already be familiar with your browser's dev console, but if not, here's how to find it on our supported browsers.

Chrome

PC: Click ≣ → More Tools → Developer tools, or press Control + Shift + I

Mac: Click ≣ → More Tools → Developer tools, or press Option + ⌘ + J

Firefox

PC and Mac: Click ≣ → Developer → Browser Console

Internet Explorer

Press the F12 key or Click "F12 Developer Tools" under the Tools menu

Opera

From the menu, open Tools → Advanced → Developer tools

Mobile Device Emulation

If you'd prefer a closer match for the appearance of a mobile device for testing. There are a couple of options that can be used to more closely emulate a mobile device.

Chrome (Mac and PC)

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

1. Access the developer tools:

In Windows: Control + Shift + I

In Mac: Press option + ⌘

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.

XCode (Mac Users)

XCode is an IDE suite for OSX and iOS that includes an iOS simulator. Due to an issue with the way XCode handles it's 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.

Debugging a Physical Mobile Device with a Desktop Computer.

It's rare, but you at some point encounter an issue that is only reproducible on a physical mobile device. Fortunately, iPad, iPhone, and Android mobile devices can be connected to a desktop via a USB cable, using the desktop browser's console tools to troubleshoot issues.

iOS

iOS devices can be connected to a PC/Laptop and debugged with the Safari browser. 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 →

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

Android

Android devices can also be connected to PC/Laptop via USB and debugged using the Chrome desktop browser.

The above information should help identify mobile problems you encounter. Finding where specifically an issue is occurring will help speed the process troubleshooting any client side issues you run into while developing your mobile and tablet UI.

View original source

https://www.servicenow.com/community/developer-blog/accessing-your-developer-tools-in-the-classic-mobile-and-tablet/ba-p/2290165