- 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.
Your 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 device
First 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 Chrome
Next 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 development machine
Connect 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 tab
The 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.
The 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 vertical 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!
Here 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.
But if I resize it on mobile you will notice the margins on each side become uneven. What is supposed to happen is that the grid elements reconfigure themselves based on how much screen width is left on either side of the grid. Here’s how it looks on my mobile device.
As you can see this is not pretty and it happens on mobile (but also when you resize your browser to this size, so it’s to do with the screen size not the browser in use). Isotope.js is being used to filter the grid items and they do support responsive grids as you can see here. The problem in this case is that the code that handles this grid reconfiguration has been overwritten.
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!
This has made the grid look worse unfortunately! As we can see the gap is now bigger due to a margin-left of 40px being applied in the master.css stylesheet. Lets see how the grid looks if we disable this css rule…
As we hover over this element in the image above, we can see the site on our mobile device by highlighting the element being hovered over and from this we can see how the CSS being applied on this element, is visualized on our mobile diplay. Here’s how it looks on my phone.
The great thing about debugging remotely is that you can be working in developer tools with your full screen and not have to minimise or change to a different screen to see the changes you have just made. This is because all of your changes are happening on your mobile device so you can see the changes immediately after implementing them in developer tools.
Debugging Locally Hosted Projects
If 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.
Here’s an example of an Angular 2 project I am working on, on localhost:3000. Note it is not responsive!