Browser DevTool – Elements for VS Code

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:

elements vs code
image from microsoft

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 .

Recent Articles

Angular 9 final release released

Angular 9 final is here! The new version was released a little late. Ivy is of course one of the new features, but that's...

VS Code update: New preview features, movable panel and Docker tutorials

The first VS Code update in 2020 was released. In addition to new preview features, parts of the workbench have been revised and the...

Purify: Library for functional programming in TypeScript

The Purify library was developed for functional programming in TypeScript. It should make it possible to use frequently used patterns from functional programming languages...

Angular 9 update: Release Candidates

Angular 9 update: release candidate has been released. Here are some bug fixes and performance improvements. However, there are no new features in Angular...

Frontend Tools 2019 survey: jQuery Threatened

Frontend Tools 2019 survey showed that React is voted the most important as well as the most widely used JavaScript tool. For the first...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here