Visual Studio for web development
Microsoft Visual Studio is an integrated development environment (IDE). Use it to edit, debug, build, and publish your web apps. Visual Studio is a feature-rich program that can be used for many aspects of your web development.
In addition to the standard editor and debugger that most IDEs provide, Visual Studio includes features to ease your development process, including:
- Compilers.
- Code completion tools.
- Graphical designers.
- And many more features.
If you aren't already using Visual Studio, go to Download Visual Studio to download it.
Currently, Visual Studio 2019 supports debugging JavaScript in Microsoft Edge for your ASP.NET Framework and ASP.NET Core apps. To use Visual Studio to debug Microsoft Edge, do the following steps.
Launch Microsoft Edge
Follow the steps in this section to use Visual Studio to do the following:
- Build your ASP.NET and ASP.NET Core app.
- Start a web server.
- Launch Microsoft Edge.
- Connect the Visual Studio debugger with a single button.
The simplified workflow allows you to debug JavaScript that runs in Microsoft Edge directly from your IDE.
Create a new ASP.NET Core web app
First, create a new ASP.NET Core web app, as follows:
Open Visual Studio 2019 and select Create a new project.
In the search box on the next screen, enter react.
Select ASP.NET Core with React.js from the list of templates and then Next.
This React.js template specifies how to integrate React.js with an ASP.NET Core app.
You've now created a project for an ASP.NET Core web app.
Launch Microsoft Edge from Visual Studio
Next, run and debug the ASP.NET Core web app project in Visual Studio, as follows:
Open
ClientApp/src/components/Counter.js
.Select the dropdown list next to the green Play button and IIS Express.
Select Script Debugging > Enabled.
In the same dropdown list, select Web Browser > the preview channel of Microsoft Edge that you want Visual Studio to launch, such as Microsoft Edge Canary, Dev, or Beta. If you aren't already using one of the Microsoft Edge preview channels, go to Download Microsoft Edge Insider Channels to download one.
Select the green Play button. Visual Studio builds your app, starts the web server, launches Microsoft Edge, and navigates to
https://localhost:44362/
or whatever port is specified inlaunchSettings.json
.
Continue with the steps below.
Debug JavaScript code that's running in Microsoft Edge
Switch back to Visual Studio to set a breakpoint.
In
Counter.js
, set a breakpoint on Line 13 by selecting the gutter next to the line.Switch back to the instance of Microsoft Edge that Visual Studio launched.
Select Counter in the navigation menu at the top of the webpage and then select Increment.
The JavaScript debugger in Visual Studio hits the breakpoint you set in
Counter.js
. Visual Studio now pauses the runtime of the JavaScript running in Microsoft Edge and you can step through the script line-by-line.
In the above approach, you launched Microsoft Edge from Visual Studio. Alternatively, you can an attach the Visual Studio debugger to an instance of Microsoft Edge that's already running, as described below.
The example was just a minor demonstration of the functionality available in Visual Studio. For more information about the functionality in Visual Studio 2019, see the Visual Studio documentation.
Attach Visual Studio debugger to a running instance of Microsoft Edge
To attach the Visual Studio debugger to an instance of Microsoft Edge that's already running:
Make sure that there are no running instances of Microsoft Edge.
From your command line, run the following command:
start msedge --remote-debugging-port=9222
In Visual Studio, select Debug > Attach to Process or Ctrl+Alt+P.
In the Attach to Process dialog, set Connection type to Chrome devtools protocol websocket (no authentication).
In the Connecting target text box, type
http://localhost:9222/
and then press Enter.Review the list of open tabs you have in Microsoft Edge listed out in the Available processes section.
Select the tab you want to debug from the list, and then select Attach.
In the Select Code Type dialog, select JavaScript (Microsoft Edge - Chromium) and select OK.
The Visual Studio debugger is now attached to Microsoft Edge. You can pause the running of JavaScript, set breakpoints, and view console.log()
statements directly in the Debug Output window in Visual Studio.
Edge DevTools extension for Visual Studio
Debug your ASP.NET projects in Visual Studio with the Edge Developer Tools. You can embed the Microsoft Edge Developer Tools in Microsoft Visual Studio to debug your ASP.NET projects live. Download the Microsoft Edge Developer Tools for Visual Studio.
To use the extension:
Make sure Visual Studio 2022 and the ASP.NET workload are installed.
Set up Web Live Preview as the default Web Forms Designer, as described in the above page.
Open an ASP.NET project.
Open a webpage of the project in the Design window.
In the upper left of the Design window, click the Open Edge DevTools (
) button:
Edge DevTools for Visual Studio opens, with the Elements tool selected:
The Network tool is also open by default:
The Inspect tool () and Toggle screencast (
) are available, and the More Tools (
) menu offers the Issues, Network conditions, and Network request blocking tools:
See also:
- Edge Developer Tools for Visual Studio, at Visual Studio DevBlogs.
Getting in touch with the Microsoft Visual Studio team
The Microsoft Visual Studio and Microsoft Edge teams wants to learn more about how you work with JavaScript in Visual Studio. To send your feedback, select the Send Feedback icon in Visual Studio, or tweet @VisualStudio and @EdgeDevTools.