Edge DevTools for Visual Studio Code 1.4.0 - Improved Screencasting, Device Emulation and live, inline issue reporting
Tags: vscode, browsers, developertools, debugging
Published: 2021-10-28 13:05:08

---
title: Edge DevTools for Visual Studio Code 1.4.0 - Improved Screencasting, Device Emulation and live, inline issue reporting
published: true
description: The 1.4.0 release of the Edge Developer Tools extension for Visual Studio code comes with a lot of highly requested features
tags: vscode, browsers, developertools, debugging
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvx8dqi82cg20alisu29.png
---

The 1.4.0 release of the [Microsoft Tools for Visual Studio Code](https://aka.ms/devtools-for-code/) brings a few highly requested features. We improved the screencasting feature, added device emulation and live issue reporting in your source code. You can check the [3 minute highlight reel here](https://www.youtube.com/watch?v=g_TpkkmYzXs).

{% youtube g_TpkkmYzXs %}

## Improved screencasting

In previous versions of the extension, the screencast was a rudimentary feature tied to the panel of the extension. This didn't give you much space to play with and the interactivity was limited. In this version, we moved the screencast to an own tab, which means that you can move it anywhere you want in your Visual Studio Code and use split panels. Furthermore, the screencast now supports developer tools overlays, which means you can see the padding and margin when navigating the HTML source and the inspector overlays.

![A demo of the new screencast features, like moving between
  tabs and showing the inspector overlays](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qg5i2b8zbrabudcf05px.gif)
 
## Device emulation

One of the most requested features of the screencast was device emulation. People wanted to simulate different mobile devices without having to switch to the browser. Right next to the location field of the screencast you can now find a dropdown with a pre-populated list of mobile devices. You can select any of them and the viewport of the screencast will get resized accordingly. If the device is a touch device, you also get touch emulation, as indicated by the cursor changing to a filled circle. Next to the dropdown you also get a button to switch the device orientation. 

![A demo of the new screencast feature device emulation, showing how to pick a device and seeing the resized viewport and touch emulation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l8zxg8kyo7z453rhhk5.gif)

## Live inline issue reporting

The issues panel in browser developer tools shows you problems with accessibility, interoperability, performance and security. We considered moving this one to the extension, but thought we can do better. If your source code now has an issue, you will see a red underline under the line of code. You can hover over the line and you get information what the problem is, how to fix it and links to more documentation. You can also navigate all the issues in the current document or use the problems tab in the lower panel to see all issues in the current workspace.

![A demo of showing issues live inside source code, how to navigate the issues, using the problems panel and live code validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z63euz549q0ece6txo7i.gif)
 
## Get the extension

The extension is available for all major platforms from inside Visual Studio Code and [on the marketplace](https://aka.ms/devtools-for-code/). The [source is also available on GitHub](https://github.com/microsoft/vscode-edge-devtools) and we invite anyone to [file issues](https://github.com/microsoft/vscode-edge-devtools/issues) you encounter. Some of the functionality is dependent on you having an installation of [Microsoft Edge Canary (version 96)](https://www.microsoftedgeinsider.com/en-us/download/canary) and you need to have [Node/NPM](https://nodejs.org/en/) installed on your machine.