Testing localhost on mobile

Tiffany Bouchard — Mon, 01 Mar 2021 17:51:11 +0000

Sometimes I find that Google Dev Tools aren't always accurate when testing for mobile and responsivity and I end up realizing certain UI bugs only after deploying. To save time, I wanted a way to test my localhost directly on mobile devices.

Note: I've only used this with Django and Apple devices - so just bear this in mind, but I want to try with React etc. and will update the post when I do

Before you start, ensure your computer and your device you want to test on (mobile, iPad etc.) are connected to the same network

1) Navigate to System Preferences -> Sharing
2) Check the Internet Sharing checkbox (Confirm by clicking Start in the pop-up)
3) At the top under Computer Name, you should see "Computers on your local network can access your computer at: Your-Computer-Name-Here" (In my case it is Tiffanys-Macbook-Air.local)
4) Now if I want to access localhost:8001 for example, I would type Tiffanys-Macbook-Air.local:8001 into my mobile browser

5) Sometimes you need an extra step, and in the case of Django, you need to do some binding before 4). You need to explicitly run your server on that port.

So in my case instead of starting my Django server like this: python manage.py runserver localhost:8001

I would do this:
python manage.py runserver Tiffanys-Macbook-Air.local:8001

If anyone has any tips, feedback, or experience with this approach I'm really interested so feel free to drop a comment!

DEV Community: Tiffany Bouchard

Testing localhost on mobile