Web content behaves differently on mobile than on desktop. Debug live content on your device from your development machine using remote debugging.

Remote debugging on Android with Chrome DevTools

Learn how to use the Chrome DevTools to debug your site live on your Android device.

Requirements

To begin remote debugging, you need:

• Chrome 32 or later installed on your development machine.
• A USB cable to connect your Android device.
• Android 4.0+ and Chrome for Android.

Note: Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. For best results, use Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.

If at any time you encounter problems with remote debugging, refer to the Troubleshooting section.

Set up your Android device

On your Android device, select Settings > Developer options.

Note: On Android 4.2 and later, the developer options are hidden by default. To enable the developer options, select Settings > About phone and tap Build number seven times.

In Developer options, select the USB debugging checkbox:

An alert prompts you to allow USB debugging. Tap OK.

Connect and discover your device

Connect the Android device to your development machine using a USB cable.

Note: If you are developing on Windows, install the appropriate USB driver for your device. See OEM USB Drivers on the Android Developers’ site.

Now that you’ve set up remote debugging and connected your device, you need to discover that device in Chrome.

On your desktop Chrome browser, navigate to chrome://inspect. Confirm that Discover USB devices is checked:

Tip: You can also get to chrome://inspect by selecting Chrome menu > More tools > Inspect Devices.

On your device, an alert prompts you to allow USB debugging from your computer. Tap OK.

Tip: To skip this alert in the future, check Always allow from this computer.

The message USB debugging connected displays in the device’s notification drawer.

Note: During remote debugging, Chrome prevents your device’s screen from going to sleep. This feature is useful for debugging, but is also less secure. So be sure to keep an eye on your device!

If you have problems finding your device on the chrome://inspect page, see the Troubleshooting section.

Ready to debug your site in a browser tab!

On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.

To start debugging, click inspect below the browser tab you want to debug.

A new instance of Chrome DevTools launches on your computer. From this instance, you can interact with the selected browser tab on your device in real time.

For example, you can use DevTools to inspect web page elements on your device:

• When you mouse over an element in the Elements panel, DevTools highlights the element on your device.
• You can also click the Inspect Element icon in DevTools and tap your device screen. DevTools highlights the tapped element in the Elements panel.

Note: The version of Chrome on your device determines the version of DevTools used during remote debugging. For this reason, the remote debugging DevTools might differ from the version that you normally use.

Remote debugging on iOS with Safari Web Inspector

To debug Safari for iOS, follow these steps:

1. In your iOS device go to Settings > Safari > Advanced > Web Inspector to enable Web Inspector
2. Open Safari on your iOS device.
3. Connect it to your computer via USB.
4. Open Safari on your computer.
5. In Safari’s menu, go to Develop and, look for your device’s name.
6. Select the tab you want to debug.

Unfortunately there is no way to debug a site on Windows Phone, but you can
emulate a mobile browser on the desktop version of IE 11. See also Emulate beyond Chrome.

Screencast from Android device to development machine

Shifting your attention between screens isn’t always convenient. Screencast displays your device’s screen right alongside DevTools on your development machine. You can interact with the content on your device from the screencast too.

Start a screencast session

To start screencasting, click the Screencast icon in the upper right corner of your remote debugging DevTools window.

The Screencast panel opens on the left and displays a live view of your device’s screen.

Screencast only displays page content. Transparent portions of the screencast are covered by the omnibox, device keyboard, and other device interfaces.

Note: Because screencast continuously captures frames, it has some performance overhead. If your tests are sensitive to frame rate, disable screencast.

Interact with your device using the screencast

When you interact with the screencast, clicks are translated into taps, firing proper touch events on the device. Keystrokes from your computer are sent to the device, so you can avoid typing with your thumbs.

Other DevTools work with the screencast too. For example, to inspect an element, click the Inspect Element icon and then click inside the screencast.

Tips: To simulate a pinch gesture, hold Shift while dragging. To scroll, use your trackpad or mouse wheel or fling with your pointer.

Troubleshooting

I can’t see my device on the chrome://inspect page.

• If you are developing on Windows, verify that the appropriate USB driver for your device is installed. See OEM USB Drivers on the Android Developers’ site.
• Verify that the device is connected directly to your machine, bypassing any hubs.
• Verify that USB debugging is enabled on your device. Remember to accept the USB debugging permission alerts on your device.
• On your desktop browser, navigate to chrome://inspect and verify that Discover USB devices is checked.
• Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. Try using Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.

If you still can’t see your device, unplug it. On your device, select Settings > Developer options. Tap Revoke USB debugging authorizations. Then, retry the device setup and discovery process.

I can’t see my browser tabs on the chrome://inspect page.

• On your device, open the Chrome browser and navigate to the web page you want to debug. Then, refresh the chrome://inspect page.