It’s not uncommon for my front-end workflow to go something like this:
- Work on thing.
- See that thing in an automatically refreshed browser.
- See something wrong with that thing.
- Inspect and correct the thing in DevTools.
- Apply the correct code in my code editor.
- See that correct code automatically refreshed in the browser.
I know, it’s not always great. But I’d bet the lint in my pocket you do something similar, at least every now and then.
That’s why I was drawn to the title of Chris Heilman’s post: “What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?”
The idea is that VS Code can be used as the editor for DevTools and we can do it today by enabling it as an experimental feature, alongside Microsoft Edge. So, no, this is not like a prime-time ready universal thing, but watch Chris as he activates the feature, connects VS Code to DevTools, gives DevTools access to write files, then inspects the page of a local URL.
Now, those changes I make in DevTools can be synced back to VS Code, and I have direct access to open and view specific files from DevTools to see my code in context. Any changes I make in DevTools get reflected back in the VS Code files, and any changes I make in VS Code are updated live in the browser. Brilliant.
I’m not sure if this will become a thing beyond Edge but that sort of cross-over work between platforms is something that really excites me.
Yay, thanks for featuring my post. We’re currently experimenting a lot with these ideas and would love to get more feedback what we can do better. I also just posted on the Microsoft Edge blog about other ideas like the CSS Mirroring in the VS Code extension.
I really think it is time to close the authoring/debugging loop.
How does this end up working against sourcemaps? Does it already just work like magic? Or is there room for growth?
Since more and more people are developing in React, and a lot of people use things like Mui makeStyles or some other kind of JS-CSS solution, I’d be interested to see if it can be smart enough to make style changes in those JS style definitions.
Seriously cool stuff though, the future of VS Code is always amazing to me.
In the Chrome Developer Tools, if you give it access to the files on disk, it can map the scripts to the files on disk, even when using webpack (with source maps). Then, edited files in the browser can easily be saved to disk.
Yup, you can do a similar thing with local overrides on chrome. and then you open them with VC. Anything you change in dev tools with show instantly on VC and vice versa
Yes Chrome Developer Tools, in the event that you give it admittance to the documents on circle, it can plan the contents to the records on plate, in any event, when utilizing webpack (with source maps). Then, at that point, altered records in the program can without much of a stretch be saved to plate.
This is very cool – but what I was kind of hoping for, was a VS Code editor panel mounted directly in DevTools, replacing it’s built-in editor panel.
It’s all just JS and DOM, so technically that should be possible, right? Plenty of VS Code derivatives run on the web already.
Thanks for sharing. While I was aware of this, I’d struggled to get it to work as I’m working with a low-code tool called Node-RED.
I’ve now worked it out though. You may need to add multiple folders manually for it to be able to map between the source files and what the server is presenting. I had to manually add a couple of deeper folders for it to work.
You don’t say but I also had to not only restart dev tools but also to close and reopen the tab before everything worked correctly.
“The idea is that VS Code can be used as the editor for DevTools and we can do it today by enabling it as an experimental feature, alongside Microsoft Edge.”
So basically MS added a feature to their browser that Google is making for them that ties in VSC for an autoamtic visual result … kind of like how Dreamweaver has been doing since Macromedia was around.