How to debug your code in VSCode

VSCode: The Top Open-Source IDE for Developers and its Versatile Debugging Capabilities

“Free. Built on open source. Runs everywhere.” This is how Microsoft describes its integrated Development Environment (IDE). With more than 145k stars, VSCode, or Visual Studio Code, has rapidly become one of the most popular open-source tools.

According to the 2019 Developers Survey, VSCode was ranked as the top choice by 50% of the 87,000 respondents. In the 2021 Developers Survey, it continued to hold the top position, with 74.5% of the 71,000 respondents using it. The figure confidently increased to 74.48% out of the 71,010 total responses in the 2022 survey.

This is no surprise, Visual Studio Code provides comprehensive code editing, navigation, and understanding support along with lightweight debugging, a rich extensibility model, and lightweight integration with existing tools.

It combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle.

One of the key aspects of VSCode is its ease of extension. So when it comes to debugging, this means users can either use the built-in debugging tools or install debugging extensions to add more features and make their debugging experience richer and more customized to their needs.

In this article, we will explore both approaches: debugging using the built-in tools, as well as using an external extension.

Debugging Code With VSCode: Features and Limitations

One of the most significant selling points of Visual Studio Code is its exceptional debugging support. With a multitude of debugging tools at its disposal, VS Code's built-in debugger is designed to help developers streamline the editing-compiling-debugging loop.

VS Code comes with built-in debugging support for JavaScript, TypeScript, and any other language that gets transpiled to JavaScript, using the Node.js runtime. If you want to debug other languages and runtimes such as PHP, Ruby, Go, C#, Python, C++, PowerShell, and many others, you can find official and third-party debuggers extensions in the VSCode Marketplace or select Install Additional Debuggers in the top-level Run menu.

To start debugging using VSCode, you will need to use the menu “Run”→”Start debugging”. You can then set up a breakpoint, a logpoint, or a data inspection.

A breakpoint is a useful feature that allows you to pause the execution of your code at a specific point during runtime. Once you set a breakpoint, the debugger will stop the execution at that point and enable you to examine your code, its state, and its variables. This helps you to better understand the behavior of your application code, locate complex bugs, and make corrections. You can set a breakpoint on specific lines, conditions, functions, exceptions and more!

The breakpoint supports “Expressions”, “Log Message” and “Hit Count”, which allow developers to evaluate expressions, print log messages, and set the number of times the breakpoint needs to be hit before stopping the code execution.

A logpoint, on the other hand, is similar to a breakpoint, but instead of stopping code execution, it prints a message to the console. This could be useful if you need debugging without interrupting the execution.

Finally, a data inspection, allows you to inspect variables and their values during runtime. This can be done by hovering the mouse over a variable or by using the “Watch” panel in VSCode.

With these features, developers have already a wide range of debugging options to understand their bugs and fix them. However, there are some limitations when it comes to scenarios like remote or live debugging including debugging in production.

For these use cases, other options exist and this is what we are going to discover in the next section of this article.

Debugging Code With VSCode: Alternatives to the Built-in Debugging Tool

The built-in debugging features of VSCode are powerful, but they only go so far when it comes to local debugging. While they are certainly a useful asset to have on hand, there are times when they simply aren't enough to get the job done.

Fortunately, there is an alternative option available that can help to fill this gap: remote debugging.

With remote debugging, you can take your debugging efforts to a whole new level, with the ability to analyze and troubleshoot code from virtually anywhere. This can be particularly useful in scenarios where you're working with a distributed team if you're dealing with complex issues that require a more nuanced approach, or when you simply want to debug the production code.

There are different ways to remotely debug in VSCode, but installing a third-party extension is required. When you search for "Remote debugging" in VSCode, you'll find multiple options with different features. Some are specialized in certain programming languages, while others focus on specific features. However, one of the most comprehensive extensions in terms of generality and functionality is the Lightrun extension.

Lightrun is a real-time observability and debugging tool that enables developers to debug, monitor, and troubleshoot their applications without redeploying or restarting their code. It allows developers to add logging and debugging statements to their code and see the output immediately, without modifying the code or rebuilding the application.

Lightrun integrates with popular development tools and platforms, such as Visual Studio Code, and Kubernetes, and supports various programming languages, including Java, Node.js, Python, and .NET.

The installation of Lightrun is straightforward:

1. Open VSCode.
2. On the left activity bar, select Extensions.
3. In the input box, search for "Lightrun" and click Install.
4. Once installed, choose the Lightrun icon from the left activity bar.
5. Create a free account on Lightrun.com.
6. Click the Sign In button in the Lightrun plugin.

Now let’s move on to the agent configuration. Depending on the programming language you are using, install the Lightrun agent locally. For example:

• Node.js users should use npm install lightrun
• Python users should use python -m pip install lightrun
• .NET users can get the Lightrun NuGet package from: https://www.nuget.org/packages/Lightrun
• Java, Scala, and Kotlin should follow these instructions: https://docs.lightrun.com/jvm/agent/

Then, you should add the Lightrun Agent to your application.

This is an example of how you can use the Agent with Python:

Similarly, if you are using another programming language, you should add the agent and follow the instructions provided in the official documentation.

To create different environments, use the tagging feature.

For example, suppose you have two environments: production and local development. In this case, you can ship the production code with this configuration:

While the development code should contain another environment name:

When you want to start debugging on a given environment, you will need to select it when adding a Snapshot (virtual breakpoint), a dynamic log line, or a metric. You also have access to all the deployed environments from your local VSCode. This means you can create logs or snapshots in any of the remote environments without having to build and redeploy.

Finally, you can start using the different debugging features such as adding logs or snapshots. In order to do this, right-click on the line where you want to execute the debugging and select “Lightrun”.

Then choose the feature you want to use.

Lightrun dynamic logs refer to the ability to add logs to running applications in real-time. This means that developers can insert logging statements into their code and dynamically change the log level or filter the logs based on specific conditions, all while the application is running and without the need to restart or redeploy the application.

Another useful feature in Lightrun is snapshots, also known as virtual breakpoints. These snapshots are copies of the program state at specific points in time during the application's execution. They capture the values of all variables and the call stack at the precise moment when the snapshot is taken. Snapshots are an incredibly powerful tool for debugging complex issues. Setting a snapshot makes it easier to identify the root cause of a problem. Additionally, you have the ability to take snapshots on-demand, without having to restart or redeploy the application.

In addition to dynamic logs and snapshots, Lightrun offers developers the possibility to add 3 types of metrics:

• Counter: Counts the number of times a specified line of code is reached and periodically outputs the data to the configured action target.
• Tic & Toc: Measures the elapsed time of code execution between two specified lines, Tic (start line) and Toc (end line), within the same code block.
• Custom Metric: Allows you to define your own expressions that evaluate a long integer result and function as a custom metric.

Lightrun: More than Just a Remote Debugging Tool

Lightrun offers the same features as the built-in debugging tool of VSCode, and goes even further by adding remote debugging capabilities. Thanks to Lightrun, you have the power to debug a remote environment, such as production, without the need to redeploy any single line of code.

Lightrun offers 3 main features:

• Dynamic logging to set up log lines.
• Snapshots to capture the stack trace of execution.
• Metrics to set up counters and user-defined metrics.

These features combine powerful remote debugging capabilities with the three popular pillars of observability: logs, metrics, and traces. This makes Lightrun not only a remote debugging tool but also a developer observability and productivity platform.

What’s next?

Lightrun is free, so start by creating an account here. You can also request a demo here. Alternatively, take a look at our Playground where you can play around with Lightrun in a real, live app without any configuration required.