The Ultimate Guide to Debugging in VS Code

Visual Studio Code (VS Code) is one of the most popular code editors, and its built-in debugging tools make it a powerful environment for identifying and fixing issues in your code. This guide will walk you through everything you need to know about debugging in VS Code, from basic setup to advanced techniques.

1. Setting Up Debugging in VS Code

a. Install Debugger Extensions

• VS Code supports debugging for many programming languages through extensions.
• Install the appropriate debugger extension for your language:
  • Python: Install the Python extension.
  • JavaScript/Node.js: Debugging is built-in; no extension needed.
  • C++: Install the C/C++ extension.
  • Go: Install the Go extension.
  • Java: Install the Java Extension Pack.

b. Create a Launch Configuration

• VS Code uses a launch.json file to configure debugging settings.
• To create this file:
  1. Open the Run and Debug view (click the bug icon in the sidebar or press Ctrl+Shift+D).
  2. Click Create a launch.json file.
  3. Select your environment (e.g., Node.js, Python).
  4. VS Code will generate a launch.json file in the .vscode folder.

Example launch.json for Node.js:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Node.js",
      "program": "${workspaceFolder}/app.js",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

2. Basic Debugging Workflow

a. Set Breakpoints

• Click in the gutter (left margin) of the editor to set a breakpoint on a specific line.
• Breakpoints pause the execution of your code so you can inspect variables and step through the code.

b. Start Debugging

• Open the Run and Debug view.
• Select the configuration from the dropdown (e.g., “Debug Node.js”).
• Click the green Start Debugging button or press F5.

c. Step Through Code

• Use the debugging toolbar to control execution:
  • Continue (F5): Resume execution until the next breakpoint.
  • Step Over (F10): Execute the next line of code, but don’t step into functions.
  • Step Into (F11): Step into the function being called.
  • Step Out (Shift+F11): Step out of the current function.
  • Restart (Ctrl+Shift+F5): Restart the debugging session.
  • Stop (Shift+F5): Stop debugging.

d. Inspect Variables

• The Variables pane shows the current state of variables in scope.
• Hover over a variable in the editor to see its value.

3. Advanced Debugging Features

a. Conditional Breakpoints

• Right-click on a breakpoint and select Edit Breakpoint to add a condition.
• The breakpoint will only trigger if the condition is true.

Example:

for (let i = 0; i < 10; i++) {
    console.log(i); // Breakpoint with condition: i === 5
}

b. Logpoints

• Logpoints are breakpoints that log a message to the console without pausing execution.
• Right-click on a line and select Add Logpoint.

Example:

console.log('Current value of i:', i); // Logs to the console

c. Watch Expressions

• Add expressions to the Watch pane to monitor their values as you debug.
• Useful for tracking complex expressions or variables.

d. Inline Debugging

• VS Code shows variable values inline as you step through the code.
• Enable/disable this feature in settings (debug.inlineValues).

e. Multi-Target Debugging

• Debug multiple processes or applications simultaneously.
• Add multiple configurations to launch.json and use the Add Configuration button.

Example launch.json for multi-target debugging:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Server",
      "program": "${workspaceFolder}/server.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Client",
      "program": "${workspaceFolder}/client.js"
    }
  ],
  "compounds": [
    {
      "name": "Debug Both",
      "configurations": ["Debug Server", "Debug Client"]
    }
  ]
}

4. Debugging Specific Languages

a. Debugging Python

• Install the Python extension.
• Use the python configuration in launch.json.
• Example:

  {
    "name": "Python: Current File",
    "type": "python",
    "request": "launch",
    "program": "${file}",
    "console": "integratedTerminal"
  }
  

b. Debugging JavaScript/Node.js

• No extension needed.
• Use the node configuration in launch.json.
• Example:

  {
    "type": "node",
    "request": "launch",
    "name": "Debug Node.js",
    "program": "${workspaceFolder}/app.js"
  }
  

c. Debugging C++

• Install the C/C++ extension.
• Use the cppdbg configuration in launch.json.
• Example:

  {
    "name": "Debug C++",
    "type": "cppdbg",
    "request": "launch",
    "program": "${workspaceFolder}/build/app",
    "args": [],
    "stopAtEntry": false,
    "cwd": "${workspaceFolder}",
    "environment": [],
    "externalConsole": false,
    "MIMode": "gdb"
  }
  

5. Tips and Tricks

• Keyboard Shortcuts:
  • F5: Start debugging.
  • F9: Toggle breakpoint.
  • Ctrl+Shift+D: Open the Run and Debug view.
• Debug Console: Use the debug console to evaluate expressions during debugging.
• Remote Debugging: Debug applications running on remote servers or containers.
• Integrated Terminal: Use the integrated terminal for input/output during debugging.

6. Troubleshooting Debugging Issues

• Breakpoints Not Hit: Ensure the code is running in debug mode and the correct configuration is selected.
• Missing Variables: Check if the variable is in scope or if optimizations are stripping it out.
• Debugger Not Starting: Verify the launch.json configuration and ensure the correct program path is specified.

By mastering these debugging techniques, you’ll be able to efficiently identify and fix issues in your code, making your development process smoother and more productive. Happy debugging! 🚀