Let's debug some C# code in a web browser with Visual Studio Online
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.
Getting started
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.
You need a cloud development environment — configure it first
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
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.
Now create the environment
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.
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
And… Launch
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.
Running the web app from the browser IDE
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
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.
Eventually it will redirect itself to your websites landing page.
You know what? what you just did? you just ran your first .NET Core Application from a Cloud IDE
Can we debug it in browser?
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.
One last step to get to debugging
Click on the Bug icon in the left nav bar. Add a new debug configuration for .NET Core.
Okay let's debug now
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.
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.
Conclusion
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.
