I’m always building web application products that need to be optimized for mobile. Viewing my project on a phone before deploying is a must.
I often use the mobile device emulator in Chrome Devtools for little style adjustments, but there’s nothing that will perfectly emulate an actual mobile browser better than the mobile device itself. This helps me catch mobile-specific bugs before they surface as a problem for users.
Here’s a method I use to make testing on mobile devices extremely easy. These instructions are for a Mac environment.
Serve over your wifi via local IP
This sounds complicated but its actually really easy.
IMPORTANT: Make sure that your dev computer and your mobile device are connected to the same wifi network.
Step 1: Serve to Localhost
On your dev machine, serve your application in whatever way you usually do that serves it over a localhost address.
Make sure to note what port number its being served on. In the image below, we’re noting 8080.
Once you are able to view your app locally on your computer via localhost, you can move to step 2.
Step 2: Find your Local IP Address
Open System Preferences > Network. Select “Wifi” in the left pane if it isn’t already selected.
Under “Status: Connected”, you should see “Wi-Fi is connected to and has the IP address .”
Take note of that IP address!
Note: It’s common for your Local IP Address to change automatically when your device or other devices connect/disconnect from the network. So you can’t really bookmark this address. Instead, you’ll have to find your address each time — for me, this is usually just when I get started each morning and it stays throughout the day.
Step 3: View on your phone
On your mobile device’s browser (any will work), navigate to http://:.
For example, if I was serving on localhost:8080 and my local IP address is 123.45.67.890, on my mobile device’s browser I would navigate to http://123.45.67.890:8080 . The http:// is important, don’t leave it off.
Success!
You should now be viewing your app on your mobile device. Set it up right next to your main monitor, because it will reload every time your localhost reloads, so it will be perfectly in sync with the locally served desktop web application.
You don’t get any front-end devtools with this experience, but you do get an early warning if things look or behave differently on a native browser’s experience.
Top comments (0)