Using console.log() debugging in Visual Studio Code
Tags: console, javascript, debugging, visualstudiocode
Published: 2021-07-30 10:35:51

---
title: Using console.log() debugging in Visual Studio Code
published: true
description: Using the new in-built JavaScript debugger in Visual Studio code you can use the browser developer tools Console right inside the editor. 
tags: console, javascript, debugging, visualstudiocode
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdiuo6mu2an05n2q9q6d.png
---

Using the new in-built JavaScript debugger in Visual Studio code you can use the browser developer tools Console right inside the editor. 

I just published a "TikTok" style [video on the official Visual Studio Code channel explaining this](https://youtu.be/ZVbJTQbsh9E) and - after lots of criticism for the quality of the video (lads, this is on purpose!) - people had more questions, so here goes.

{% youtube ZVbJTQbsh9E %}

In the video I use a project I have open with a `launch.json` file already defined, which means it opens the correct URL for you when you start debugging. You can, however, also do that by hand. And it even works without a local server. So, let's do this.

**Step 1:** Create a folder and call it `consoledebug`
**Step 2:** Start Visual Studio Code, choose "open" - select that folder

![New instance of Visual Studio Code with Open Folder selected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i09jwekg86xy7a0u7ne4.png)
 
**Step 3:** Select New File, call it index.html
**Step 4:** Add some HTML/JS and save it, for example:

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Console Demo</title>
</head>
<body>
    <h1>🤩 Console Debugging in VS Code</h1>
    <script>
        console.log('I am the Console, I speak for the trees');
    </script>
</body>
</html>
``` 

![HTML Example for console debugging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcjv7e2qdk68ip1ungk8.png)
 
**Step 5:** Select the `Run and Debug` icon and press the `Run and Debug` button

![Selecting the Run and Debug workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wlongjd8xj3ehivtyk0.png)
 
Visual Studio Code now opens a browser window for you and you can see the `console.log()` message from the demo code in the `Debug Console`.

![Console messages in the Debug Console of Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q06mji2mhtla2vdyqi0g.png)
 
You can use the `Debug Console` to do anything you normally do in the [Console](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/) of the browser tools. You also have access to all the [convenience methods](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/utilities), like `$` for `document.querySelector`. Try it out by using `$('body')` in the Debug Console. You get all the information about the body element of the current document.

![Accessing the document body from the debug console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ks1hqx8lfk0lnksg0sn.png)
 
This is a full REPL console, and you can just type in any JavaScript to try out, for example `2+3` or `'log'.repeat(20)`.

![Running JavaScript in the Debug Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbnx7hzmt3o1vbfsvo1e.png)

You also have full access to the `window` object and the DOM of the current page, for example, to change the background colour of the document, you can use `$('h1').style.background = 'peachpuff'` (and not what I did first in the screenshot). 


![Changing CSS from Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdiuo6mu2an05n2q9q6d.png)
 
For all the features of Console, [check the documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/).

If you use Microsoft Edge as your debugging browser, you also get something extra. Hitting the `Inspect` button on the debug bar will open the Developer Tools `Elements` and `Network` right inside your editor. 

![Developer Tools in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z59zflpqqtyitxyiour1.png)

But more on that later.