If you would prefer to use only the browser window within VS Code and not have a new window pop up every time, choose the headless mode. Full-browser mode is a good choice if your screen is small or wants to view your app at full screen. It will also create a smaller, mirrored browser window within VS Code that you may close if you wish, although you will lose the power and functionality of having your browser window right next to your HTML. 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.

Visual studio code microsoft