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
- First, we need to enable USB Debugging on our mobile.
- To do the Developer Options should be enabled. To enable Developer Options, go to About Phone and click Build Number 5 times.
3. Once Developer Options is enabled, you can go to System > Developer Options and scroll down to USB Debugging.
4. Enable the option and click ALLOW in the popup.
2. Connecting Mobile Device to a Computer
- Now you can connect the mobile to a laptop or a computer via a USB cable.
- Open the Navigation Drawer and change the option from Charging Device to File Transfer.
3. Press ALLOW in the Allow USB debugging? popup.
3. Inspect Website from Laptop
- Open Chrome browser and navigate to chrome://inspect.
2. Under Remote Target, the sites you opened in your mobile browser will be listed. You can click inspect to debug the site.
Thank you 🤘
Google Chrome — How to Inspect Websites on Mobile Devices was originally published in Nerd For Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.