|Edge Tools Added To VS Code|
|Written by Mike James|
|Friday, 02 October 2020|
Microsoft has announced the general availability of Microsoft Edge Tools for VS Code extension, giving developers the option of embedding the browser developer tools into Visual Studio Code, aka VS Code.
The extension, which has been in beta for a year, combines the features of two experimental extensions adding Developer Tools functionality to VS Code: The Elements and the Network extension.
The thinking behind the VS Code extension is to keep VS Code as a light-weight programming environment while making developer tools available for the browser as an extension. It lets you use the browser's Elements and Network tool from within the editor. The DevTools will connect to an instance of Microsoft Edge so you can see the runtime HTML structure, alter layout, fix styling issues, and view network requests.
The tools provide debug configurations for launching Microsoft Edge browser in remote-debugging mode and auto attaching the tools, and there's a side bar view for listing all the debuggable targets, including tabs, extensions, and service workers.
A screen-casting feature can be used to see your page without leaving VSCode, and you can go directly to the line/column for source files in your workspace when clicking on a link or CSS rule inside the Elements tool.
The Microsoft Edge Tools extension lets you choose between connecting to an existing browser instance, starting a new one, or using a “headless” browser. The “headless” option doesn't add its own browser window and doesn't put an extra icon in your task bar.
The developers say the Network pane is the second most-used feature in the Microsoft Edge DevTools, and last year Microsoft released a separate standalone extension to integrate the Network pane into VSCode. With this release the two extensions have been merged into one, though you can now also enable the Network tab in the extension settings.
or email your comment to: email@example.com
|Last Updated ( Friday, 02 October 2020 )|