Introduction 

In this article we will explore the new feature of Microsoft Visual Studio 2022 which allows you to test your Web Application on other PC, Mobile or Tablets while you are debugging your project. This feature is called Dev Tunnels.

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels


 

What Is Dev Tunnels?

The dev tunnels feature of Visual Studio 2022 enables ad-hoc connections between machines that can't directly connect to each other. A URL is created that allows any device with an internet connection to communicate to an ASP.NET Core project while it runs on localhost.

 

Make an app temporarily available to others over the internet, for a presentation or to invite others to review your work on a web app or API.


 

Prerequisites

  • Visual Studio 2022 version 17.5 or later with the ASP.NET and web development workload installed. 
  • The feature isn't available in Visual Studio for Mac.
  • You need to sign into your visual studio with GitHub or your outlook account to access this feature.

 

Enable Dev Tunnels

  • Open Visual Studio and Click On the Tool menu.
  • From the Tool, Menu clicks on Options.

  • Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels

  • From the Environment tab select Preview Feature.
  • Check Enable Dev Tunnels for Web Application and then Click on the Ok button.

  • Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels

Create a new ASP.Net Core MVC Project

  • Click on File Menu> New > Project 

  • Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels

  • Search for ASP.Net Core MVC and click on Next

  • Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels

  • Gave project name and location where you want to save your project and click on the next button

  • Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels

  • Select the framework as per your need and click on Create button.

  • Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels

  • Now your project has been created, run the application and check there is no error. As you can see in the below image my project is running on the localhost URL.

  • Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels

 

Create Dev Tunnel

Step 1

Click on the arrow icon beside the run button on top of your visual studio. Then Dev Tunnels and then Create a Tunnel.

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels


Step 2

In this wizard, you need to enter the below details. 

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels


Sign into Visual Studio with your GitHub or Outlook account and then select your GitHub or Outlook account.

  • Enter a name for the tunnel. This name identifies the tunnel in the Visual Studio UI.
  • Choose the tunnel type, Persistent or Temporary:
    • temporary tunnel gets a new URL each time Visual Studio is started.
    • persistent tunnel gets the same URL each time Visual Studio is started.  
  • Choose the authentication that is required for access to the tunnel. The following options are available:
    • Private: The tunnel is accessible only to the account that created it.
    • Organization: The tunnel is accessible to accounts in the same organization as the one that created it. If this option is selected for a personal Microsoft account (MSA), the effect is the same as selecting Private. Organization support for GitHub accounts isn't supported.
    • Public: No authentication required. Choose this option only if it's safe to make the web app or API accessible to anyone on the internet.

Step 3

Select OK. Now you will get a confirmation message as shown below image.

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels


 

Run Project with Dev Tunnel

To run your Web App Or Web API click on the arrow icon near Run button then Dev Tunnel and select your created Dev Tunnel if not selected.

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels


Now click on Run Button.

When you run it first it will show a confirmation message as shown in the below image. Click on the Continue Button.

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels


Now you can see that your project is running on a live URL.

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels



You can share this URL with anyone and they can also run and test this project. Here I’m generating a QR code from chrome to check this project on my mobile.

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels


Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels




If you make changes to your project other users also get updated changes in their browsers.

Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels


Debug Dot Net Core Project in Mobile Or Tablet using Dev Tunnels





Note: This live URL  only works till you are running this project in visual studio. If you stop debugging from your Visual Studio this URL will not work.