Debugging Website on Mobile Phone

Sandy Giovanni on Debugging Website on Mobile PhoneHi, my name is Sandy Giovanni S. I am a student from Parahyangan Catholic University and I’m majoring in Informatics . Right now I’m enrolling in internship program with Tansah Web & Innovation. I’m joining this program for more than one year now. Within this program we develop, create, and build a websites. From the beginning I joined the program, I learn a lot of tips and tricks regarding creating good quality websites. This article will cover 2 interesting lesson I learn about Debugging Website on Mobile Phone.

 

Progressive Web Apps

Personally for me, building a website is much easier than creating an actual program, however do you know that website can become an actual program also? This is one of the examples of interesting things i find during this internship program. All my years of study, I have never heard of PWA until it is introduced first time I arrived. When I make a presentation of my internship result at school, everyone (even the lecturer) is astonished about the cutting edge technology.

What is PWA ? PWA is an abbreviation of Progressive Web Apps. It’s a new utility from Google that helps us to build application through website so the website can be used with any devices easily. It has a lot of feature that a native android application can have, plus its easier for me to code.

One challenge that i found in progress to build this : Since i started I am only able to inspect element or see what console log message says in a desktop browser, not in phone interface. At first I thought that its not possible to debug while i see through my phone so i was desperate at how to fix phone interface through desktop PC. But when i ask to my leader, Mr. Chilly Tan, he gave me a simple solution to debug phone interface easily. And now i want to share to you how it works.

Debugging Website on Mobile Phone

I will only share steps of inspect element with android phone, because i only have experience android phone for this case.

  1. let us turn on developer option from your android phone.
  2. Turn on the USB debugging option.
  3. Open Google Chrome and open the url which you want able to see the debug things.That’s step you do on your android phone. Now jump to your desktop.
  4. Plug in the phone to your USB port in your device (desktop/ laptop).
  5. Open the Google Chrome and press the right mouse button and choose Inspect or you can do it with shortcut key press Ctrl+Shift+I or press F12.
    Now you will see a debug screen which usually you see when you create a website.
  6. Press the three dots button in your Inspect section which will directly open Customize and control DevTools option.
  7. Hover your pointer to “More Tools” option.
  8. Select “Remote Devices” and after that your android that you plugged into your desktop will show and there will be seen the Chrome tabs which you open through your phone.
  9. After that, you can easily choose which website you want to debug though the option in before and VOILA, the new window from Google Chrome will show. It will show the debug section like you have on Inspect element your phone web through desktop.

Very simple and straight forward right? I am truly excited when Mr. Chilly Tan shows that to me, since within my internship year here I get to learn a lot of cool stuff that we wont possibly know in our study, no matter how long we study. Good luck if you want to give it a try.


The article “Debugging Website on Mobile Phone & PWA” is written by Sandy. Do check out our internship journal for more interesting