Microsoft Edge Developers Tools for Visual Studio (PREVIEW)

A Visual Studio extension that allows you to preview your ASP.NET, and ASP.NET Core projects, inside of Visual Studio. In addition to seeing a preview of your web app, you can use the Edge Developer Tools Elements tool to modify CSS. Modifications will automatically be applied to your source files.

Demos

Here are a few demos to show some of the functionality that this extension provides.

Web app preview & CSS integration

Here is a quick animation showing an ASP.NET Core project. When you load an ASP.NET Core view, you get a new Preview button in the bottom left hand side of the editor. When you click on Preview, your app is built and the page will be rendered in the tool window.

When working in the Preview, you can open the Edge Developer Tools with the toolbar in the Preview window. You can edit the CSS in the Elements tool. Changes made in the Elements tool will be applied to source files automatically.

CSS Updates in the editor

As you make changes to CSS files in the editor you can see those changes in the Preview window. In the animated gif below, you’ll see an ASP.NET MVC project where we create a view using CSS grid. In this preview, you may need to save the file to see the updated CSS styles. We will continue working on this to ensure that CSS changes are automatically applied without needing to save the file.

Network Tools

In addition to the Elements Tool, you can also use the Network tool to see the web requests that are made. To see the network traffic, open the Network tools and refresh the page.

Getting Started

This extension requires Visual Studio 2022 17.1+. You can download Visual Studio at Visual Studio downloads. After installing the extension, the following options should be set in Tools -> Options.

Configure Web Live Preview as the default Web Forms Designer

In Tools->Options->Web Forms Designer, select Web Live Preview as the designer. It’s recommended to restart Visual Studio after modifying that setting.

To get the most from this preview, there are few additional options to ensure are enabled. In Tools->Options->Web Live Preview ensure that all options are set to True.

After configuring these settings, when editing an ASP.NET Core view you will see a Preview button on the bottom left. When working with ASP.NET views, you’ll see a Design and Split button. The features work for both the Design and Split view.

Giving Feedback

We are releasing these features as an early preview so that we can get feedback from the community. The best way to give feedback is directly inside of Visual Studio using Report a Problem. When reporting issues it’s best to check the checkbox to include Log files. These files contain information that is needed so that we can diagnose the issue.

Known Issues

No support for Blazor projects yet

This early preview does not yet support Blazor projects. Blazor project support will be coming soon.

ASP.NET Core console window

When working with ASP.NET Core apps, when you click the Preview button a new external console window

CSS changes require the file to be saved

When modifying CSS the updates will not be applied as you type, you will need to save the file for changes to be pushed to the preview window.

Scroll position reset after making CSS changes in the Edge Developer tools

When editing CSS via the Edge Developer Tools, if you modify sources for a CSS file that is currently open in the Visual Studio editor, the editor will scroll the file to the top when making CSS changes. We will address this in a future update.

Warning about line endings

If you make changes to a CSS file using the Edge Developer tools in Visual Studio, the next time you open that CSS file, you may receive a warning about inconsistent line endings.

Other Information

Data and Telemetry

The extension gets data and telemetry from Visual Studio that we use to improve the product. If you don't want to allow this, you can find the instructions how to turn off telemetry at Visual Studio Customer Experience Improvement Program.

Data Collection. The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft’s privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.