How to Quickly Test Your Blazor App on a Real Smartphone

Using Dev Tunnels to Access Your Development App from Your Phone via the Internet

Sometimes I want to test my Blazor application on my phone while developing it. Of course, if I just need to check the layout, I can use the device emulation feature in the developer tools in desktop browsers. However, there are times when testing on an actual device is faster. Additionally, I sometimes need to use browser APIs that are difficult to test without a physical device.

In such cases, if you are developing with Visual Studio on Windows, you can use a feature called "Dev Tunnels." With Dev Tunnels, you can temporarily relay and publish HTTP traffic from your Blazor application, running on localhost, to the Internet. Let me explain this more. When you run your app with Dev Tunnels through Visual Studio, a unique public URL is created on the Internet. When you open this URL in a browser on your smartphone (which has Internet access), HTTP requests to that Internet URL are relayed to your Blazor application running on localhost. It's like creating a tunnel from the Internet to localhost.

You'll need a GitHub or Microsoft account to use Dev Tunnels.

How to Use Dev Tunnels

Here are the steps to use Dev Tunnels.

Creating and Enabling a Dev Tunnel

First, start Visual Studio and open your Blazor application project.

Next, open the dropdown list next to the Debug Execution Tool button and select the [Dev Tunnels] item. If you have never used the Dev Tunnels feature before, you will see a screen like the one below, so please select [Create a Tunnel...] shown in the red circle below. If you have already created a Dev Tunnel before, the name of the existing Dev Tunnel should be listed here. In that case, you can click and select that existing Dev Tunnel name instead of creating a new one.

When you click [Create a Tunnel...], a dialog box will open to create a new tunnel. Here, you need to specify the following settings.

• Select the GitHub account or Microsoft account to use for creating the tunnel
• Specify the tunnel name so you can distinguish each tunnel in your Visual Studio work (In the example below, I specified "default" as the tunnel name)
• Select the expiration period of the tunnel URL (In the example below, I selected "Temporary", which creates a new URL each time you restart Visual Studio)
• Select whether to require authentication when accessing the published tunnel URL (In the example below, I selected "Private", which denies access without authentication)

After specifying all of these, click [OK].

Then, a message will appear showing that a new "Dev Tunnel" has been created and that this Dev Tunnel is now set to be used when running this Blazor application project.

Checking Dev Tunnel Active Status and Running the App

When you reopen the dropdown list next to the Debug Execution tool button in Visual Studio again, you can see that the Dev Tunnel "default" you just created is selected and active, as shown below.

In this state, press Ctrl + F5 or click the "Run without debugging" tool button to run this Blazor application. (Of course, you can also run it with debugging.)

After waiting a moment, the browser will launch and open the URL published to the Dev Tunnel. If you selected [Private] for [Access] when creating the Dev Tunnel, you will be prompted to authenticate with your GitHub account or Microsoft account, then complete the authentication as needed.

When accessing for the first time, a confirmation message will appear
asking whether you want to proceed. Of course, in this case, you know that this is access to the Dev Tunnel you created yourself. So click [Continue] to proceed.

Then, your Blazor application, which is under development and should be running on localhost, becomes accessible via a public URL on the Internet.

Accessing from Your Smartphone via the Internet

Now, all you need to do is open this Dev Tunnel public URL in your smartphone browser. That's it. Modern web browsers have a feature that allows you to share the URL of the page you are viewing as a QR code. You can use this feature to open it on your smartphone. (The screenshot below shows how to generate a QR code in the Microsoft Edge browser by right-clicking on the page and selecting it from the menu.)

Deactivating the Dev Tunnel

To stop running via the Dev Tunnel, reopen the dropdown list next to the Debug Execution tool button again and click [None] from the [Dev Tunnels] item.

Conclusion

Review and Precautions

As explained above, if you are using Visual Studio on Windows, you can make your Blazor application under development accessible via a URL on the Internet by using the Dev Tunnels feature. Since you can also access this Dev Tunnel URL from your smartphone, you can easily test your app. However, please be careful from a security perspective. This means you are allowing access and intrusion from the Internet to the program running in your local development environment. If you set the access to private when setting up the Dev Tunnel, you can protect it so that it can only be accessed with your GitHub account or Microsoft account. This provides a certain level of safety.

If You Are Not Using Visual Studio or Not on Windows

If you are not using Visual Studio, Visual Studio Code also has the same feature. It's called "Port forwarding." You can use that. Additionally, the Dev Tunnels feature itself is actually a service of Microsoft Azure, Microsoft's public cloud service. A CLI tool called "devtunnels" is provided for creating, activating, and managing Dev Tunnels. With the "devtunnels" CLI, you can use Dev Tunnels in any environment. Of course, it seems to be available not only on Windows but also on macOS and various Linux distributions.

Compared to Other Methods

Besides using Dev Tunnels or similar methods (like ngrok), you can also test your Blazor application on your smartphone by connecting your smartphone to the same LAN as your development PC, configuring the Blazor application to listen on a hostname or external IP address instead of localhost, adjusting the firewall settings of your development PC's OS, and so on. However, the steps I just wrote here are quite complicated, right?

In that regard, although you need to be careful when using it, if you know about the Dev Tunnels feature, testing your Blazor application on an actual device becomes much easier and more convenient. Let's use it well.