If you work it in full-browser mode, which is the default mode, the extension will launch a new browser window to view your web application, which will automatically update when you make changes to your code. You can operate MS Edge Tools in two different modes, full-browser or headless. Step 3: Choose Full-browser or Headless Mode and Enable the Network Panel Click “Install” to install the extension.

Open Visual Studio code and click on the extension’s icon on the left to load the extensions view.Įnter “Microsoft Edge” in the search box at the top, then click on “Microsoft Edge Tools…” to pull up the “Microsoft Edge Tools for VS Code” extension in the main window. Step 2: Install the Microsoft Edge Tools Extension You can download the latest version here: Microsoft Edge. If you don’t already have the Microsoft Edge browser installed, you will need to install it. Step 1: Install the Microsoft Edge Browser – Microsoft Blogĭo you want to take the leap and leave your traditional browser behind for good? Here are a few simple steps to help you get started with Microsoft Edge Developer Tools. That feedback is what prompted us to explore embedding the developer tools into an extension, thus allowing you to see what your code generates and debug it without leaving your “development” mindset. You change from one environment to another – from development to debugging mode – and you need to switch back. What prompted the Microsoft Edge Team to develop these tools? In their words:Ĭontinuously switching between editor and browser adds cognitive load to your workflow throughout the day. Now available as a Visual Studio Code extension, Microsoft Edge Developer Tools lets you inspect network activity, view layout, and styling changes, and see runtime HTML, all without leaving VS Code.

Microsoft edge extensions reddit