How to Test your LocalHost on an iPhone
I had a bug that was only appearing on old iPhones. This made testing really difficult because I couldn’t re-create the issue on my laptop’s localhost. I needed a way to test my localhost on an old iPhone 5. But as amazing as the Google machine can be for answering questions, sometimes the content just isn’t there. After a lot of troubleshooting and asking friends for help, I finally got my localhost to appear on my phone. This article goes through the steps that I took and the problems I encountered along the way.
Step 1: Plug the iPhone into your MacBook.
Step 2: Connect the iPhone to the same Wi-Fi network that your laptop is on.
Step 3: Open Safari on the iPhone. In the search bar, type your computer’s IP address and the port that you’re running on (example: http://10.1.2.345:3002).
Tip: Find your computer’s IP address under settings>network>wifi.
Step 4: Open Safari on your computer to view the inspector by selecting “Develop” in the top menu bar. Select the iPhone that is connected to the laptop. (Tip: You may need to enable the develop menu in safari>preferences>advanced.)
Step 5: If it doesn’t work right away, which it probably won’t, you may have some security settings blocking you from viewing on your iPhone. There are a few things it could be:
- On the iPhone, open settings>safari>advanced and make sure the “web inspector” is switched on.
- In the text editor on your laptop, open the makefile for your API server and find the setting called “HOST_CORS_ALLOWED_ORIGINS”, add http://[your-ip-address]:[your-post-number].
- If it still isn’t working, there may be other files in your app that need to be allowed permission to access your IP. For example, the API URL in my .env.developement file needed to be updated to REACT_APP_API_URL=http://10.1.2.345:4000. Keep in mind that security blocks will probably be centered around your servers so play around in there if you continue to experience problems.
I am by no means an expert in this and I’m sure this is just one method of many. But this worked for me so with any luck at all, it’ll work for you as well. Happy debugging!!