‘Live Reload’ and more – Visual Studio Magazine


News

Beyond Hot Reloading: “Live Reloading” and More

What is beyond hot reloading?

A recent online summit presented by Visual Studio Magazine provides a clue.

Hot Reload may have been slow to arrive in the .NET development ecosystem, but Microsoft’s “Hot Reload Anywhere” push was welcomed by many developers, even if it was only catching up with what was. already available in other development tools and frameworks.

While it’s nice not to have to restart an ongoing project to see the code changes reflected, there are even better things going on as the developer world moves towards more client-side work, the said. consultant Peter Vogel at the recent “What’s New in Enterprise .NET Development” summit, now available for on-demand viewing.

Vogel, director of PH&V Information Services near Toronto, was talking about the “.NET 6 Development Landscape for 2022” when he outlined the future, starting with more client-side development, which is the trend in the industry. sector.

Improving the hot reload functionality will inevitably lead to more client-side development being done, he said, and much of that will actually be done in the browser. You’ll do the initial work in Visual Studio, VS Code, or whatever, but when it comes to debugging, you’ll fix things in the browser itself.

“So you’re going to see more debugging integration. You will see more hot reloading. ”

Peter Vogel, Director, PH&V Information Services

“So you’re going to see more debugging integration,” Vogel said. “You’re going to see more of Hot Reload. The ultimate – and I think we’ll be here by the end of the year, if we haven’t already – the ultimate will be when you do client-side development, and you say, ‘oh, that’s not fair.’ You will press F 12 to open your developer window. You will go to the HTML and in the developer window, you will change the HTML code. You will then navigate to your JavaScript files – still in your browser – you will make changes made to your JavaScript file. Then you’re going to run your page again, and now it’s working fine and now you’re going to click the Save button and that will save your changes to your project. ”

One of the ways some of this magic comes to fruition is increased integration between VS Code and Microsoft Edge DevTools through the Microsoft Edge Tools for VS Code expansion, with more than 290,000 installations.

screenshot showing successful installation of Microsoft Edge DevTools
[Click on image for larger view.] Microsoft Edge Developer Tools

“Bring up the Browser’s Elements and Network tool in the Visual Studio code editor and use it to troubleshoot CSS issues with your site and inspect network activity,” the description reads. “A Visual Studio Code extension that allows you to use the Elements and Network browser tool from within the editor. DevTools will connect to an instance of Microsoft Edge giving you the ability to see the runtime HTML structure, change the layout, troubleshoot styling issues, read console messages, and view network queries. All without leaving Visual Studio Code. ”

In practice, however, there is work to be done, as this reporter found out with initial tests strewn with error messages.

Microsoft Documentation indicates that DevTools does not track live changes to code as you write, but you can make the browser refresh automatically when you change a file by configuring what it calls a “reload in direct”.

I followed the instructions including installing the
reload the npm package, but when I tried the CLI
reloadcommand from my project folder (Blazor sample app), I got this error message:

    "reload: C:UsersdavidAppDataRoamingnpmreload.ps1    
    cannot be loaded. The file 
    C:UsersdavidAppDataRoamingnpmreload.ps1    
    is not digitally signed. You cannot run this     
    script on the current system. For more 
    information about running scripts and setting    
    execution policy, see about_Execution_Policies   
    at 
    https:/go.microsoft.com/fwlink/?LinkID=135170.   
    At line:1 char:1
    + reload
    + ~~~~~~
        + CategoryInfo          : SecurityError: (:  
       ) [], PSSecurityException
        + FullyQualifiedErrorId : UnauthorizedAccess

I changed the execution policy then reload worked, but when I made changes that were instantly reflected in the browser, they didn’t persist when I relaunched the instance. I also made changes to the code file in the folder that reload was monitoring and saving it, which was supposed to trigger a browser refresh, according to the documentation (“https://visualstudiomagazine.com/articles/2021/12/17/ All changes saved in this folder now trigger a refresh of the browser. “), but that did not happen.

I was able to launch DevTools, launch a browser instance, and target the Blazor sample app served via localhost, after which I could then make simple text edits and color adjustments and see them immediately reflected in the app. running, which says “Microsoft Edge is being controlled by automated testing software.”

screenshot showing instant color changes
[Click on image for larger view.] Make instant color changes

But I couldn’t open the source files from the Elements tool like you are supposed to. Microsoft’s documentation states: “One of the features of the Elements tool is that it displays the source file that applied styles and event handlers to a selected node in the DOM tree. The source files appear as links to a URL. Selecting a link opens this file in the Visual Studio code editor. ”

However, when I tried to open a CSS file it did not work resulting in an error message stating:

“An error occurred: error mirroring CSS content in document. Unable to mirror CSS changes in document. No workspace mapping was found for ‘http: //localhost:59700/css/booststrap/bootstrap.min.css’. “

I have also tried other features with CSS Mirror Editing, with no success. Microsoft says, “CSS Mirroring is an experimental feature that automatically applies changes made in the DevTools panel to CSS files in your workspace. “

When the CSS Mirror Editing feature was turned off, I could perform a color change and see it instantly reflected. However, when I turned it on and tried to change the color, I got error messages saying:

“Cannot open file in editor. Http: // localhost: 59700 / css / bootstrap / bootstrap.min.css does not match a local file”

then

“No workspace mapping was found for ‘http: // localhost: 59700 / css / bootstrap / bootstrap.min.css’.”

So I could make changes to the text and CSS and see them instantly reflected in the browser instance controlled by DevTools, but couldn’t figure out how to save those changes to the actual code files. Of course, I was working on deadlines and didn’t have a lot of time to investigate, so take my experience with a grain of salt.

That said, a few GitHub issues titled Error mirroring CSS content in document and also CSS mirror editing: known issues and comments leads me to believe that maybe I was not the only one experiencing the mirroring issue. The first specifically mentions the “Unable to reflect CSS changes in document” issue and the second follows comments on the experimental issue, where several articles say similar things.

Either way, the experimental functionality will likely be smoothed out and become usable even for fools like me, and Vogel has hinted at more Hot Reload goodies to come.

“.NET 6 continues like this,” he said. “With .NET 6, you can embed this pdb file, the debug file for the program that basically establishes (among other things) the relationship between your compiled code and your source code – this cross-reference. You can embed this pdb file and your source files … in your executables. The result is that you don’t need to open your project to start a debugging session. All debugging information is in your deployed executable. And again, this will be a hot reload session.

“There you go, if not now soon.” So this is how your world evolves. And again, the client-side environment brings out many of the themes I’m talking about here. If you work in Visual Studio Code and decide to do client-side testing, you are effectively working in a constant hot reload environment. ”

I caught up with Vogel after his presentation last week to see what else he thinks about Hot Reload and beyond.

“I am the archetypal .NET developer who as client side development has grown more adept at JavaScript / TypeScript development,” he said. “What interests me about this movement is the impact that has had on what we expect from .NET. ‘Hot Reload’ is becoming more and more important to us everywhere, not just in our Angular applications. / React / Vue (although this also brings back my days of Visual Basic 6 and edit-and-continue).

“Now we are seeing a merger of our runtime environment and our development environment … at least if we are working in Visual Studio Code. We were able to use Chrome’s DevTools to modify our HTML and CSS in the browser, see the results and save our changes. There are now extensions that integrate Chrome and Edge DevTools in Visual Studio so that we can save our changes in our app.

“It seems to be a trend because I see all kinds of integrations in other areas as well: in .NET 6 you can embed your debug files and your source code into your exe. With this, you won’t need to find your project or check it out of source code control to debug it. ”

It will be interesting to see how all of this matures and emerges in its final form. How integrated will browsers and code / IDE editors be? Will they be the same one day? Only time will tell.

Of course, Vogel discussed a lot more than Hot Reload, and his presentation is just one of three sessions included in the summit, where Shawn Wildermuth discussed the reasons for moving your development to Visual Studio 2022 and sponsor Progress. discussed third-party hot tools.

For even more detailed .NET development tips, see the VSLive! 2 Day Seminar: ASP.NET Core 6 Service and Website event and upcoming live shows:

About the Author

David Ramel is editor and writer for Converge360.


Comments are closed.