Debug your website on Android with Chrome Remote Debugging.
Tags: webdev, debug, tutorial
Published: 2020-01-13 16:06:12

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](https://thepracticaldev.s3.amazonaws.com/i/lfb89kqu4tx5lvhu0ykn.jpg)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hbdagzrgmscpc99u3m1d.jpg)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dflgjhst9pfi3r7dajoa.jpg)

In the developer options, enable USB debugging.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kzrwcjliywwyyb5544x0.jpg)

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](https://thepracticaldev.s3.amazonaws.com/i/syfmbzknfzzilktki15j.jpg)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xfjv358fdu2dsulzmsy0.jpg)

##**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](https://thepracticaldev.s3.amazonaws.com/i/rkk9uth954h7yue3pi2t.jpg)

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](https://thepracticaldev.s3.amazonaws.com/i/g91nwqb5iop5isarsbn3.jpg)

##**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](https://thepracticaldev.s3.amazonaws.com/i/yxy73b53wwp7cg44tqjw.jpg)

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](https://im7.ezgif.com/tmp/ezgif-7-1524750f29fc.gif)

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

![Tools](https://im7.ezgif.com/tmp/ezgif-7-560d94a724e5.gif)