Using the Edge Developer Tools for VS Code extension, you can live edit files in the browser developer tools and all the changes are also happen in your source files. That way you never lose a change you did to your web projects in the developer tools. It makes tweaking a layout much more convenient than jumping in between editor and browser all the time.

One huge request we got from users was to support Sass, CSS-in-JS and many other abstractions. This is now possible, if you target Edge Canary as the functionality is only available in Edge > 101.

You can see the editing in action in the following screencast:

To make it easier for you to play with this, we’re providing a demo app that already has a `launch.json` that targets Canary for you. You can download the app as a zip and use it like this:

1. Make sure you have the Microsoft Edge DevTools for Visual Studio Code extension installed
2. Clone this repo or download the app as a zip and unpack it
3. Open the folder in Visual Studio Code
4. Run `npm i` in the Terminal
5. Run `npm start` in the Terminal
6. Switch VS Code to “Run and Debug” and run “Launch Edge and Attach DevTools” (the project is already configured to use Edge Canary, just make sure you have it installed)
7. Start editing Styles in DevTools and watch them sync!

We have an issue open in the Extension repository and we’d love to get your feedback there!

Today, after a decade or so of using MacOS, I realised that preview has a zoom lens built in. You can toggle it using the backtick ` key.

Once it is on, you can also increase and decrease the zoom level using two finger pinch on the trackpad.

It is not that hard to create a script that shows and hides parts of the document, but often we forget about how our visitors use the products we build. Especially when it comes to navigating huge documents, people tend to use the “find in page” functionality of browsers. And when they do and we hid content with JavaScript, browsers would either not find the content or users won’t know where in the document it is.

If you use the HTML elements of summary and details you don’t have to write any show/hide code yourself and users of Chromium browsers (Edge, Chrome, Brave…) can use “find in page” as the browser will automatically expand the details that contain their search terms.

Here’s a quick video showing that on The VS Code YouTube channel and on TikTok .

You can see this in action on any page that uses the elements. For example on this W3C document you can open the Developer Tools and see the browser add the “open” attribute to the detail in question when the term was found inside the details.

More about summary and details:

• Robin Rendle on use cases
• Chris Coyier on animating the interaction
• Greg Gibson on styling problems
• Adrian Roselli on what we shouldn’t use details and summary for

Please help us to improve the emulation features of browser developer tools by filling out a two questions survey.

Background

We’re currently working on improving the findability of emulation features in the Microsoft Edge developer tools. Did you know that you can emulate different vision deficiences, dark and light schemes, forced colours and print layout amongst other things?

If you don’t, then the problem is that they are hard to find and hidden in the `Rendering` menu.

To improve this, we are working on a new emulation bar inside the screencast of the Edge DevTools for Visual Studio Code as a testing ground to change it in the main browser.

We now need to know what you’d prefer to see:

CSS features emulation

A prioritised set of emulation features:

All options as a flat list:

A nested list:

Vision deficiences

Furthermore, we’d like to know if you prefer the vision deficiencies emulation as part of this menu:

Or as a separate button/menu:

Please fill out this quick survey or comment here or on this GitHub issue

Thanks so much!

We just released version 1.4.6 of the Edge DevTools for VS Code extension and the main change is that the Console tool is now available in the extension.

• 0:05 Console.log messages in VS Code
• 0:08 Test out some JavaScript
• 0:10 window object access
• 0:12 DOM convenience API support
• 0:15 Style changes
• 0:17 Console.table
• 0:20 Live Expressions
• 0:30 Use Console and Elements together.

There are two caveats at the moment: in order to see the Console, you need to use Edge Canary as your debugging target (version 101.0.1193.0+) and it can happen that the you need to refresh the target once to see the Console light up. This is a bug in VS Code itself and will be fixed in the upcoming version.

New automatically created `launch.json` settings

To give you the best debugging experience in VS Code, we updated the `launch.json` settings when you generate it from the extension. The new file offers you a headless debugging experience by default calling the correct version of the Edge debugger.

You can see it them in action in the following screencast:

If you want to see the Console tool right now and not until 101 is the stable version of Edge, you need to add a `”runtimeExecutable”: “canary”,` to the launch.json to target the Canary build of the browser.

Offline availability

If you want to use the extension when you are offline, we now also cache and copy the last successful connection to DevTools. This was a direct request from GitHub issues.

Other fixes and features

• We updated webhint to 1.6.5 which means improved issue reporting and a general clean-up of the code base.
• We fixed some minor problems in the source path resolution which makes CSS syncing and opening files in the editor more stable

If you encounter a problem, or you want to have other features, please file an issue on GitHub. This is where we get our best ideas from.