[Feature]: WebView2 JavaScript Debugging in Visual Studio with Hot Reload - Everywhere

[softworkz]

trafficstars

Describe the feature/enhancement you need

With projects from the AspNetCore area, it is already possible to achieve a fully integrated and seamless development workflow, which is not even specific to WebView2 but also works with regular Chrome and Edge. It allows you to step through code across the borders: You step through while debugging and at one time you are in C# code and the next step brings you to a JavaScript file - all inside Visual Studio. This is driven or enabled by BrowserLink which connects both worlds together, maps files from the IDE to the browser environment restarts everything when needed and live-updates CSS styles when you make changes to these files in Visual Studio.

Getting this working for all projects with WebView2, rather than for ASP..Net only would be an amazing capability.

The scenario/use case where you would use this feature

When developing applications with WebView2, it is often required to debug both: your native application code and JavaScript code which is running inside the webview. For JS, you need to use Edge DevTools, then there's VS for debugging host code and then there's the view itself (in the application), which makes you end-up having three ((often large) windows/applications between which you need to switch back-and-forth all the time and of course, it's always the one you need most, that is covered by another window. Also, the debugging and editing experience is quite different between VS and Edge DevTools. It doesn't take long to get used to one or the other, but frequent switching is inconvenient.

Features like Edit-and-Continue and Hot-Reload are increasing productivity massively as it allows to avoid a significant part of the countless stop-edit-recompile-relaunch sequences through which one needs to go during development. When a large part of your implementations is on the JavaScript side, though, then you are off and don't benefit from those. I've often been in a situation where I needed to make changes on both sides where I could apply all of them at the C# side, but I still needed to restart due to JS changes.

At one time I had a perfect setup with BrowserLink and JS debugging in VS where I even had that "kind of" edit-and-continue that is sometimes working in Chrome: it doesn't exactly continue at the same place but it jumps back a few stackframes and continues from there - which is still great. (unfortunately it stopped working at some time)

Being able to work like that would make a fundamental difference for me.

How important is this request to you?

Impactful. My app's user experience would be significantly compromised without it.

Suggested implementation

What should make this Feature Request an attractive candidate is the high ratio between win and effort, which is because large parts of what's needed are already there. The hard work has been done already and all it takes is to adapt and extend and to re-connect some dots in different ways.

BrowserLink - which handles the interaction between host and browser - is getting injected into pages served by Asp.Net automatically and it does it's job in a rather silent way. It tries to do everything automatically (like correlating content in the browser to files on the server) and often fails when things aren't exactly set up like a default Asp.Net project. So that way wouldn't be suitable for something which is supposed to work on any kind of project with WebView2. Either it would need to be made configurable for the things it needs to know - or probably it would be even better to have it as an object in the application. This would also allow it to have some extension points for customizing the behavior in different setups and maybe provide some events for coordinating reload with the application.

Since there is no Asp.Net server it would need a different means for communication with the webview inner and injecting the initial code, but I think there are sufficient ways how it can be done.

For the JS debugger, it would be great when it could be improved in handling edit-and-continue (Hot Reload) and setting runtime variables in break mode.

But most import of all: That it just works..

AB#48455156