Truly Responsive Web-development: Access localhost on a Mobile Device
Don’t live in a simulation
I know, I know… your web app looks ✨ pixel perfect ✨ when you test mobile responsiveness with the device simulator in Chrome DevTools (which — don’t get me wrong — is awesome), but even Google’s docs call Device Mode an “approximation” of how your app will render on a phone or tablet. And trust me… (if you only take away one thing from this article, please let it be this) there will be inconsistencies between your web app running on your development machine and other machines. This is why we do cross-browser testing — because (we hope) the same environment (i.e. browser) on different machines will render our app consistently. But when the environment is not available on your dev machine (e.g. a mobile browser), testing your app on a simulator is not enough.
How important is device testing?
Can I Use is an amazing developer resource (which I hope you… can use) and they have a great browser usage table that you should keep up-to-date with. As of this writing, Chrome for Android and iOS Safari (two mobile browsers that I would guess you do not run on your dev machine) account for approximately 50% total browser usage. So… we can assume there’s a non-zero chance that our web app has users that consume our app via a…
