DEV Community

loading...
Cover image for Debug your website on Android with Chrome Remote Debugging.

Debug your website on Android with Chrome Remote Debugging.

weeb profile image Patrik Kiss ・2 min read

Most of us have probably encountered cases when your website works perfectly fine on your desktop, and even when viewing it in mobile resolution, but when you actually open it on your phone, it's just not the same, something's off.

The problem is that a mobile version of a browser might work slightly differently than the desktop one, so these bugs don't occur on desktop at all.

I encountered myself a case like this a few weeks ago, and I used Chrome's Remote Debugging tool for the first time, and with it I could finally solve a problem I couldn't for weeks.

So in this article I'm showing you how you can use it, in case you don't, so you won't have to struggle too much in the future.

1.Enable USB debugging on your phone

For this, go to your phone's system setting and open developer options.

Alt Text

If this is not available for you yet, open "About phone",

Alt Text

and there tap the build number a few times, and you will get a notification something like "You are a developer now".

Alt Text

In the developer options, enable USB debugging.

Alt Text

I think it's obvious, but connect your phone with your PC/Laptop via USB.

2.Go to remote devices in developer tools

Now on your PC/Laptop, open developer tools, and go to remote devices.

Alt Text

Make sure you have "Discover USB devices" checked, it won't work otherwise

Alt Text

3.Allow debugging

If you have enabled USB debugging, the connection is successful and you have checked the option above, you should get this notification on your phone

Alt Text

Needless to say, but you must to allow it.

If everything went correctly so far, you should be seeing a list of the opened tabs on your phone.

Alt Text

4.Start debugging

Finally, to start debugging, click Inspect next to the tab you want to open.
But before that, you need to open it on your phone as well, because you can only view active tabs.

If everything works perfectly, then a new Chrome tab should open on your PC/Laptop with the active tab on your phone.

Alt Text

This is now the actual view of your phone. Not just a simple tab with mobile resolution of the site, but it's actually what you see on your phone, in live.

In the following gif, I'm using DEV on my phone, and you can see it in live on your dekstop/laptop.

Debug

From now on, it works exactly the same way as on PC/Laptop.

Tools

Discussion

pic
Editor guide
Collapse
calag4n profile image
calag4n

Thank you so much.
It's useful! πŸ‘

Collapse
shiponkarmakar profile image
Shipon Karmakar

Thank you so much.

Collapse
dummyko profile image
dummyko

thanks!