Sometimes, you have a style issue that occurs on a real mobile device only. If you were developing the site on the PC, it is easy to use the inspection tool that comes with the browsers. But for the real phone, the easy way to do the inspection is using the remote device feature from Chrome. I will share what I do here.
What you will need.
- Phone with Android operation – Android version 4.0 (Ice Cream Sandwich) or later
- USB cable for connecting the phone and your PC
- Chrome 32+ for Windows
- the latest available version of Google Chrome for Android from the Google Play Store
How to
- On your phone, you want to enable the Developer options. To do that, go to Settings, then go to About Phone, and tap on Build number 7 times. If your phone already enables the Developer options, skip this step.
- At the Developer options, enable USB Debugging. You may see the popup message that says “Allow USB debugging?”, just hit the OK button.
- Next, connect your phone and PC by USB cable. Make sure you use the compatible USB cable for your phone, otherwise, your phone may not connect to the remote device feature on Chrome. Once you plug the USB cable into your phone and PC, you will see the USB options. For me, the options are, Charge this device, Transfer files, Transfer photos(PTP), and Use devices such as MIDI, and USB tethering. I choose the Transfer files option.
- Now, opens the Chrome browser on your PC and then open the developer tools (F12). At the main menu, select More tools then selects Remote devices. If your phone can connect to Chrome, you will see your phone device in the Devices list in the Remote devices tab. Make sure Discover USB devices are enabled.
- Finally, you just open the website on Chrome on your phone. Then back to Chrome on your PC. Click on your device at Remote devices. Then click on the Inspect button next to the site you want to inspect. The result will be something below. And that’s it.
