- Enable USB Debugging on your Android mobile device and open Chrome.
- Connect your mobile device to your desktop and open Chrome on your desktop.
- Inspect element in Chrome and open remote devices window.
- Click open tab and start debugging.
ContextYour overweight, overpaid and underqualified boss is moaning that the site looks poor on his mobile device despite looking great in your desktop's browser, even when you resize to mobile dimensions.
Ever wondered why this happens or why you can’t replicate mobile specific issues on your desktop? It’s because there’s different versions of the browser for each platform e.g. Google Chrome Android Version, iOS Version, Windows Version and Mac Version.
This means problems can occur exclusively on these platforms and it may not be possible to replicate the issue and subsequently debug. The solution is to remotely debug your mobile device and it’s really simple and extremely useful! And no I don’t mean prefixing the browser url with 'view-source:’.
Enable USB Debugging on deviceIt will usually be in Settings > About Phone > Build Number > Tap it 7 times to become a Developer. Then you will see Developer options is available in the Settings menu so click it and ensure USB debugging is set to on. Ensure Google Chrome is open on your mobile and your desktop simultaneously.
Connect your device to your desktopConnect your mobile device to the desktop, open chrome and open developer tools (Cmd + alt + i / Ctrl + shift + i). Click the 3 dots on the top right courner > More tools > Remote devices.
Select device and open a tabIn the remote devices section, of developer tools, on the left hand side you’ll see a list of remote devices connected to the computer and a settings tab. Click Settings and ensure Discover USB devices is ticked.
Next select your device from the menu on the left, in this case it’s SM-G920F. Enter the url of the website you wish to debug on your mobile, hit open and the site will be launched on your mobile. Click 'Inspect' to the right of the site you just opened and it will allow you to traverse the DOM of your mobile phone's browser from your desktop's browser.