The 1.4.0 release of the Microsoft Tools for Visual Studio 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 .

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.

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.

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.

Get the extension

The extension is available for all major platforms from inside Visual Studio Code and on the marketplace. The source is also available on GitHub and we invite anyone to file issues you encounter. Some of the functionality is dependent on you having an installation of Microsoft Edge Canary and you need to have Node/NPM installed on your machine.

Starting with the next version of Microsoft Edge, we are running an experiment that allows you to use Visual Studio Code as the editor of the in-browser Developer Tools. Here’s a three minute video explaining why we think this is a good idea.

Developer Tools have excellent visual tools that allow you to tweak and debug front-end code. The problem is that the changes aren’t synced and once you reload the page, all is lost. Workspaces are a feature to work around that issue and I blogged about those some time ago. We wanted to use the sync capabilities of Workspaces and replace the in-built editor in the Sources tool with Visual Studio Code, effectively giving you the convenience of the editor you are used to and the visual tooling the browser DevTools provide.

To this end, we came up with a new way to invoke a Workspace and make VS Code the editor of the browser. It is an experiment you need to turn on in DevTools by choosing the gear icon.

Once you enabled the “Open source files in Visual Studio Code” experiment, the browser will automatically detect when you work on a local file or local server.

It then prompts you to define the root folder of this file and tell DevTools where to find it.

You can get more information, or skip setting up the functionality. Once you pressed the “Set Root Folder”, you can pick the folder using Finder or Explorer (or whatever other file manager you use).

Once chosen, DevTools needs access to this folder to write files to it.

If you grant DevTools access, activating any link in the tools will now open the folder with all the files in Visual Studio Code instead of the in-built editor in the Sources tool.

You get a new instance of VS Code and the file opens on the correct line.

Any of the changes you do now to the CSS in DevTools changes the file and is reflected inside VS Code. If you do a change in VS Code and save the file it also syncs live in the browser.

You can change the settings of the experiment to not open files in VS Code and to not live sync the changes.

You can read more about this on the official docs and we’d love to hear what you think of it. You can comment on Twitter at @EdgeDevTools or use the feedback mechanism built into the tools directly.

Summary: With the release of 1.3.1 of the Edge Tools for VS Code we introduce a better way to get changes you made in the Styles tool back into your source code. We’d love to know what you think of it and what we can do better. There’s a GitHub issue dedicated to feedback.

Developer Tools in browsers are a fantastic way to debug, edit and tweak the CSS of your web product. You get detailed insights into what CSS is applied to which element, and you get visual tools to aid you on your journey to create a beautiful and working interface.

The big drawback of Developer Tools is that you do not work on the source code of your product, but instead you work with what the browser created from these source files. This means that whilst you can change the code that runs in the browser to find out what needs to get fixed, you are not actually fixing the source code. You are debugging, not developing.

One of the unanswered questions of this process is how you get the changes to your styles back into your source files. The current solutions are suboptimal, as they mean you copy and paste what you created using the browser developer tools.

There is a bit of help available. Chromium based browsers like Microsoft Edge or Chrome have a Changes tool, which shows you what you changed in each file:

Firefox has a live version of this that changes whilst you tweak your CSS and has a “copy all changes” button that results in a CSS document with helpful comments.

Another existing process is that you can set up a Workspace in Developer tools, which means that any change to the styles will also change the source file on the hard drive.

This solution has the problem that you are constantly changing the files. This can have annoying side effects if you’re using a live reload server. And – even more importantly – it means that you have to undo all the changes you made during debugging. Often you will make a lot of changes until you end up at the desired outcome.

With the browser developer tools inside Visual Studio Code, we have a new environment to think about this issue and we would love to hear what you think of the solution we have right now in the Edge DevTools for VS Code extension which we call CSS mirror editing.

When mirror editing is enabled, any change to the CSS done in the Styles editor will also reflect in the source document. However, the document is not automatically changed, which means it doesn’t trigger any live server or watchers on the folder. Once you are happy with all the changes you did, you can save the document.

You can enable and disable Mirror Editing using the button in the extension side bar for now. We are looking into a few better ways to place this, and would like to know what would be best for you.

We would love to hear from you about the feature and what we could do differently. The best way to do that is to add to the Issue on GitHub provided as a link in the CSS Mirror Editing Sidebar.

When using the Edge DevTools for VS Code extension inside the editor, one thing that I kept doing wrong was opening files accidentally next to the tools.

By default, the tools show up as their own pane next to the main editor. This is an editor pane of VS Code, and thus supports many things, including tabs.

When I use the tools, this group has focus. And when I go open another file to edit, it opens as a new tab next to the tools. Many a time this messed up my screencasts.

The trick is to lock the group with the tools in them. You do that by activating the … menu of the tools pane and select “Lock Group”.

The locked group then shows a lock icon and no other files will open as tabs on it, even if it had the focus.

You can see this in action in the following screencast.

If you want to know the value of a certain expression in any JavaScript on the web, you can use logpoints for that. It is like injecting a console.log() anywhere you want.

Here’s a quick demo:

Here’s how the demo works:

• Open https://codepo8.github.io/dog-browser/ in the browser
• Open Developer Tools, go to the Sources tool
• Locate ‘walkies.js’ and open it
• Right-click the line number where you’d like to add a logpoint – in this case line 57
• Select Add logpoint to open the editor
• In the Editor, enter the expression that you’d like to log – in this case “data”.
• Hit Enter to save and a badge shows on the line number.
• Go to the Console, interact with the site and every time line 57 executes, you see the result of the logpoint expression to the console.

You can set as many logpoints as you want. Clicking the badge again removes them.