What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?

This content originally appeared on CSS-Tricks and was authored by Geoff Graham

It’s not uncommon for my front-end workflow to go something like this:

1. Work on thing.
2. See that thing in an automatically refreshed browser.
3. See something wrong with that thing.
4. Inspect and correct the thing in DevTools.
5. Apply the correct code in my code editor.
6. 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 Hellman’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.

Direct Link to Article — Permalink

The post What if… you could use Visual Studio Code as the editor of in-browser Developer Tools? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

This content originally appeared on CSS-Tricks and was authored by Geoff Graham

Print Share Comment Cite Upload Translate Updates

APA

Geoff Graham | Sciencx (2021-10-21T22:14:21+00:00) What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?. Retrieved from https://www.scien.cx/2021/10/21/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools-2/

MLA

" » What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?." Geoff Graham | Sciencx - Thursday October 21, 2021, https://www.scien.cx/2021/10/21/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools-2/

HARVARD

Geoff Graham | Sciencx Thursday October 21, 2021 » What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?., viewed ,<https://www.scien.cx/2021/10/21/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools-2/>

VANCOUVER

Geoff Graham | Sciencx - » What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/21/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools-2/

CHICAGO

" » What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?." Geoff Graham | Sciencx - Accessed . https://www.scien.cx/2021/10/21/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools-2/

IEEE

" » What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2021/10/21/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools-2/. [Accessed: ]

rf:citation

» What if… you could use Visual Studio Code as the editor of in-browser Developer Tools? | Geoff Graham | Sciencx | https://www.scien.cx/2021/10/21/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools-2/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.