- 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:’.
In this article you'll be shown how to set up your remote debugging environment and the necessary prerequisites, the process involved in replicating bugs on mobile devices and you'll be shown how to debug remotely in a development environment.
- Laptop/Desktop with Google Chrome installed (version 32 or later).
- An Android (version 4.0 or later) phone or tablet with Google Chrome installed.
- USB Drivers if you're using a Windows development environment.
- A USB lead to connect your laptop to your mobile device.
- If you're a Windows user you .
Enable USB Debugging on deviceFirst we'll have to unhide the developer options which is hidden by default on Android devices 4.2 or later. It will usually be in Settings > About Phone > Software info > Build Number > Tap it 7 times to become a Developer. Then you will see Developer options is now visible in the Settings menu so click it and ensure USB debugging is set to on.
Sign into ChromeNext we open Chrome on the development machine and on our mobile device. We must also sign into Google Chrome on both devices.
Connect your mobile device to your developent machineConnect your mobile device to the development machine using your USB cable. In Google Chrome and open developer tools (Cmd + alt + i / Ctrl + shift + i). Click the 3 dots on the top right courner > More tools > Remote devices. This will bring up a new panel showing the devices connected to your machine.
Select device and open a tabThe panel below should now be visible at the bottom of your inspect element section. In the remote devices section, 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.
Also if it is the first time you have connected this device to your laptop your device may appear as 'Unknown', with a message below saying 'Pending Authorization', this is normal. Just go to your mobile and click OK on the permission request dialogue box that will be visible on your phone and your browser will then be able to identify your phone.
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 see the code in your browser window that makes up the site in your mobile browser window. You might also notice the 3 verticle grey dots from before to the right of the word 'Inspect'. When clicked this gives a dropdown list of other actions you can perform on your remote device. For example, you can reload the page, close the page of focus to the nearest input field in the page from here.
DebuggingThe first thing you may notice when you hit inspect on the website you're debugging is that a new inspect element window opens (this will depend on how your inspect element is set up). It is recommended to use the full browser window to debug since you can view what you're debugging on the mobile display. This can be customized by clicking the 3 verticle dots from before.
Once you are happy with your inspect element window, there is another setting that is recommended you change. When inspecting element of your website there may be an emulation of your mobile device to the left as shown below.
It is recommended you hide this mobile emulation because when this is visible you can not actually interact with the real device, only the emulated device. For example, if you hover over the DOM elements with the emulation visible, it will just highlight the corresponding DOM elements in the mobile emulation. If you hide this emulation, you can interact with your actual mobile device. To turn this emulation off just click the button outlined in pink above. It is worth noting that when you do this you can no longer physically interact with the website on your phone, only through your browser!
ProcessHere is a real world example of a mobile specific problem that is present on Simple CSS. The grid of coloured boxes looks correct on a large desktop monitor as shown below.
Lets open Simple CSS remotely from our desktop browser so we can begin debugging. Hover over the HTML elements in your desktops browser and watch as your HTML elements start flickering. See the image below where the HTML element with the class name 'grid' as shown below.
The element with the class name 'grid' has a margin-left of 25px applied to it below a screen width of 400px. This CSS rule is overwriting the built in functionalty of Isotope.js to reconfigure the grid correctly and thus is pushing the grid too far to the left.
If we disable this margin-left on our 'grid' element, we will see that now there is a margin-left of 40px being applied to our grid element at all screen sizes . As we can see one CSS style has cascaded into another, hence the name Cascading Style Sheets!
Debugging Locally Hosted ProjectsIf you're developing with localhost:8000 there is also a way for your phone to debug this. In the remote devices section of Inspect Element, to the left you will see the Setting option (1). Click Setting and ensure that Port Forewarding is ticked. This enables port forewarding. To add a port just click 'Add rule', enter the port number you are working on and the local address including the port number and excluding http://.
Once you have entered a valid port number and local address the red border around the input field will turn blue and this is how you know it is a valid local address that can be added. From here you can either manually enter localhost:3000 into your phone and you will see it appear in the remote devices section as a new tab that has been opepened, or you can enter the local address straight from Inspect element. Once you've found the new local address in you remote devices list of open tabs, Inspect element in the same way as before and you can begin debugging.