Console.log() inside Visual Studio Code
Tags: vscode, edge, extension, javascript
Published: 2022-03-24 16:46:40

---
title: Console.log() inside Visual Studio Code
published: true
description: 
tags: vscode, edge, extension, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdb7ypp8ipxda9hqcj86.png
canonical_url: https://christianheilmann.com/2022/03/24/new-in-1-4-6-using-the-devtools-console-inside-visual-studio-code-and-offline-functionality/
---

We just released version 1.4.6 of the [Edge DevTools for VS Code extension](https://aka.ms/devtools-for-edge) and the main change is that the Console tool is now available in the extension.

{% youtube O2E6QC0cqT4 %}

* 0:05 [Console.log()](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-log) messages in VS Code
* 0:08 [Test out some JavaScript](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-javascript) 
* 0:10 window object access
* 0:12 [DOM convenience API](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/utilities) support
* 0:15 Style changes
* 0:17 [Console.table()](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/api#table)
* 0:20 [Live Expressions](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/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](https://www.microsoftedgeinsider.com/download/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](https://github.com/microsoft/vscode-edge-devtools/pull/927). 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:

{% youtube SSywiLfBZWE %}

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](https://github.com/microsoft/vscode-edge-devtools/pull/916). This was a direct request from GitHub issues. 

## Other fixes and features

* We [updated webhint to 1.6.5](https://github.com/microsoft/vscode-edge-devtools/pull/920) which means improved issue reporting and a general clean-up of the code base.
* We [fixed some minor problems in the source path resolution](https://github.com/microsoft/vscode-edge-devtools/pull/885) 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](https://github.com/microsoft/vscode-edge-devtools/issues). This is where we get our best ideas from.