Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I (re-)enable real-time CSS editing in Visual Studio?

In Visual Studio 2015:

  1. Create a new empty C# ASP.NET web application (Framework 4.6).
  2. Add WebForm1.aspx:

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="mycss.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div>Hello World</div>
    </body>
    </html>
    
  3. Add mycss.css:

    div { color: red; }
    
  4. Right-click on WebForm1.aspx and choose "Set As Start Page".

  5. Click the "Run" button with "Google Chrome" selected as the browser.
  6. Open mycss.css in Visual Studio and change red to blue.

Note that the moment you finish typing blue, the color in Chrome changes to blue. No saving in Visual Studio required, no reload in Chrome required. This feature is awesome!

Now do the same in Visual Studio 2017 (15.3.5). Nothing happens. I have to save the CSS file and reload the browser page to see the change.

How do I get that feature back? Is this some configuration option? Or a deliberately deprecated feature? Or a bug?

like image 486
Heinzi Avatar asked Oct 11 '17 15:10

Heinzi


People also ask

Can you edit CSS in Visual Studio Code?

CSS, SCSS, and Less support in Visual Studio Code CSS, SCSS and Less Visual Studio Code has built-in support for editing style sheets in CSS.css, SCSS.scss and Less.less. In addition, you can install an extension for greater functionality.

Does a CSS editor work in real time?

However, few CSS editors work in real time with the browser. Generally, changes made to the code must be made, saved, and then the browser must be refreshed. This isn’t a problem most of the time, but when you’re trying to debug your CSS or make changes to fine detail, the process can be quite cumbersome.

How to enable or re-enable web live preview in Visual Studio?

To enable or re-enable Web Live Preview, go to Tools -> Options -> Web Live Preview (Preview) and under the Web Live Preview category, set Enable to true. Then hit OK and restart Visual Studio.

Does chrome automatically detect changes to CSS files in Visual Studio?

Show activity on this post. Whenever my colleague makes changes to his .css files in his Visual Studio (2015) chrome automatically detects the change and updates the website styling, it looks very useful.


1 Answers

The feature you're looking for is called Browser Link and is part of Visual Studio. Make sure the feature is enabled and that "Enable CSS Auto-Sync" is turned on. See here for more info. This page relates to .Net Core, but should still be relevant for WebForms.

enter image description here

like image 71
DavidG Avatar answered Sep 30 '22 18:09

DavidG