Getting started with Visual Studio 2022 Dev Tunnels

Visual Studio Dev Tunnels are available from VS 2022 v17.6 and allow us to expose and debug our localhost APIs using remote URLs.

When integrating with third-party services that use webhooks or callbacks to notify our apps of events, a publicly accessible URL is often required. Previously, this meant deploying to Azure App Service or another hosting platform just to test if our callback processing worked.

With Visual Studio, we can now create a Dev Tunnel which is remote URL that maps directly to a running localhost instance. This allows us to configure the third-party webhook with the tunnel URL and hit localhost breakpoints when the webhook is triggered which significantly improves the local development experience.

Download a sample app

Use your own app if you like but I’ll be using a very simple project on GitHub to help show some Dev Tunnel related ideas this post.

The project contains:

Creating a Visual Studio Dev Tunnel

Open the app and we’ll create a new tunnel from the View → Other Windows → Dev Tunnels screen as shown below.

I like Persistent tunnels as the URL will stay the same across Visual Studio restarts meaning we’d only have to configure it once if hitting it from Postman or .http files.

Note from Microsoft:

Persistent doesn’t mean the tunnel works when Visual Studio isn’t open. A tunnel URL connects to the local machine only if the ASP.NET Core project that the tunnel URL connects to is running in Visual Studio.

Please read up on the security implications of the different settings.

After creating the Dev Tunnel we should see it listed on the Dev Tunnels window:

Run the sample application

Because I’ve amended the launchSettings.json file to launch our browser and go to a specific endpoint as per below ….


… when we run the app our browser will attempt to load the isdevtunnel endpoint on the Dev Tunnel host.

Note the host address, this is our Dev Tunnel URL.

The first time we access a particular tunnel it will present us with a dialog similar to below which we can click Continue on.


If we don’t want Visual Studio to automatically launch our browser when we run the app, we can also view the Dev Tunnel URL from the Output → Dev Tunnels window:

After clicking Continue above and all going well we should see the following output:


We can also set breakpoints and issue the request again to confirm they are being hit when the request comes from a Dev Tunnel.

The endpoint itself is simple and just outputs whether it is being hit from the context of a Dev Tunnel or not. This is possible as even though the host will always remain as localhost, a request into an endpoint originating from a Dev Tunnel will have the X-Forwarded-Host header set.

Hitting the endpoint from a .http file

Also included in the sample project is a .http file.

.http files are great because they are simple, flat files that can be easily checked into source control and allow us to send HTTP requests directly from within Visual Studio.

Here’s what the response looks like when I hit the endpoint via localhost:

And here’s what it looks like when I hit the endpoint via the Dev Tunnel:

Monitor all traffic to a Visual Studio Dev Tunnel in real-time

Note, there is also a Developer Tools like experience for monitoring all incoming traffic into a Dev Tunnel. We can get to it by clicking on View in the Tunnel URL column on the Dev Tunnel page (when the app is running) and then clicking Inspect:


Visual Studio will then open a page similar to below:


In the above case, I’ve sent three successful requests to the Dev Tunnel isdevtunnel endpoint and one request to the Dev Tunnel root address which returned 404 as there is no endpoint configured for that address.

Monitoring traffic to a Dev Tunnel is invaluable, especially in complex scenarios involving multiple components. While breakpoints capture only a single request at a time, real-time traffic monitoring offers a comprehensive view of interactions across systems and helps us identify issues that might otherwise go unnoticed.

Summary

Dev Tunnels make testing integration with third party webhooks so easy.
Let me know if you have any questions on the post.

Note – Dev Tunnel URLs are not recycled when deleted, thus I didn’t obscure the URLs in the screenshots above.

Leave a Reply

Your email address will not be published. Required fields are marked *