Mobile web specialist — Remote Debugging
Use Case — How I use Android Device with Chrome Devtool to speed up responsive design test on web pages
The journey to become a Mobile Web Specialist (MWS) through the Google Africa Scholarship program with Andela Learning Community (ALC) tagged ALC 3.0 was a great experience for me, I learned one of the Chrome DevTools feature which has made development easier for me while developing mobile responsive web pages.
The feature is Remote Debugging of web pages on an Android Devices. The awesome part of this feature is that it gives live sync of testing web pages on a real Android device and allow the use of Google Chrome for desktop DevTool to inspect, make live edit on html and css files with instant feedback on the connected device.
I had no idea on how to go about this before; I was only stuck with using the Chrome DevTools virtual mobile emulator to test responsive pages while using a Chrome Browser. This method also give excellent result but the need to use real device just like native Android and IOS developers is the major reason for writing this post. At the end everything worked out. I learned a lot from the Udacity course instructors, and more importantly, I became an advocate of facilitating responsive design practice.
As of now, there is no day at work or in a tech meetup on campus that I do not leverage on the use of Chrome DevTools, either by myself or with my team, to discuss how it helps speedup development and test process, hence increasing the confidence and smooth test environment for web developers.
Let’s get started
You can check out the process involve to setup your Android device in sync with the Chrome DevTool here
Were you able to setup your Android device for Remote debugging? If yes, skip the quick guide below. If no, please follow this quick guide below. I hope it helps.
Quick Guide I used while setting up my Remote Debugging Device (Sample real device used: Infinix X559c)
You can use any real android device to follow up with the guide.
- Go to settings on your device.
2. Click Developer option (It will open on a single click if you have already configure your device). If it doesn’t open with a single click, try clicking the option 7 times. Then you’ll see a toast message “you’re now a developer”, after which the developer options will open.
3. Click the first option to enable other dependent options (This option is on by default). Press OK on the prompt dialog box. You only do this if the option is off.
4. Scroll down to the Debugging section and select USB debugging. You will be prompt a dialog warning you about the preceding action, press OK to continue.
5. You’re almost there, now connect your device to the PC with a USB cable. Some android device automatically install USB driver on the computer for the device to be accessible through a USB port. If your Android device has issue installing the USB driver and your development machine is running Windows, try installing the USB drivers for your Android device maually. See Install OEM USB Drivers recommend by Google or an alternative I used ADB Driver Installer (Just download and install on your development machine — then reconnect your device through a USB cable).
6. Now, open a new tab on the chrome and enter chrome://inspect in the address bar. Make sure the Discover USB devices is checked.
7. You will see the screen below (Offline -status). Now open the Chrome browser on your Android device so as to make the status change to Online — which denote an active session between your Android device browser and development machine browser.
The status will showing a pending authentication waiting for you to accept the connection permission on your Android device (Press OK on the prompt dialog).
8. Wow, you’re a genius. Now Get ready to explore what you can do with this successful Remote Debugging Android device connection.
The list of your recently opened tabs on your Android device browser with their respective url will be display below the Chrome as shown above. And you have four options (inspect, focus tab, reload and close) which you can perform on them.
Start Exploring the options
You can test with any website open on your Android device browser
Inspect : Remote Debugging lets you inspect a page running on an Android device from your development machine. Try this by clicking the inspect option on the focus tab.
Focus tab : You can use this option to force any tab as the active tab from the development machine Chrome Browser and it will automatically trigger same action on the Android device. Try it out to see the effect.
Reload : You can use this option to reload the active tab from the development machine Chrome Browser and it will automatically trigger same action on the Android device. Try it out to see the effect.
Close : You can use this option to close any tab from the development machine Chrome Browser and it will automatically trigger same action on the Android device. Try it out to see the effect.
Playing with the DOM and preview your styling
Keep the dice rolling — learn by doing
Thanks for making it this far. I hope you’ve learnt something useful. The best way to learn something is to just do it. If you happen to use this guide to speed up your debugging experience while developing responsive web pages, you will later get used to other available features of the Chrome DevTools. If a problem gives you a hard time, write about it. Share your experience with the world, you will learn a lot.
If you have any questions, comments or feedback, don’t forget to add them in the comments. And if you found this article useful, don’t forget to clap.