Purpose

This is just a quick sort-of "mini-post" on some tools I just found that make web-dev for mobile a dream. These days I often develop demos and applications with mobile devices in mind. The old adage "The network is the computer!" is truer now than ever and my demos never know what they're gonna wake up and find themselves running on. So, just recently I came across some very cool tools to facilitate mobile testing and development and wanted to post a quick recipe on using them here. Sorry apple users, but this is specific to android, and in particular Samsung.

Setup For Mobile Development and Testing

The problem with mobile support and mobile-focused web development is how to test and debug on your device. Dev-Tools emulators are great and good enough to get you started but ultimately you want to test on your target devices. But when I actually sat down to do some testing I found the setup was not trivial and the procedure was like some arcane art. Here's how it goes

1. In order to do remote testing (i.e., use your desktop to test on your device) you have to enable Developer Options and USB Debugging on Your Phone. The problem is the way you do that is buried deep in an obscure setting and involves some deep knowledge:

   • Go to Settings > About phone
   • Find "Build number" and tap it seven times to enable Developer options
   • Go back to Settings and now you'll see Developer options
   • Enable USB debugging in the Developer options

2. Next connect Your Phone to Your Computer via USB. Look for "allow" prompts both on your computer and your phone.

3. Then Open Chrome on Your Computer. In the address bar, go to:

   chrome://inspect

   This will open the Remote Devices section.

4. Inspect Your Phone's Browser on your computer.

   • Under the Remote Devices section, you should see your phone's browser tabs listed.
   • Click on the inspect link associated with the URL you want to debug.
   • This will open a new window that mirrors the Chrome DevTools from your phone.

5. In the DevTools window, click on the Console tab to see any errors, warnings, or logs from your phone's browser.

You can now interact with the page on your phone and watch the log update in real-time.

Pro Tip: Use nGrok for HTTPS Testing.

Many WWW API's and interactions require secure contexts (i.e. requests must be issued over HTTPS). For dev types it is very hard and time consuming to stand up and maintain testing environment that enables secure HTTPS requests. That's where nGrok comes in. nGrok lets you set up a secure HTTPS proxy to expose your local server. I my case I mainly use it for testing when HTTPS headers are required. For example, I had to test camera access on my phone for my SVG Artworks Framework. Here's how to set it up.

Procedure

1. Install ngrok .

2. Run your server app (e.g., Vite)

   npm run dev

3. Start ngrok: Open a new terminal and run:

   ngrok http #### where #### is the PORT

4. Ensure your server allows requests from the proxy

Conclusion

Again, this was just meant as a quick post with a couple of recipes for mobile-centric dev that, for me, give a big bang for the buck. I hope folks that come across this post find it useful! Happy coding!