Skip to main content

Debug Your Mobile Website Using Chrome

[PLACEHOLDER]


Introduction
Recently I worked on a redesign of one of my client’s mobile website.  One of the key challenges I encountered was to test the new features of the mobile-only website on the emulators.  This is because there are some new features which is hard to test without an actual device.
Therefore I decided to  debug the mobile site by using an actual device connected to a laptop and using Chrome as the tool for it. But I encountered new challenges. One of them being the device not getting recognized for debugging and not even showing in the Windows Device Manager.
In this article we are focusing on the Android side of things. I used the following tools:
  • A PC laptop (with window 7 and above)
  • An Android phone. (I used a Samsung Galaxy S5 Neo)
  • Browser: Chrome

Clarification note:
This is not a step by step article for debugging the apps as you can find that in the reference provided here. This article is my personal experience when going through the debugging exercise, items that you might not find in the reference links, so please consider this as an extended documentation that might help your website and it’s new features.

Before starting:
  1. You might find some trouble when you are connecting your smartphone as it may not get recognized by your PC. For that reason I placed this link in the  reference section at the end of this article.
  2. If you are looking for documentation on debugging using your device I strongly advise you to follow the guidelines in here under the reference section.

Here are the lessons learned based on what happened during the debugging:
1. Make sure you have the right cable as not all cables can be used for debugging. As I tried to debug the mobile website with the Android device, the computer was unable to recognize the smart phone. This was after installing the USB drivers that I downloaded. The smart phone was charging as it was connected, and the laptop was flagging that device as connected, but I was unable to use the device for instance I wasn’t able to access the media files in it or see it in the Device Manager from Windows. Therefore I decided to change my cable and BOOM! - It worked.
2. Sometimes you may need to get the the latest Chrome browser. Or others may recommend getting the Chrome Canary version which is a different from what you would normally install. Canary is a one of the different releases Chrome may have in their roadmap with features that are still not in the current production release however it is not well tested.

3. I don’t want to repeat the wheel or take credit for a well documented process. So I would advice you to follow the android instructions: https://developer.chrome.com/devtools/docs/remote-debugging
3b. If you are debugging then in order to make your life easier, chances are you will need it eventually, so download the Android Studio and the SDK at:
https://developer.android.com/studio/index.html  Follow instructions and install.
4. Go to your Device Manager and make sure the device is appearing in:
1. Modems. ex Samsung Mobile USB Modem as shown below
2. as it's own device: Samsung Android Phone
3. inside Universal Serial Bus Controllers. Ex. Samsung mobile USB Composite Device. See image above.

Note: if you cannot see your device as a media to transfer files, something is definitely wrong. So go back to item list 1 and 4, until you get it working. Perhaps getting the correct driver, if Microsoft updates do not work for you when you connect the device. Be patient, Microsoft screen will take a while to get the drivers (from 1 mins to 5 mins., but eventually believe that something is happening. If it takes longer than that cancel and repeat. If repeating does not work, then download the drivers and install. And then retry the steps again).

5. Once your device is recognized by your laptop then you are on the right track.
Make sure you follow the android steps for debugging. Specially turning your device developer mode and USB debugging:
At this point then open the explorer. Look for the Android folder, normally in the program files folder. Then go to sdk > platform-tools folder. You will find the adb.exe. Do the following:
5.1) copy the location path
5.2) load powershell or cmd
5.3) CD [location path copied]
5.4) run command “adb start-server” .
If your phone is connected it should prompt the screen of "Allow USB debugging" with the computer RSA key fingerprint (the same that you would see at the "Discovering devices in chrome" section in this link).

6. Now if you go to chrome://inspect/#devices on your chrome PC you should see the device if "Discover USB devices" is selected as shown below.
Screen when no devices found
In this example I’m loading google.ca on the phones browsers. At this point I’m able to inspect it using Chrome Developer Tools:
Screen when devices found

Final notes:
When you are done debugging and you would like things the way they are then:
  1. Go to the command prompt (or to powershell) and run the command “adb kill-server”. When you do this, if you go to the chrome inspect devices you will no longer see the mobile device.
  2. Finally go to your device and turn off:
    1. USB debugging
    2. Developer option off as well
References:
Install USB Drivers:

Remote debugging:
Device mode and mobile emulation:

Dev tools:

Trending posts

What it means to be product led

Many successful organizations including Miro, Figma, Spotify, Atlassian are using products as vehicles to drive customer acquisition and growth. These organizations use their products at the centre of their strategy to win customers and retain them.    Photo by Miguel Á. Padriñán via Pexels If you use any of these tools you are aware of the free trials and freemium versions of these products. These organizations use free versions to generate prospects, drive adoption and convert to paying customers. These organizations are always customer focused and drive to provide friction-less customer experience.  Recently I learned about the inner workings of these organizations by taking the course from Mind your Product and Pendo . Currently the course is available for free and I recommend signing up for the course while the offer is available. Please find the details at the end of the post.  I found the course very insightful and I summarized three (3) key pillars of being a product led organ

Designing Habit Forming Mobile Application

Mobile Applications have become an integral part of our daily lives - we use mobile apps as alarm clocks to wake us up in the morning, to create to do lists when we start our day, to communicate with our colleagues at work via apps like Skype. We even check reviews of restaurants to visit on apps like Yelp and we seek entertainment on apps like Netflix and spotify. So what drives us to use these apps so seamlessly in our daily lives? Why we prefer some apps over others? Is there a science behind designing successful mobile apps like Facebook?  Photo by Peter C from Pexels A study in US revealed that a user between the age of 18 and 44 visits the Facebook app on average 14 times a day [1]. This shows that using the Facebook app is a daily routine for many of its users. This makes Facebook a great example of a habit forming mobile app which is designed with human psychology in mind that encourages habit forming behavior in its users .   I recently attended a seminar on the de

The Creative Process

By: Herak Sikder I still remember the day I watched “ Finding Nemo ” for the first time. I was feeling bored and wanted to watch something to pass my time. I assumed Finding Nemo to be one of those animated movies that you just watch once and then forget. But soon after I started watching the movie I was totally absorbed by its storyline. It almost felt like I was watching a real life story unfolding in front of my eyes and all the characters seemed to come alive. That was the first time I experienced the movie making magic of Pixar and till this date Pixar movies have not failed to amaze me whether it’s Toy Story, Cars, Monsters Inc., Ratatouille, Up, Wall-e and many more. So I was really excited when I found out that ED Catmull , one of the cofounders of Pixar released his book. I picked up the book from Indigo upon it’s release and I was wasn’t disappointed. Ed tackles a lot of common issues that plagues successful organizations as they expand fast and lose their innov

DIGITAL STRATEGY NOT A SEPARATE EXERCISE

Driving Digital Strategy The book " Driving Digital Strategy ", by Sunil Gupta , came at the right time as I have been studying many aspects of the business transformation and the disruption that is happening across the different industries. In this era, as a company leaders, just doing what brought you to this present, not embracing change, not renewing yourself, and important aspects of your business; is an indication that your ego, or comfort, or your fear to change, is not allowing you to move forward... and that potentially will be the "end". That "end" can come in one year, two... perhaps five years... but make no mistake, it is coming. The introduction of this book have key notes that I found extremely relevant to my current research. One of them being the following: "The leaders who achieve 'transformative' results go all-in on digital. That is they don't treat digital strategy as separate from their overall strategy.

This blog uses cookies to improve your browsing experience. Simple analytics might be in place for pageviews purposes. They are harmless and never personally identify you.

Agreed