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!
Top comments (1)
Welcome to Dev :)
Macs have always had that option of "sharing your Internet" whereas in fact it means "start an Apache server, and serve files from your
~/Sitesfolder, on port 80"You shouldn't need to do the share step - all you need to know is your hostname (most Wifi routers register the hostname on their built-in DNS) and ensure the port you want to serve on is open (that's a topic for another post!) (most often, it is)
To get that info: Open a Terminal, or PowerShell, and run
hostname. You will be shown what name the laptop/workstation has been registered to the network as.In my mind, much easier :)