Bringing the browser developer tools to Visual Studio Code

This post has been republished via RSS; it originally appeared at: Microsoft Edge Blog.

Last year, we released the experimental “Elements for VS Code” extension, giving developers the option of embedding the browser developer tools into Visual Studio Code. With this release, we’ve merged the functionality of two experimental extensions that brought Developer Tools functionality to Visual Studio Code: The Elements and the Network extension. We also made it easier to contribute and build the extension yourself and smoothed out some of the rough edges. [caption id="attachment_24543" align="aligncenter" width="1805"] Edge Developer Tools for VS Code in action: connecting to a server, opening a headless browser, picking a DOM element and editing its CSS in VS Code.[/caption] You can download the from the Visual Studio Marketplace, or install it from within Visual Studio Code.

Why embed developer tools in an editor?

Visual Studio Code has a lot of features that make our lives as developers easier, but rightfully sticks to what it does best – being a light-weight programming environment. When we build products for the web, though, programming them is often not enough. A big part of our workflow consists of tweaking the look and feel of our products. This is where the developer tools built into the browser shine. Continuously switching between editor and browser adds cognitive load to your workflow throughout the day. You change from one environment to another - from development to debugging mode - and you need to switch back. That feedback is what prompted us to explore embedding the developer tools into an extension, thus allowing you to see what your code generates and debug it without leaving your “development” mindset. Extensions are a great way to add more functionality on demand without adding overhead to the main product. They allow us to move fast and iterate based on the feedback of our users, and were a natural choice to bring the Microsoft Edge tools to VS Code.

New headless and full-browser modes

The new Microsoft Edge Tools extension comes with a number of changes to simplify your workflow and integrate more tools. With this version, we changed the way you can launch an instance of Microsoft Edge to debug. You can choose from connecting to an existing browser instance, start a new one, or use a “headless” browser. The “headless” option is a less intrusive way to launch the browser. You don’t get an own browser window and no extra icon in your task bar. This also solved a long-standing problem with Mac users as the extension reported browser windows not in the foreground as inactive.  You can choose in the extension settings if you want new browser instances to be headless or not. You can see the difference in the following screencasts. In normal mode you get a full browser window you can interact with. You can also see a preview of it in the extension. [caption id="attachment_24545" align="aligncenter" width="1805"] Using the extension in full browser mode[/caption] In headless mode, the browser doesn't pop in a separate window: [caption id="attachment_24546" align="aligncenter" width="1805"] Using the extension in headless mode[/caption]

Introducing the Network pane

The Network pane is the second most-used feature in the Microsoft Edge DevTools, so last year we released a separate standalone extension to integrate the Network pane into VSCode. We heard feedback that introduced confusing duplication in the experience, so with this release we're merging the two extensions into one—you can now also enable the Network tab in the extension settings. [caption id="attachment_24547" align="aligncenter" width="1805"] Network tab in Edge Devtools for VS Code extension[/caption] We're eager to hear from developers on this experience. For now, we're leaving the Network pane off by default, but would love to hear feedback on whether you'd prefer Network or additional panes to be enabled by default.

Making it easier to contribute

Contributors will find that the new extension builds much faster and and we changed the architecture to allow for easier contribution. In the past, you needed to download and build the whole of Chromium to contribute, now we only ask you to get the parts you need for the extension and wrote a few scripts to make the process easier.

Get involved!

We’re here to listen to your ideas and would love to know what else we can do better. Try out the new extension today and let us know what you think! You can also find the extension project on GitHub; the best way to share feedback with the team is to file an issue there. We’re also available on Twitter as @EdgeDevTools. We’d love to hear from you what else you’d like to see in this extension and what part of developer tools we should add next! – Chris Heilmann, Principal Program Manager, Microsoft Edge