Using ngrok to test web apps on mobile while developing

categories: [ Just Coding ] tags: [ Mobile ] [ Visual Studio ]
created: 18 May 2017 @ 05:16 modified: 18 May 2017 @ 05:43

I often never really test on mobile properly because most sites are responsive so it's easier to just resize your browser and test like that. This works great until you trying to get the perfect mobile experience and looking at every element like how drop lists present themselves with different content taking into account how wrapping might happen in mobile browser controls (which is different from web browser, even in chrome Smile). A long time ago I briefly used ngrok just to test how it works and now I use it constantly for testing apps while they are still in development.

Why use ngrok?

Lots of developers might ask why use ngrok and not something like the  some of the debug functionality that Android provides for chrome which is a lot more powerful. To that I would say that I didn't need to debug anything Smile with tongue out, I just want to look how it looks on the device with the device specific controls. Also that solution would work fine for chrome on Android, what about other browsers on other phones like windows phone or even blackberry? Now that solution might work for all devices but figuring that out and connecting the devices to the pc would take time and effort.

Using ngrok is simply and easy so why not save time?

Installing ngrok

Installing ngrok is really simple. If you have Chocolatey installed you can simple type the below into a cmd window.

and by the nature of Chocolatey you will now have ngrok installed Smile.

Alternatively you can go to the ngrok website and download it from there

image

You can test if it's installed correctly why typing ngrok into a cmd window, you should see a list of available commands come up.

Using ngrok

This is where the really easy part comes in Open-mouthed smile. I created a new .net core project and hit run and it's running on port 32705 locally on my machine

image

By opening the cmd console typing the below command in

This will go ahead and create a tunnel for you to your local port which is exposed on the internet Smile

image

Not the forwarding urls, we get a http and https link by default. Browsing to this link from your mobile phone and you should notice all the requests showing up in the console

image

You can also navigate to http://localhost:4040/ and get similar information

image

As you can see this page has more functionality than just streaming requests, you can also dig into headers and replay requests from this page.

Conclusion

Everything these days runs on mobile and users rely heavily on their mobile phones so why not take that little extra time testing your apps on mobile especially because it's so easy.