A new preview extension for Visual Studio Code is ready: With Elements for Microsoft Edge (Chromium), the popular browser DevTool Elements finds its way into the source text editor.

DevTool – Elements for VS Code

Microsoft has released DevTool Elements from the Chromium-based Microsoft Edge for VS Code browser. To use the extension that was released as a preview, a Dev or Canary build from Microsoft Edge (Chromium) must be used. The browser also has preview status.

Elements for Microsoft Edge (Chromium)

In the DevTools of Microsoft Edge (Chromium) can be controlled by the Elements panel z. HTML and CSS editing and DOM mutation breakpoints are set. Integration with VS Code is designed to improve the various workflows between DevTools and IDE.

Using the Elements extension, the DOM can be examined and debugged directly from VS Code. In addition, the changes to CSS and HTML are visible in real time. In a demo gif the features are shown:

According to the blog entry , Microsoft plans to integrate further DevTools into VS code. In this context, Elements was chosen as the first prototype because it is the most widely used DevTool in Edge. The further course of the process will build on the community feedback. However, DevTools should not be completely migrated from the browser to the IDE.

All further details about Elements for Microsoft Edge (Chromium) are available on the Windows blog . In the VS Code Marketplace the Preview Extension is available for download .