Microsoft is making it easier for developers to use the developer tools that are part of the new Edge browser into Visual Studio Code, its free code editor. The company has released the new Microsoft Edge Tools for VS Code extension, which serves that exact purpose.
The reason these tools exist is that while having tools built into the browser makes it easy to visualize changes on the fly, but it also forces programmers to switch between two different environments if they’re also working in VS Code. This way, developers can choose how they prefer to organize their work.
Microsoft initially released these tools under an experimental extension called Visual Studio Code: The Elements, and later released another extension, Network, which adds the Network pane from Edge’s DevTools into the VS Code experience. With today’s release, the two extensions are now merged into one, and the Network tab can be enabled in extension settings.
Another notable improvement since the preview releases is that users can choose to open browser windows (for debug purposes) in two ways – full browser mode and headless mode. The full browser mode opens a normal-looking Edge window, and you also get to choose whether you want to connect to an existing instance of the browser or open a new one. Headless mode opens a preview of the page as part of the Visual Studio Code window, so it doesn’t create a new icon on the taskbar or register as a new task manager window.
If you’re interested, you can download the new extension from the Visual Studio Marketplace. You can also contribute to the extension on GitHub, and Microsoft says it has improved the architecture so the extension builds faster and is easier to contribute to.