Edge DevTools for Visual Studio Code V2
Tags: vscode, development, browsers
Published: 2022-05-05 12:39:40

---
title: Edge DevTools for Visual Studio Code V2
published: true
description: The new full version release of this VS Code extension gives you great new features, including a new browser preview with emulation and source map support.
tags: vscode, development, browsers
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qgyjwa6jph732fiul28.png
---
![Screenshot of the V2 version on action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz9tdgrvmiu1f7y7c5ro.png)

The V2 version of the [Microsoft Edge DevTools for Visual Studio Code](https://aka.ms/devtools-for-code) extension is now live. We've worked hard to make the current feature set more stable and introduced new ones. 

__[Console Integration](https://docs.microsoft.com/en-us/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension#console-integration)__ - makes it easier to use `console.log()` or interact with the document right from the developer tools. We found the old integration to be flaky and hard to find in the `Output` panel.

![Console integration in the extensioon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9we1y3mxg0i30j5dcss7.png)

__[CSS Mirror Editing](https://docs.microsoft.com/en-us/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension#syncing-live-changes-from-the-styles-tool-by-using-css-mirror-editing)__ - making sure that none of your tweaks in DevTools get lost. This is now out of experiment and doesn't use up as much screen estate any longer. You can enable and disable it in the Styles tool.

![New interface to enable or disable CSS mirror editing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71303itjvv8cyrg1c1ce.png)

__[Live issue reporting](https://docs.microsoft.com/en-us/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension#inline-and-live-issue-analysis)__ of problems in your code. If you have any code that is a problem you will see a wavy underline on it. You can hover over it with your mouse or use the `Problems` panel to learn what is wrong and how to fix it. We've updated the issue engine to make sure you get the latest and will soon offer ways to customise the issues you'd like to see. For now, we've removed Internet Explorer error reporting as it may rest in peace. 

![Live issue reporting flaging up a problem in the source code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6bnkxbo6dr5uxc35eor.png)
 
🆕 __Screencast with emulation features__ - we added a brand new browser preview that doesn't only give you the browser to interact with right in the editor but also offers various ways to emulate different environments. On the bottom of the browser preview you get a toolbar with various options:

![The new emulation bar of the browser preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/168we9caqgczf9xgi7ah.png)

First is the device list. You can select from a wide range of different emulated devices.

![Device list showing various mobile phones and tablets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlx6gmw13zoo42p1z2vv.png)

If you don't select a device but choose `Responsive` instead, the browser will take up the whole available space. You can also define a viewport size using the form and rotate the viewport with the double arrow.

The magic wand menu allows you to simulate various CSS media queries, like print mode, dark/light mode or even simulate a forced colours (high contrast) environment. If you want to know more about forced colours, check [this incredible article](https://polypane.app/blog/forced-colors-explained-a-practical-guide/)

![The CSS emulation showing the document in forced colour mode with the menu offering other emulations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3d7irhb3w5s5b0rvrn1a.png)

The last menu (currently using the eye icon) allows you to simulate different visual impairments, like seeing the page in a blurred fashion or in different "colour blindness" emulations.
 
![The page being displayed in a blurred fashion and the menu offering more visual emulations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvff2dhvmsgobggk6mtu.png)

🆕 __Sourcemap support for styles__ - means you can now debug the styles of Sass/React and other abstraction apps without leaving Visual Studio Code. 

For lots more details you can also check the [Changelog](https://marketplace.visualstudio.com/items/ms-edgedevtools.vscode-edge-devtools/changelog)

## Getting started with sourcemapped styles debugging

We've [covered this here before](https://dev.to/codepo8/css-mirror-editing-with-sourcemapped-files-sass-react-52e7) when we asked for feedback, but now this should be much easier. If you open the Terminal you can do `npm i` and `npm start` to build your App and run the server. In this example, the app is now available at `http://localhost:3000`. 

![A demo react app with the terminal open](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4446q3t7pwy7i477755a.png)

If you click the Edge icon you get the option to launch an instance of Edge or `Generate launch.json` file. Click the latter. 

![The generate launch.json button in the extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/679ihb9g72j1k7t543u0.png)

This generates a `launch.json` file in a `.vscode` folder of your app with all the correct settings. Find all the instances of `url` and change them to `http://localhost:3000`:

![Animation showing where to change the url of the app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0sao9rcl6t2ngkaafoz.gif)

Save the file and press F5. Visual Studio Code will start the debugger and open a browser window with your app and the developer tools right inside the editor.

![Visual Studio Code starting the debugger and opening the developer tools and the browser preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mm5wi31rtgav1eie3lsr.gif)

If you now edit the styles of any of the elements of your app, you don't only change CSS files in your project, but also their scss source files or modular styles. 

![Demo showing how changes in the developer tools now affect the source files, including Sass files and module scoped CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s02bwt55nbtogg3cfllh.gif)
 
For this to work, you need to set up sourcemaps correctly in your project. As we assume this to be problematic for some people, we have an [issue open in the extension repo](https://github.com/microsoft/vscode-edge-devtools/issues/965) where you can find help.