Let's debug some C# code in a web browser with Visual Studio Online

Image for post
Image for post

This is Microsoft Ignite 2019 season and during this time around the year we get some nerdiest products out of Microsoft.

This time around one of my most dreamt products is out for public preview. This is Visual Studio IDE in the browser — Visual Studio Online. Yes, it’s a working Visual Studio Code IDE in your browser to run and debug your code from anywhere.

Disclaimer: You do not need to install .NET Core or Visual Studio Code in your local system to use Visual Studio Online. Needless to say, you just need a Modern browser. I used Chrome for this demo.

First, navigate to https://online.visualstudio.com and login using your Microsoft account.

Image for post
Image for post

Once you are logged in, you won’t see any environment by default. This needs an Active Azure Subscription as a pre-requisite. For pricing check this

Image for post
Image for post

To start configuring, hit Create Environment Button. This will open up a new pane for you to choose your environment specification. This includes your Git repo path, type of instance you are creating and some other optional settings.

In this example I have used my own GitHub git repo of a .NET Core MVC application written in C#. Since my app is a simple one, I chose Standard (Linux) instance.

Image for post
Image for post

Now that the basic configuration is done, hit the Create button. You will see your environment is getting created. Observe for the green Available button to appear.

Image for post
Image for post

Once you see the green Available button, your job is done. Now without further ado just hit name of the environment or the Available button to see the magic

Image for post
Image for post

At this stage you may not be able to believe in your eyes. The whole git repo is now loaded in Visual Studio Code inside a browser. I re-confirm it’s not your regular Visual Studio Code native client. It just opened your code in an IDE without installing anything on your system — Yes!!! it's a working instance of Visual Studio Code in your browser.

Image for post
Image for post

Now that your code is loaded in Visual Studio Online, let's see if it runs from there.

Open the terminal and use your favourite dotnet run command

Image for post
Image for post

If your code has no build error, you will see your web app will start running on https://localhost:<port>. But wait, remember that this localhost is not your device’s localhost.

Ctrl+ Click on the localhost link. It will generate its own url and will connect itself to the forwarded port.

Image for post
Image for post

Eventually it will redirect itself to your websites landing page.

Image for post
Image for post

You know what? what you just did? you just ran your first .NET Core Application from a Cloud IDE

Of-course, why not? That’s the whole point of Cloud Native Development experience.

Now to debug your C# code in Visual Studio Online you must install C# omnisharp extension.

Reload the browser tab once the extension is installed.

Image for post
Image for post

Click on the Bug icon in the left nav bar. Add a new debug configuration for .NET Core.

Image for post
Image for post

Add few breakpoints and click on debug button to Start Debugging.

Viola… you hit your first breakpoint on Visual Studio Online while debugging a C# Web App code without installing anything in your local system. You have now almost native debugging experience in a browser.

Image for post
Image for post

Note: At the time of writing this post step-over, step-into keyboard shortcuts weren’t working, I had to use the control panel to navigate the code through.

Debugging C# code in browser is one of my long-dreamt features. The moment it is made available for public preview I couldn’t resist myself to get a hands-on experience on it. This post is just to talk about how to do basic setup of Visual Studio Online and debug C# code in browser.

There are lot more to explore and I’m sure with the community feedback and support one day we can use it as a true mobile IDE from any mobile device browser.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store