Tooltip: Editing front-end code in the browser and VScode

Just a quickie for something I discovered today.

For those people using the Microsoft Edge browser and VScode. You can turn on an experimental feature that lets you edit code (css, & javascript) IN BROWSER AND in vscode. :grinning:

While I knew this feature existed, I'd never managed to get it to work until now.

The trick is to make sure that Edge has the right filing system folders to let it match your served files with your source files.

In my case, working with pages served from Node-RED via uibuilder but also wanting to be able to edit uibuilder's new master CSS file, I had to give Edge not only my userDir node-red folder but also the uibRoot folder and my uibuilder package folder.

After that, it was simply a case of closing and reopening the browser window and opening the developer tools.

Now I can make changes to CSS, and JavaScript files either in the dev-tools OR in VScode. Both update each other in realtime AND the display also updates in realtime!

This makes messing with CSS in particular sooooo much faster.

Sadly, it can't seem to work out that the default html page index.html maps to the source shown as (index) in the dev tools but if you manually include /index.html in the browser address bar, then it does update both in dev tools and VScode - unfortunately though, it doesn't update in the browser automatically. Both CSS and JavaScript do update dynamically however.

This might also be useful to anyone trying to play with things in the node-red editor as well :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.