How to test your web application locally on your phone?

Nowadays, web browsers come equipped with formidable tools to make developers' lives easier, particularly for testing different screen sizes for computers, tablets, phones, etc...

Except that between a browser simulating a smartphone screen size, and an actual smartphone, there are real differences, notably:

• Viewport management
• Pixel density ratio
• The user-agent
• Video handling and auto-play
• etc...

So of course it's possible to have a private dev version hosted online to access it with your smartphone, but having to deploy your project every single time to test phone-related issues will quickly make you waste a huge amount of time!

And besides, it's not really a "clean" solution

The solution

You'll see that the solution is very simple, there's nothing to install and nothing to configure, you already have all the tools right at hand!

Step 1: WiFi

Make sure your computer and your phone are both connected to the same WiFi, if they aren't, do it!

Careful, I do mean WiFi, and not the router/box, because wireless and Ethernet connections are sometimes managed by two different subnetworks!

Step 2: The IP

Find the local IP address of your machine's WiFi card, generally in the form 192.168.x.x.

On Windows, you can use the "ipconfig" command, or "ifconfig" for Linux and MacOS.

Step 3: The port

Launch your project on your computer, and make sure to note the port used by the application you are developing.

If you're working with a classic web server, the default port is 80.

Step 4: The smartphone

Open the web browser on your smartphone, and enter the following address in the search bar "http://[MACHINE_IP]:[APPLICATION_PORT]

And surprise! Your application running locally on your PC is actually accessible to devices that are connected to the same network!