Mobile development – remote debugging

Ever created a responsive website only to see some random and unexpected behaviour on mobile? If you’ve never done a design for mobile then the answer is probably no. However, for anyone who has done any responsive design then a big Yes!

The theory says, if you design for mobile first or use some responsive framework, all will well. In the real world, theory only takes you 90% of the way. In the end you still have to test and debug on a variety of devices.

Chrome has excellent debugging tools.

Mobile view in Chrome

Open the debugger/console in chrome by hitting ctrl+j. You can now debug and inspect your page. Any seasoned web developer will be familiar with this feature.

You can view it in a mobile view by clicking the “Toggle device toolbar” button. This will show you your creation in various devices. It is a great start in viewing the site in mobile or tablet format.

Remote Debugger

The mobile view is only an emulation. I have found that you still get unexpected results on real world devices even after plenty of work in the mobile views.

You can remote debug chrome on your android device using the remote debugger.

  1. If you do not already have ADB installed you will need this. Unfortunately, it is difficult to install this without the entire Android Studio Suit. Google have made this difficult and most of the guides are now out-of-date. The following however works:

    https://wiki.lineageos.org/adb_fastboot_guide.html

    You do not need fastboot installing, just ADB

  2. Once ADB is installed you need to enable remote debugging on your device and plug it into the usb on your computer. You will need to do a Google search to find out how do do this on your device but on my Galaxy you do the following:
    1. Open settings.
    2. Select About Device.
    3. Click Software info.
    4. Click Build Number 7 times.
    5. Developer options should now be available.
    6. Go back to settings.
    7. Select Developer options from menu (this was not available before).
    8. Scroll to Enable USB debugging and enable it.
  3. To get the debugging working you might need to restart the ADB server on your machine:
    1. Type: adb kill-server at the terminal and then adb start-server.
    2. Type: adb device and your device should be listed.
    3. If the above did not work try adb usb.
  4. Now you are ready for remote debugging! So, open a chrome browsing session in both your mobile device and desktop computer.
  5. In the chrome address bar on your desktop type “chrome://inspect” and enter.
  6. You should see your device and its current chrome session listed.
  7. Select the debug link to launch the remote debugger.
  8. You can now inspect and edit style/html on your remote device live … happy debugging!