Microsoft to developers: Now VS Code gets this new Edge tools extension

Microsoft's new extension puts Edge developer tools inside its popular Visual Studio Code editor.
Written by Liam Tung, Contributing Writer

Microsoft has announced general availability of its new Microsoft Edge Tools for VS Code extension, which lets developers embed Edge's browser developer tools into Microsoft's popular cross-platform code editor. 

The new extension allows developers to use Edge's built-in Elements and Network tool from within Microsoft's Visual Studio Code (VS Code) to fix styling, layout, and CSS issues with a site.   

The idea is to bring Edge's tools to VS Code so developers don't need to switch between the editor and browser when moving from development to debugging tasks. 

SEE: 10 ways to prevent developer burnout (free PDF) (TechRepublic)

Microsoft says the new extension simplifies developers' workflow by changing the way users can launch an instance of Edge to debug. Users can now connect to an existing browser instance, start a new one or a headless browser that lacks a browser window and has no icon in the task bar. 

"Continuously switching between editor and browser adds cognitive load to your workflow throughout the day. You change from one environment to another – from development to debugging mode – and you need to switch back," the Microsoft Edge Team said.  

The extension's settings let users choose whether a new browser is headless or not. In headless mode, the browser doesn't open in a separate window, but rather opens in the left panel of the editor. 

Now there's also a Network tab in the Edge Tools for VS Code extension. Previously, Microsoft launched a standalone extension to integrate the Edge DevTools Network pane into VS Code. It's also a feature of Edge DevTools. The Network pane is off by default for now, but Microsoft is looking for feedback on this configuration. 

Microsoft notes that the extension only works with Chromium-based Edge, so presumably not with Google Chrome. 

The key supported features include debugging configurations for launching Microsoft Edge browser in remote-debugging mode and auto-attaching the tools. 

It also offers a sidebar view for listing debuggable targets, such as tabs and extensions, and a screen-casting feature that allows developers to see their page without leaving VS Code.

The new Edge developer tools extension is available from Microsoft's Visual Studio Marketplace.  

Edge Developer Tools for VS Code seen here connecting to a server, opening a headless browser, picking a DOM element and editing its CSS in VS Code.

Image: Microsoft

More on Microsoft's Visual Studio Code

  • C++ programming language: Microsoft's VS Code extension is out with these new features  
  • Microsoft: VS Code update gets new features with programming language TypeScript 4.0  
  • Google's Flutter 1.20 framework is out: VS Code extension and mobile autofill support  
  • Microsoft: New VS Code update is out – stable builds for Windows on Arm and Surface Pro X  
  • Microsoft VS Code turns 5: How GitHub, open source, Google made it a hit, reveals creator  
  • Programming language Go: Microsoft hands VS Code Go extension to Google's Go team  
  • Microsoft: This new update makes VS Code friendlier for Java programming language jobs  
  • Programming language Python VS Code extension: New update has critical security fix
  • Microsoft: Bosque is a new programming language built for AI in the cloud  
  • Microsoft's VS Code Python programming language extension gets this new update  
  • Microsoft: Try VS Code's new Python, C++ programming language tutorials, Docker updates  
  • Microsoft makes new GitHub collaboration tools available to testers  
  • Programming languages: Python and Java VS Code extensions get these new updates  
  • VS Code gets a big update: Plays nice with macOS Gatekeeper plus lots of new features  
  • Microsoft: VS Code for PowerShell 7 arrives with ISE mode  
  • New Microsoft VS Code browser editor update – better Go, Python language, Docker support  
  • Microsoft's VS Code Python programming language extension gets this new update  
  • ServiceNow reveals VS Code alternative to its own web-based code editor  
  • Microsoft boosts programming language Python's popular VS Code extension  
  • Facebook: Microsoft's Visual Studio Code is now our default development platform
  • JPMorgan's Athena has 35 million lines of Python code, and won't be updated to Python 3 in time TechRepublic
  • Mozilla's radical open-source move helped rewrite rules of tech CNET
  • Editorial standards