Access your localhost server on a mobile device

There are a couple of reasons why you would want to view your app running on a local server using a mobile phone. Here is how you can achieve that.

While there is a mobile view available in your laptop browser, there is only so much it can be used for when it comes to performance, speed, and factors connected to a mobile’s hardware specifications.

With a physical device, you get better observations with interactions leading to greater optimizations.

Connect your Mobile Device

Before we continue, you need to ensure that your local server is running. Then take the following steps:

• Connect your phone to your laptop using a USB.
  You may get a prompt on your phone to allow USB debugging.
  Check Always allow from this computer and select Ok.
• On your laptop, open a new tab and go to the browser inspect page
  For Chrome, go to chrome://inspect
  For Brave, go to brave://inspect
  For Firefox, go to about:debugging
• Click onPort forwarding…
  On the modal, enter the port number your local server is running and select the Enable port forwarding checkbox. Click on Done

Adding a port number and enabling port forwarding

When port forwarding is enabled, a yellow banner appears at the top of the page

There are multiple slots for port numbers, adding more means your mobile device will be able to access the apps running on those local servers

On your mobile device browser, open a new tab and go to the localhost URL (in my case, localhost:3333 ). You should see the app running!

Inspect app on mobile device using your laptop

A few perks viewing with your mobile device:

• Hot reloading — Making changes to your app and hot reloading would function the same on the mobile phone
• Web Dev Tools — You still get access to the browser’s web dev tools. You can use the web inspector, network, console and other available tabs
• Mobile View — You can get a better sense and feel of your app being used on a mobile phone. This can help you make better optimizations on it.

Thanks for sticking to the end of my article. If you’re trying to access the web dev tools for a webpage on your mobile phone, you can read up on it here. Feel free to drop and comments or questions.