For Web developers, when doing the same tasks between DevTools and IDE, different workflows can be inconvenient to mix together, so Paul Gildea proposes three improvements:
Quickly update changes to source code when modifying CSS in DevTools
Reduce the possibility of losing changes when making multiple changes to HTML/CSS in DevTools
Make quick changes to the source code and see the change in your browser
The Elements for VS Code extension is the first step in streamlining the workflow, checking and debugging the DOM directly from VS Code, and seeing the impact of changes on the page in real time.
If you want to install the Elements for Microsoft Edge extension, first install Microsoft EdgeDev or Canary versionAnd then install from the VS Code marketElements for Microsoft Edge VS Code ExtensionAfter the two installations are completed, open the work item in VS Code, and then you will see a new icon in the sidebar:
Clicking on this icon will take you to the target list, which will display any debuggable instances of Microsoft Edge. If there is currently no debuggable instance, you can click the + button to launch the new instance and attach it to it. Alternatively, you can use tasks in the Launch.json file just as you would with other types of debugger extensions.
Adding a browser instance will open the New Elements tool panel, showing the HTML document structure and CSS style information for the site or application, as shown below. If you frequently use Microsoft Edge DevTools or other Chromium-driven browser tools, you should be familiar with this view.
To see a live view of your site in the element extension, just press the "Toggle Screencast" button, which will be updated in real time as you make changes to CSS and HTML, so you don't have to leave VS Code to see the changes.
Paul Gildea also said that he does not plan to fully migrate Microsoft Edge DevTools from the browser to the IDE.
View sample or feedback question address: