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

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...

PHP 8.0: Vote on Union Types ended

PHP 8.0 is scheduled for 2020. Recently, the PHP development team in PHP Internals voted on Union Types as a new feature for PHP....

Angular 9 Next versions: Bazel Schematics switched to Ivy

With Angular 9 next versions, the upcoming major version of the JavaScript framework has again received a number of feature updates, notably the innovations...

HP enters strategic partnership with ExpressVPN to increase security offerings on consumer laptops

In light of the recent challenges faced by the cryptocurrency space and the technological sphere at large, security has become a serious issue among...

Node.js 12.12: New flag for easier electron integration

Node.js 12.12 is here to bring a new flag to help work with embedders like Electron. In addition, source maps are now available for...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here