Google Chrome — How to Inspect Websites on Mobile Devices

Easy way to inspect sites on a mobile device

Photo by Brett Jordan on Unsplash

I was recently creating my responsive portfolio website and was testing it on my mobile. I wanted to inspect few elements. I thought there is no way to do that. But I came to know that there is a way. In this article, we will see how to debug a website on a mobile device.

1. Enable USB Debugging

1. First, we need to enable USB Debugging on our mobile.
2. To do the Developer Options should be enabled. To enable Developer Options, go to About Phone and click Build Number 5 times.

About Phone > Click Build Number 5 times

3. Once Developer Options is enabled, you can go to System > Developer Options and scroll down to USB Debugging.

Enable Developer Options

4. Enable the option and click ALLOW in the popup.

Allow USB Debugging

2. Connecting Mobile Device to a Computer

1. Now you can connect the mobile to a laptop or a computer via a USB cable.
2. Open the Navigation Drawer and change the option from Charging Device to File Transfer.

Change option from Charging Device to File Transfer

3. Press ALLOW in the Allow USB debugging? popup.

Allow USB Debugging

3. Inspect Website from Laptop

1. Open Chrome browser and navigate to chrome://inspect.

Open Inspect from Chrome

2. Under Remote Target, the sites you opened in your mobile browser will be listed. You can click inspect to debug the site.

Inspect Mobile Device

Preview

Mobile Preview

Laptop Preview

Thank you 🤘

To know more about me, visit ganeshkumarm.me