At times, you really need to debug a web app running on a phone, especially when working with stuff like Web Bluetooth, PWA apps, etc. Chrome makes this super easy.
Setup
Phone
- Settings → About Phone → Tap build ID button a bunch of times until you are a developer
- connect phone to computer via USB
- open a page in Chrome
- click Allow in “Allow USB debugging?” dialog when connected to the computer.
Computer (Arch Linux)
pacman -S android-tools android-udev- add yourself to the
adbusersgroup:sudo usermod -aG adbusers cbrakenewgrp adbusers
- (may have to log out and log back in for permissions to stick)
-
adb devices(should show something like below)
[cbrake@ceres ~]$ adb devices
List of devices attached
27251JEGR06021 device
Remote Chrome connection
Start Brave, Chrome, or Chromium on your computer and enter chrome:inspect for the URL. Your phone should show up. Make sure you have a page open in Chrome on the phone, and you should see a list of pages:
Click inspect, and you will see your phone browser on the computer, along with all your standard debugging tools:
Debugging an Application on your computer
Often you want to run a web application on your computer and display/debug it on your phone. You can just access the IP address of your computer but with things like Web Bluetooth, security restrictions don’t allow Web Bluetooth to work unless you are on a HTTPS secured URL, or localhost. To trick the phone into thinking the app is running on localhost, you can set up port forwarding. In the below example, Simple IoT is running on my computer and I’m forwarding it to the phone, so I can open it as localhost there:
Now the web app on my computer is displayed on the phone and on my computer.
