How to Inspect Element on an Android Phone Using Chrome

If you are a web developer, designer, or just a curious power user, you probably rely heavily on the “Inspect Element” feature in desktop web browsers to troubleshoot CSS, view page source code, and test website layouts. However, debugging a website on a mobile device is incredibly frustrating because mobile browsers do not feature a native, right-click “Inspect” menu.

When a website looks perfectly fine on your computer but breaks completely on your smartphone, guessing what went wrong is not a viable strategy. Instead, you can use a powerful hidden developer workflow called Chrome Remote Debugging. This allows you to tether your phone to your computer and use your desktop monitor to inspect and edit the live code running on your Android device.

Requirements Before You Start

To successfully inspect elements on your Android phone, you will need three things:

• An Android smartphone with the Google Chrome browser installed.
• A Windows, Mac, or Linux computer running the desktop version of Google Chrome.
• A high-quality USB cable to connect your phone to your computer.

Step 1: Enable Developer Options on Android

Before your computer can communicate with your phone’s browser, you must unlock Android’s hidden developer mode.

1. Open the Settings app on your Android phone.
2. Scroll down to the very bottom and tap on About phone (or About device).
3. Locate the Build number entry. Tap on it exactly seven times in rapid succession.
4. You may be prompted to enter your PIN or passcode. Once entered, a small notification will appear stating, “You are now a developer!”

Step 2: Enable USB Debugging

Now that Developer Options are unlocked, you need to enable the specific setting that allows code inspection.

1. Return to the main Settings menu.
2. Tap on System (on some phones, you may need to tap on Advanced settings).
3. Tap on the newly revealed Developer options menu.
4. Scroll down to the Debugging section and toggle on the switch for USB debugging.
5. Tap OK on the security warning prompt.

Step 3: Connect and Inspect

With your phone configured correctly, you are ready to start remote debugging.

1. Connect your Android phone to your computer using the USB cable.
2. Unlock your phone screen. You will likely see a prompt asking, “Allow USB debugging from this computer?”. Check the box that says “Always allow from this computer” and tap Allow.
3. Open the Google Chrome app on your Android phone and navigate to the website you want to inspect.
4. Now, open Google Chrome on your desktop computer.
5. In the desktop address bar, type chrome://inspect/#devices and press Enter.
6. Ensure the Discover USB devices checkbox is ticked.
7. After a few seconds, your phone’s model name will appear in the list, along with a list of all the tabs currently open in your mobile Chrome browser.
8. Locate the specific website tab you want to debug and click the blue inspect link below it.

How to Use the Remote DevTools Interface

Clicking “inspect” will open a completely new Chrome Developer Tools window on your computer monitor.

This interface is split into two sections. On the left side, you will see a live, interactive screencast of your phone’s display. On the right side, you will see the familiar HTML DOM tree and CSS styling panel.

Because the connection is live, you can click on an element in the HTML code on your computer monitor, and it will physically highlight that element on your smartphone screen in real time. You can edit CSS values, delete elements, and view console errors using your desktop keyboard and mouse, completely eliminating the guesswork from mobile web development.