Debugging

Don’t Launch a Browser Running ASP.NET Core Back-end Created from Web Template Studio

/ .NET Core, ASP.NET Core, Tool Spotlight / , , , ,

In last week’s post, I mentioned off-hand that we could stop VSCode from launching a web browser when starting a debug session on the back-end of our application. This is going to be a quick post on how to stop that browser launch.  The following are the previous Web Template Studio related posts if you want to catch up.

Create an Application with Web Template Studio
Debug ASP.NET Core Back-end Created from Web Template Studio

 

Launch Configurations

If you recall from last week to run our back-end we used the debug tab in VSCode and then hit the Run button for the .NET Core Launch (web) configuration.

The options that are available for running in VSCode are controlled by a launch.json file found in the .vscode directory. The following screenshot is the launch.json for the sample project from last week.

Stop the Browser

To stop the browser from opening delete the serverReadyAction section in the specific configuration you are dealing with. From the sample in the screenshot above the following is what would be removed from the  .NET Core Launch (web) configuration.

// Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
"serverReadyAction": {
    "action": "openExternally",
    "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
},

With the above removed hitting the run button for this configuration will no longer launch a browser, but the rest of the debugging experience will remain as it was before.

Wrapping Up

Hopefully, this will help remove a little annoyance in the development. For more details on the serverReadyAction check out the docs. I also recommend checking out the full docs for launch.json to get a good feel of what all is possible.

Don’t Launch a Browser Running ASP.NET Core Back-end Created from Web Template Studio Read More »

Debug ASP.NET Core Back-end Created from Web Template Studio

/ .NET Core, ASP.NET Core, Tool Spotlight / , , , ,

Last week we covered how to Create an Application with Web Template Studio and now that we have an application we are going to work through how to debug the ASP.NET Core back-end.

Sample Application

The sample application used in this post has been expanded from what we used last week to include two instances of each page type provided by Web Template Studio. The gird, list, and master/detail page types trigger controllers to be added to our back-end application which will give us something to work with. To add these extra page types you have to run through the full wizard in Web Template Studio and not use the create project button on the first page of the wizard. The following is a screenshot of the new sample application with the extra page types.

Debugging in VSCode

Our goal in this post is going to be to hit a breakpoint in the controller action that returns the data for the gird page in the screenshot above. Looking through the project under server/Controllers it looks pretty likely that we are interested in the GridController. This controller only has one action so click to the left of the line number for the line that has the return statement for the Get function.

Unlike the post from last week to debug the back-end we need to run it separate from the front-end which means we need to move away from using npm start to run the whole application. Use the following command to start just the front-end.

npm start-frontend

Now to run the back-end goto the Run section in VSCode and then click the Play button to run the back-end using the .NET Core Launch (web) profile.

This will launch a blank page which we don’t need and it can be closed. If the blank page bothers you too much it can be changed in the launch profile. Now that our back-end is running use the front-end to navigate to the Grid page.

Wrapping Up

Hopefully, with the above steps, you are ready to debug the back-end part of your application. I’m betting for most of us running the front-end and back-end separately is going to more closely match how we normally work. For more information on debugging in VSCode check out the official doc.

Debug ASP.NET Core Back-end Created from Web Template Studio Read More »

Setting Up Visual Studio Code for Debugging ASP.NET Core

/ Angular 2, ASP.NET Core, General / , , , ,

Visual Studio Code is a cross-platform source code editor from Microsoft. Out of the box, Code’s language support includes JavaScript, TypeScript, and Node. Using Codes extension system support is available for almost any language you want to use including C#, F#, Elixir, SQL, Swift, and Java. As of this writing, there are 734 language extensions available.

I have been using VS Code since it was first released after Build in 2015, but I have only been using it as an editor never taking advantage of the Debugging capabilities it has available. In this post, I am going to walk through everything that is needed to get a new ASP.NET Core with an Angular front end to run via VS Code’s debugger.

Test application

The first thing I did was to create a new application using JavaScriptServices specifically for this post. For instructions on how to use JavaScriptServices to generate an application check out this post.

On Windows, after the application has been generated and you are in the application directory you can use the following command to open the directory in VS Code.

code .

I am sure there is something similar on Linux and Mac, but I don’t have the environments to try on.

VS Code Overview

When VS Code opens you will see a view close to the following.

The icons down the left side of the screen are for Explorer (shows currently open directory and files), Seach, Source Control (git support is built in), Debug, and Extensions.

Debug

The Debug tab will be our focus so click on it which will take you to the following view.

Using the gear with red circle select .NET Core as the environment for the project.

If you don’t see .NET Core listed click More… and click install for the C# option.

After selecting an environment VS Code will add a launch.json file to the project. This file defines what happens when the start button is clicked in the debugger. At this point clicking the start button to run the application using the debugger will result in an error that Could not find the preLaunchTask ‘build’.

Next, click the Configure Task Runner option and select .NET Core.

This will add a task.json file with a build command that the launch.json is looking for. At this point, I had to restart VS Code to get it to properly pick up the new files. This seems to be an issue that will be fixed with the next release of VS Code and can be tracked using this issue.

After restart and trying to run the debugger again I ran into the error Run ‘Debug: Download .NET Core Debugger’ in the Command Palette or open a .NET project directory to download the .NET Core Debugger.

I ended up having to uninstall and reinstall the C# extension and then opening a C# file to get the debugger to download. If you are having this problem make sure and open a C# file before going as far as reinstalling the C# extension.

Hitting run in the debugger now give the error launch: launch.json must be configured. Change ‘program’ to the path to the executable file that you would like to debug.

To fix this issue click Open launch.json and you will find two places with the following.

"program": "${workspaceRoot}/bin/Debug/<target-framework>/<project-name.dll>"

Change both places to point to the dll your application builds. In the case of my project named DebugTest the final version ended up being the following.

"program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/DebugTest.dll"

Wrapping up

Debugging now works! Based on this post it would seem like debugging in VS Code is a big pain, but really after you get it set up once it just works. For new projects, you just have to let it add the

For new projects, you just have to let it add the launch.json and tasks.json and then set the path to your project’s assembly in launch.json. After that, you are ready to go.

I wait too long to figure this process out. I hope this helps you get started with debugging in VS Code.

Setting Up Visual Studio Code for Debugging ASP.NET Core Read More »