On This Page

Debugging on Mobile Devices

In this topic, you will learn about debugging JavaScript on mobile devices. During development testing and debugging content on mobile platforms can be very challenging.

Overview

In this document you will learn how to get started with debugging on mobile devices and covers the following solutions:

Debugging on iOS devices

Debugging on Android devices

Using Charles on mobile devices

This document serves as a jumping off point for developers to debug on mobile devices. It does not cover all methods for mobile debugging. For more information on debugging in general, visit the JavaScript Debugging Basics documentation.

iOS debugging

Minimum requirements for iOS debugging

Safari version 6+ running on Mac MacOS

iPhone or iPad with iOS 6+

Note: if you are on iOS 10.3 or later, open the Settings and navigate to General > About > Certificate Trust Settings, and find the Charles Proxy certificate, and switch it on to enable full trust for it.

On your device, open the Settings app. Select Safari, scroll down to the bottom of the page and open the Advanced menu. Enable the Web Inspector option.
Web Inspector

Still on your device, open the Safari app and browse to any web page.

On your Mac, launch Safari, open the Preferences (Safari > Preferences), and navigate to the Advanced section. Enable the Show Develop menu in the menu bar option.
Show Develop Menu

Open the Develop menu. You will see your iOS device listed. When you mouse over your device name, you will see the URL to the site you've browsed to on your device displayed.
Find the Device

Select the URL and a Web Inspector window will open, allowing you to preview, inspect, and debug content on your mobile browser from your desktop.
Debug on Desktop

In the Resources section, you can preview and inspect the web page. Hovering over elements in the Web Inspector will highlight the corresponding elements in the browser on your iOS device.
Inspecting Elements

You can also use the Debugger and Console sections to further debug your page by setting breakpoints, logging data, etc.

Android debugging

Minimum requirements for Android debugging

Note: The steps in this section were written using a device running Android 4.3.

Enabling debugging on your device

Before you can begin debugging content on your device, you need to enable USB debugging in your device settings.

If you are a running Android 4.2+, you will need to enable your device's Developer options before you can turn on USB debugging. On your device, open the Settings app and select the About phone menu. Locate your device's Build number and tap it seven times.
If you are running an older version of Android, you can enable USB debugging by going directly to Settings > Developer options.

Hit your device's Back button and you will see the Developer options menu listed in the Settings.
Get to Developer Options

Open the Developer options menu and check the box to enable USB debugging.
Enable USB Debugging

Remote debugging using Chrome for Android

Now that USB debugging is enabled on your device, follow these steps to start remote debugging with Chrome:

Connect your device to your machine via USB cable. On your device, you will be prompted with a dialog asking if you would like to allow USB debugging. Choose OK to allow your computer to connect to your device.
Allow Connection to DeviceIf you are on a Windows machine, you may need to install USB drivers. For more information, visit the Android Developer documentation.

On your device, open the Chrome app and browse to a web page.

Return to Chrome on your computer. On the about:inspect page, you should see your connected device. Below your device name, you will be able to see a list of all of the pages open in Chrome on your device.
Connected Devices

To begin debugging a web page, select the inspect link below the page URL. This will open Chrome's Developer Tools.
Inspect Web Page

To the left of the Elements tab, you can select the device icon to open DevTool's Screencast feature. This allows you to open a live preview of the content as it appears on your mobile device. For more information on how you can use screencasting to interact with your device, visit Google's documentation.

Charles for mobile

Charles is a web proxy that can be run on your own computer, allowing you to record data that is sent and received via your web browser. Visit the Charles website for more information on this application.

You should see a message that identifies the local Server IP and Port number (8888) that you will use to set up the device. You should also see the URL to download and install the certificate. Copy these to your computer for later use.
Certificate messageNotice that you will need to enable the Charles certificate to be trusted.

Setting up Charles on your device

In this section, you will learn how to set up your iOS and/or Android device to work with Charles on your computer.

Setting up your iOS device

On your device, make sure you are connected to the same network as your computer. You can verify this by navigating to settings > Wifi and selecting the network name to show advanced options.
Device network

In the HTTP section at the bottom, select Manual mode. Then, add the Server IP and Port number (8888) that you copied from Charles in a previous step.
Wifi details

On your device, open a browser and navigate to http://www.charlesproxy.com/getssl. You will be redirected to your device settings where you will be prompted to install the Charles Proxy Custom Root Certificate profile. Select the Install button to install the Charles certificate on your device.
Install Charles certificate

Next, you are ready to ensure that your device trusts the Charles certificate. On your device, navigate to General > About > Certificate Trust Settings. Here you should find the Charles Proxy certificate.
Certificate Trust Settings

Enable the Charles certificate. Notice the warning message. You may want to disable this certificate when not debugging with Charles.
Enable trust certificate

Now, you will be able to see any data sent and received in Charles.
See Charles data

Setting up your Android device

You will be prompted with a Certificate name dialog. Specify a name for the certificate and set the Used for field to Wi-Fi. Select OK to install the certificate.
Install Charles Certificate

Next, open the Settings > Wi-Fi menu. You will see a list of networks that you have connected to on your device. Select the wireless network that you are currently connected to. Remember, this network must match the network you are connected to on your computer.

This will open a small dialog with three options—Edit, View, or Forget. Select Edit.

In this dialog, scroll down to the bottom and enable the Show advanced options field. This will reveal Proxy and IP settings.
Advanced Settings

Change the Proxy settings field to Manual.

Fill out the Proxy host name field with your computer's IP address and the Proxy port field to match the port set in Charles (by default, the port is set to 8888). Select Save.
Set IP Address

In your device's default browser, navigate to a website. You will be able to see any data sent and received in Charles.
See Data Transfer