Debug anything: launch.json & the debug console
Tags: debug, vscode, node, learn
Published: 2020-04-27 20:27:43

---
title: Debug anything: launch.json & the debug console
published: true
description: Some of the more powerful debug features we will need going forward are only available with a dedicated configuration file. We'll look at creating a launch.json and the built-in VSCode debug console. This post is the last piece of the puzzle before we can move on to debug complex, real-life applications.
tags: #debug #vscode #nodejs #learn
cover_image: https://www.datocms-assets.com/22772/1586336624-photo-1508693484929-012827ef8c81.jpg
series: Debug Anything
canonical_url: https://charlesagile.com/vscode-launch-json-and-the-debug-console
---

Debugging can be an intricate business, and we need a way to store the config for our bespoke setup - ports, paths, arguments, and so on - somewhere. VSCode uses `launch.json` for fine-grained control and having one will make it possible to start our app or attach to it in complex debug scenarios. Not having a `launch.json` was a temporary hack, but we'll need one moving forwards. So let's create one!

Make sure [our sample code folder](https://github.com/thekarel/debug-anything) is open in VSCode:

![](https://www.datocms-assets.com/22772/1586853173-deuganything-04-01-folder-open.png)

# launch.json

VSCode has a handy UI to generate a config skeleton. Let's switch to the debug sidebar, click "create a launch.json file" and select Node.js:

![](https://www.datocms-assets.com/22772/1586853110-deuganything-04-02-generate-launch-json.gif)

VSCode generates a new `launch.json` file under the `.vscode` folder in the workspace:

![](https://www.datocms-assets.com/22772/1586853125-deuganything-04-03-show-launchjson.png)

We'll dig deeper into the file format and possible values in the future when we'll look at different real-life scenarios and adapt the configuration as required.

For now, it's enough to observe that the presence of the config enables a launch menu in the debug sidebar which you can use to start the toy server 🧸 quickly:

![](https://www.datocms-assets.com/22772/1586853129-deuganything-04-04-running-debug.gif)

You can refer to the excellent official documentation on [creating the configuration](https://code.visualstudio.com/Docs/editor/debugging#_launch-configurations) and [the possible configuration values](https://code.visualstudio.com/Docs/editor/debugging#_launchjson-attributes) if you'd like to understand more about this topic right now.

By the way, I'd suggest saving `launch.json` to your code repo. Having a shared one enables all team members to take advantage of proper debugging.

# Debug Console

Note how the debug console also opened up automatically:

![](https://www.datocms-assets.com/22772/1586853150-deuganything-04-05-debug-console-open.png)

This console allows you to evaluate expressions in the context of the app running in the debugger. It is a pretty amazing and convenient tool! You can inspect any variable in the scope, similar to the [debug sidebar](https://charlesagile.com/debug-anything-editing-variables-and-restarting-functions#hello-undefined). But you can also run any function in scope, or literally run any code you want, even `require` modules - inside your running app 🤯

Let's see an example. Make sure to [add a breakpoint](https://charlesagile.com/debug-series-nodejs-browser-javascript#start-the-debugger) on line 24 and fire off a request:

![](https://www.datocms-assets.com/22772/1586853154-deuganything-04-06-use-debug-console.gif)

As demonstrated, you can type in any local variable (or function) name, and you even get auto-completion.

But, as mentioned above, you're not limited to your app's code -  you can import any available module:

![](https://www.datocms-assets.com/22772/1586853106-deuganything-04-07-require-console.png)

Have fun exploring the debug console! 🥼