Developing a website or web app means, you have installed an editor locally on your computer, writing your code locally and start a tiny, built-in web server for debugging locally in your preferred browser. In most browsers, there are some features to mimic a smartphone, to see if your solution is working on such a device too, but you only get a hint if it’s running properly. Some mobile features like
navigator.canShare do not work at all. Better is to see it live on your device.
This article will show you firstly, how to test your local solution on a smartphone and secondly, how to debug it locally, when it runs on the smartphone after releasing.
I will use following setup:
- Editor: Visual Studio Code
- Smartphone: Android
- Browser for Desktop & Mobile: Microsoft Edge (any other Chromium based browser will work also)
Before we start, we have to enable the Android smartphone to connect to other devices, by switching on USB Debugging:
- Go to
- Tap 7 times on
- Go to
When you start your local web server from VS Code, your solution can be accessed by a
localhost address at a specific port:
Even if you are in the same network with all your devices, this address is only available locally. You need to “announce” this address to your mobile device by using the mechanism called Port Forwarding. This is a job for the browser…
Connect you mobile device via USB with your local machine
Open up chrome://inspect/#devices in your Chromium based browser (works in all Chromium browsers)
Your mobile device will ask you to allow USB-Debugging … say
Devices, your mobile device will appear after a few seconds … my is here the
Enter your local, to be forwarded address (
'localhost:' and port number) and check
Enable port forwarding
Open your Chromium based browser on your mobile device
Enter the URL
Your local solution will now be loaded on your mobile device and you will see this in your local DevTools:
This step is now very easy, because we are connected to the mobile device and a remote site is loaded. Just click
inspect at the appropriate item:
This works now also on the released version of your solution, you want to debug. Just enter the URL in a new tab on your mobile device, find the item in DevTools-Devices and click on
The window, which will be opened on
inspect, are the Chrome Developer Tools and every interaction with it, will be reflected on your mobile device, as you are used to when debugging locally:
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...