Debug Applications using Visual Studio Dev Tunnels

Introduction

It has happened to all of us that we have been working remotely within a team on a web application, and in the middle of coding, a problem has occurred that requires the help of our teammates. Or we have been developing a mobile application and needed to develop various web APIs for this application. After completing the development of web APIs and after publishing them on the server, we realize that the data sent from the mobile application to the web APIs caused an error. However, by checking the data being sent and web APIS codes, we cannot find the problem.

This is exactly where the Dev tunnel feature in Visual Studio comes to our aid and solves the problem.

What are Dev Tunnels in Visual Studio?

It provides a capability so that machines that cannot be directly connected to each other can be connected to each other. In fact, it provides an ad-hoc connection between machines. After configuring this feature, when running the application in Visual Studio, it can be run on addresses that other applications have access to instead of addresses such as localhost. In fact, before, without using Dev tunnels, your applications strat usually used addresses like https://localhost:7223, but while using Dev tunnels, your applications start using addresses like https://50tt58xr-7223.usw2.devtunnels.ms

Prerequisites

1. Visual Studio 2022 17.6 or newer (This feature is not available in Visual Studio for Mac)
2. ASP.NET and Web Development workload installed

How to Configure Dev Tunnels?

1. Select your web project, and from Debug dropdown, select Dev Tunnels > Create Tunnel.

2. In the Create a Tunnel window:

1. Select the account which is used to create a new tunnel. You need to provide your Microsoft or GitHub account.
2. Provide a name for the Tunnel. This name is used in Visual Studio only when selecting a tunnel.
3. Select the Tunnel Type. Tunnel type can be either Temporary or Persistent. Temporary Tunnel will generate a new Url each time you open the Visual Studio. On the other hand, Persistent Tunnel will reuse the same Url.
4. Select the Access type and level. Tunnels can have either Private, Organization, or Public access types. With the Private access type, the Tunnel is only available to the person who created it. With the Organization access type, the Tunnel will be available for the organization(s) the account is a member of. Finally, the Public access type does not require authentication, and the generated Url will be publicly available. Of course, the public access type should be used with caution.

After setting these properties, click on Ok to create the Tunnel. After clicking Ok, the create tunnel window will be closed. So wait until the "dev tunnel has been successfully created" message appears.

t

3. Now you have created the Tunnel and can start using it. Again navigate to the debug dropdown, and from Dev Tunnel, select the created new Tunnel and start using it. Your project can have multiple Dev tunnels, but only one of them can be active.

5. After selecting the active Dev tunnel, start debugging your application. When the Dev tunnel Url is ready, your browser will be opened with the Dev tunnel-specific Url. Microsoft will show you a message indicating that you are about to connect to the Dev tunnel.

You can click on Continue to navigate to your web application.

Great! This is almost everything you need to do to debug your application using Dev tunnels. For more information, you might need to take a look at Microsoft Documentation here.