Visual Studio 2022 ASP.NET Core 6 Default application 和 Add folder to workspace in Chrome DevTools 不再工作

Question

After some update to either Visual Studio (I have the same issue in both VS2019 and VS2022) or Chrome I can no longer update the CSS in DevTools and have it reflect and persist the changes to site.css file in my project. Instead when I try to change a CSS property I get the following in the DevTools console:

Unable to find a stylesheet to update. Updating all local css files.
15:54:01.800 aspnetcore-browser-refresh.js:82 

And the green dot disappears from my CSS pane immediately after I hit the up or down arrow on my keyboard to try and change the CSS value.

Why is that? It used to work not too long ago. I think it's been broken for me for half a year or so now.

I've been googling but haven't find any good resources. Or maybe I'm the only one coding directly in Chrome? :) Surely this can't be the case?

If anyone knows a workaround please share because I'm really frustrated atm:)

Answer 1

Disabling "Enable CSS Auto-Sync" seems to do the trick.

Update 1: The above no longer works for me for some reason. I managed to find another fix on SO: https://stackoverflow.com/a/70096917/687549

And here are some screenshots:

Update 2: Update 1 works when you only need to update the CSS directly in Chrome. It's better to have Hot Reload enabled and the set the following setting to None - then you'll get the best of both worlds (Hot Reload + Edit CSS directly in Chrome using workspaces): https://stackoverflow.com/a/68954979/687549

Update 3: I'm now using VSCode. If none of the above works try the following (block.js file in Network tab in Chrome DevTools): https://stackoverflow.com/a/68966524/687549