What kind of magic is that?!

57. Select a target location for new selector

If you want to add a new style to an existing selector it’s easy: just find that selector in the Elements panel’s Styles section and start writing your css. But if there is no such selector yet, you need to press that New Style Rule button.

When you are working with workspaces though, the default location of that new style rule — that "inspector-stylesheet:1" place—is not exactly where you’d want the rule to appear. In such case just hold the New Style Rule button and you will see the options will all your css files listed. Just choose your destination and new rule will be saved there!

58. Workspace allows css injection!

With workspace set up not only are the changes made in your browser persisted into the file system, but also your CSS changes save in the file system (i.e. your VSCode, WebStorm, Notepad…) are immediately picked up by the browser and show on your page. Without refreshing it.

Let me be clear: there is no external tool used here — no Webpack hot module replacement or nothing — it’s just any local server and DevTools’ workspace.