Microsoft Visual Studio is an integrated development environment (IDE) that you can use to edit, debug, build, and publish your web applications. It is a feature-rich program that can be used for many aspects of your web development. Over and above the standard editor and debugger that most IDEs provide, Visual Studio includes compilers, code completion tools, graphical designers, and many more features to ease your development process. Head to this page to download Visual Studio if you aren't using it yet.
Launch Microsoft Edge
Create a new ASP.NET Core web application
Open Visual Studio 2019 and select Create a new project. On the next screen, select ASP.NET Core Web Application and click Next.
Create a new ASP.NET Core Web Application
Provide a Project name for your new project and click Create. For the purposes of this example, select React.js as the template which shows you how to integrate React.js with an ASP.NET Core application and click Create.
Launch Microsoft Edge from Visual Studio
The dropdown next to the green Play button and IIS Express
Select Script Debugging and click Enabled.
Enable script debugging in Visual Studio
In the same dropdown, select Web Browser and click the preview channel of Microsoft Edge that you want Visual Studio to launch: Microsoft Edge Canary, Dev, or Beta. If you haven't already, head to this page to install the Microsoft Edge preview channels.
Select the preview channel of Microsoft Edge that you want Visual Studio to launch
If you select Microsoft Edge (EdgeHTML), Visual Studio will launch that instead of Microsoft Edge (Chromium). Install the preview channels of Microsoft Edge and select them or ensure that the version of Microsoft Edge installed on your machine is Microsoft Edge (Chromium) and not Microsoft Edge (EdgeHTML).
Now that Visual Studio is correctly configured, click the green Play button. Visual Studio will build your application, start the web server, launch Microsoft Edge, and navigate to
https://localhost:44362/ or whatever port is specified in launchSettings.json.
Microsoft Edge launched from Visual Studio
Switch back to Visual Studio. In Counter.js, set a breakpoint on Line 13 by clicking in the gutter next to that line.
Setting a breakpoint in Visual Studio by clicking on the gutter next to Line 13 in Counter.js
Now switch back to the instance of Microsoft Edge that Visual Studio launched. Click on Counter in the NavMenu on the left of the page. Now click Increment.
The Counter page in our ASP.NET Core web application
This example was just a minor demonstration of the functionality available in Visual Studio. Learn more about all the things you can do in Visual Studio 2019 by reading their documentation.
Attach to Microsoft Edge
In the previous workflow, Visual Studio launches Microsoft Edge. With this workflow, you will be able to attach the Visual Studio debugger to an already running instance of Microsoft Edge.
First, ensure that there are no running instances of Microsoft Edge. Now, from your terminal, run the following command:
start msedge –remote-debugging-port=9222
From Visual Studio, open the Debug menu and select Attach to Process or press
Selecting Attach to Process in Visual Studio
From the Attach to Process dialog, set Connection type to Chrome devtools protocol websocket (no authentication). In the Connecting target textbox, type in
http://localhost:9222/ and press
Enter. You should see the list of open tabs you have in Microsoft Edge listed out in the Attach to Process dialog.
Configuring the Attach to Process dialog in Visual Studio
console.log() statements directly in the Debug Output window in Visual Studio.
Getting in touch with the Microsoft Visual Studio team
The Feedback icon in Visual Studio