Using ngrok to debug your API’s from your Xamarin Forms App

Sometimes, you want to see what is going on when your nice shiny new App is supposed to connect to your awesome API and get some data from it/to it. Unfortunately – your App will (mostly) not connect to your API when it’s running on localhost. Android provides a nice little get around by using the DNS – but this isn’t much use from an iOS device. And I find I really prefer to test from my development phones, rather than an emulator.

Recently I came across an amazing tool to help me out with this – ngrok. This creates an externally accessible URL poiting to your localhost. Even better – there is a Visual Studio extension that will start a tunnel for each application within your solution.

Getting Started

These instructions assume you are on a Windows machine, but the process is very similar for Linux and OSX – you can checkout the official instructions here.

Create an account with ngrok and download it. Unzip to wherever you want the executable to live. Log in to your ngrok account, navigate to ‘Your Authtoken’ and copy the provided token. Open your command line at the ngrok folder you have unzipped and enter ngrok authtoken <your token>.

Download and install the Visual Studio extension (unfortunately this is only available for Visual Studio on Windows). The easiest way is to go to Extensions > Manage Extensions, type ‘ngrok’ into the search and select the Ngrok Extensions. You will need to restart Visual Studio in order for the extension to be installed.

Ngrok Extension package in Visual Studio
Manage Extensions advising you need to restart Visual Studio to complete the installation

Once Visual Studio is re-opened, go to Tools > Options and scroll down to the ngrok entry. Set the exectuable path to where your ngrok.exe is located.

Now open the API in Visual Studio and press F5 to debug. The API should open displaying the localhost URL:-

The localhost api

Back in Visual Studio, click on Tools > Start ngrok Tunnel.

Go to Tools > Start ngrok Tunnel to start it from Visual Studio

A command line window will open and show the tunnels created – one for http and https.

The ngrok command line showing the created api urls
You can check your api is accessible with this URL:-
The ngrok url accessing your localhost api

Now you can use the ngrok API URL in your app and it will hit your localhost API running in debug on Visual Studio, allowing you place breakpoints and step through as needed.


There is a bit of setup needed for this process, but it doesn’t take long and once it’s done you have a nice easy way to debug your App connecting to your API whenever you need it. For anyone who is concerned about the need to create an account with ngrok, I’ve had my account for several months and have had no unwanted emails.

Honestly, I wish I’d known about this a lot sooner!

I hope this is useful to some of you 😀


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s