/ How to

How To Debug Code in Visual Studio Code Editor

Visual Studio Code (VS Code) provides a powerful integrated debugger to help debug your code and understand bugs more easily. This article covers key things you need to know about debugging in VS Code across languages and platforms.

Getting Started with Debugging

To start debugging:

  • Open the Run and Debug view in the sidebar
  • Click create a launch.json file to generate debug configurations
  • Select the environment matching your project (Node.js, Python, C++ etc.)

This will create a launch.json file with predefined configurations.

You can now set breakpoints by clicking on the editor gutter next to a line number. Press F5 to start debugging and VS Code will stop at breakpoints.

Core Debugging Features

VS Code offers standard debugging features irrespective of language:

  • Breakpoints
  • Set breakpoints in code
  • Conditional breakpoints
  • Logpoints to log a message instead of breaking
  • Stepping through code
  • Step over (F10)
  • Step into (F11)
  • Step out (Shift + F11)
  • Inspecting variables
  • Hover over variables
  • Use debugger windows like Watch and Variables
  • Call stack
  • See function call sequence
  • Click to navigate to source
  • Debug console
  • Experiment with expressions
  • Execute commands
  • Integrated terminal

Debugging Specific Languages

VS Code includes built-in debugging support for:

It can also debug other languages like Java, Go, PHP etc. with relevant extensions from the VS Code Marketplace.

Configure the debugger using launch.json configurations. VS Code provides debugging recipes for most languages and platforms like:

  • Node.js on Docker
  • Python Django and Flask
  • C++ with GCC/GDB
  • .NET Core and Unity games

Debugging Client-side JavaScript

You can easily debug client-side libraries like React, Angular, and Vue.js:

Set breakpoints directly in .js files instead of browser DevTools.

Configuring Debug Settings

Customize debugging behavior via launch.json configurations stored inside .vscode folder.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

Common attributes:

  • type – Debugger to use – node, python, cppdbg etc.
  • request – launch to launch the app or attach to an existing process.
  • program – Path to start debugging.
  • args – Command line arguments passed to the program.

Configure debugging as per your project type via IntelliSense prompts.

Debugging Tricks

Here are some handy VS Code debugging tricks:

  • Start debugging by pressing F5, without any launch configuration.
  • Set "stopOnEntry": true to break at the first executable line.
  • Debug multi-threaded and multi-process apps.
  • Use inline breakpoints that don’t alter source code.
  • Employ conditional breakpoints to break only when a condition is met.
  • Hot reload saves time by applying code changes without reloading.

Troubleshooting Debugging

Some common debugging issues and solutions:

  • Breakpoints not hit – Ensure the identical source code is referenced.
  • Source maps – Enable source maps to map transpiled code like TypeScript to original source.
  • Stuck processes – Restart debug session instead of stopping.
  • Remote debugging – Use SSH or Docker to debug remote apps.
  • Slow debugging – Disable unnecessary extensions, reduce watch expressions.

Check out detailed troubleshooting guide for Node.js.

Conclusion

Debugging is integral to delivering quality software. VS Code provides a modern, lightweight and customizable debugging experience across languages and platforms. Its rich set of debugging features help diagnose issues efficiently.

With intelligent code completion and embedded Git/GitHub support, VS Code augments the entire coding workflow. Its extensions ecosystem and theming options make it easy to customize for any project. With robust debugging support through this free open-source editor, Microsoft has created a worthy alternative to heavy IDEs for code debugging.

Related Posts