Setting Up Mobile Optimized Website Testing. Easily.

I recently looked at my website and was impressed with myself. I was pretty confident so decided to show it off to someone on-the-go. So, yeah, it was on my iPhone.

Well… that didn’t work out so well because I didn’t use an actual iPhone to see what it would look like. Every developer worth their pay knows that they should test their product in a staging environment as close to production as possible. So while the desktop and the mobile emulator versions of my site was well polished and clean; the production version on my iPhone was not.

Yikes! Was I embarrassed. I talked a big game and had to eat my foot. How can I make this not happen to me again? It’s very easy on most networks. For Unix based systems run ifconfig in your terminal, and on Windows based systems run ipconfig in a command or PowerShell prompt. Once you get the your internal IP address — usually something like 192.168.0.xx — you can visit it just like you would on your development machine but instead of localhost:3000 you’d visit 192.168.0.xx:3000.

Make changes to your code, refresh the page on your phone and watch it show up! If you’re using a dev server like create-react-app it’ll even refresh automatically like on your desktop. It’s that easy. This works on more than just your phone. You can try it out on other devices in your network to see how they render things too. Make sure that Windows machine is seeing the same thing your Mac is!

Now, please learn from my mistakes and make sure your stuff is truly mobile optimized before you show it off to someone.