Using ngrok to test web apps on mobile while developing

category: [ 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


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


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


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


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


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.


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.


Gordon Beeming works at Nologo Studios in the sunny city of Durban, South Africa. He is the Lead for the Data and Services Team and has a strong focus on Developer Efficiencies and R&D. When he's not hacking away at a keyboard in Visual Studio he'll generally be relaxing with his family or hitting the black top getting in some mileage. He is a Visual Studio ALM Ranger and Visual Studio ALM MVP.

Follow me on Strava


I plan on writing a bunch of online tools and sharing the code for how I made those tools. If you have any feedback you can ping me on Twitter (@GordonBeeming) or mail me [email protected].