Home 〉 Other Tutorials 〉 Visual Studio Code Tutorials 〉Debug JavaScript and Code in Visual Studio Code | Complete Debugging Guide

Debug JavaScript and Code in Visual Studio Code | Complete Debugging Guide !

Debug JavaScript and Code in Visual Studio Code | Complete Debugging Guide !

Summary

Debugging is an essential part of coding. VS Code makes it easy and beginner-friendly. You’ve learned how to set breakpoints, run your code, and use built-in tools to inspect and fix bugs. This is a must-know skill for every JavaScript developer, and mastering it will help you write better, error-free code.

Introduction

Struggling to find bugs in your JavaScript code? Don’t worry. Visual Studio Code (VS Code) comes with a built-in debugger that makes finding and fixing errors much easier. In this simple and clear guide, you’ll learn how to use breakpoints, watch variables, step through code, and more — all inside VS Code.

Whether you are a beginner or already writing complex functions, knowing how to debug code is an essential skill for any JavaScript developer.

Step 1: Open Your JavaScript Project in VS Code

  1. Start VS Code.
  2. Click on File > Open Folder and select your project folder.
  3. Make sure your JavaScript file (e.g., app.js) is saved inside this folder.

Step 2: Install Live Server (Optional for HTML Files)

  1. Open the Extensions panel by pressing Ctrl + Shift + X.
  2. Search for Live Server and click Install.
  3. Use it to run HTML files that include your JavaScript code.

If you're running a pure Node.js app or just debugging JS files, you can skip Live Server.

Step 3: Open the Run and Debug Panel

  1. Click the Run and Debug icon from the sidebar (or press Ctrl + Shift + D).
  2. You’ll see a button called Run and Debug. Click it.
  3. If prompted, select Node.js as the environment if you're debugging a .js file directly.

Step 4: Add a Breakpoint

To pause code execution at a specific line:

  1. Open your JavaScript file.
  2. Click on the left margin next to the line number where you want to pause.
  3. A red dot (called a breakpoint) will appear. This tells VS Code to stop there when running the code.

Step 5: Start Debugging

  1. In the Debug panel, click the green play button labeled Start Debugging (or press F5).
  2. VS Code will start running your code and stop at the breakpoint.

When your code stops, you can hover over variables to see their values or use the panels below to dig deeper.

Step 6: Use Debug Tools

VS Code provides several tools in the Debug panel:

  • Watch – Track specific variables and expressions.
  • Call Stack – See the function calls that led to the current line.
  • Variables – View local, global, and closure variables.
  • Step Over – Move to the next line without entering a function.
  • Step Into – Dive into a function call.
  • Step Out – Exit the current function and go back to the caller.

Step 7: Modify launch.json (Optional)

VS Code may create a file called launch.json under the .vscode folder. This file stores debugging settings.

You can customize it to define how and what to debug, like which file to run or which environment to use.

Quick Example: Debug a Simple JavaScript File


                    // app.js
                    function greet(name) {
                    let message = "Hello " + name;
                    return message;
                    }

                    let result = greet("John");
                    console.log(result);

Place a breakpoint on let result = greet("John"); to watch the function call in action.

Common Debugging Tips

  • Use console.log() for quick value checks.
  • Keep code clean and readable — it’s easier to debug.
  • Use meaningful variable names.
  • Run one function at a time to isolate issues.

Why Debugging in VS Code is Better

  • VS Code is free and lightweight.
  • Built-in support for JavaScript, Node.js, and other languages.
  • Works on Windows, macOS, and Linux.
  • Customizable environment and extensions.

Useful Internal Links

Frequently Asked Questions (FAQs)

Can I debug JavaScript without using Node.js?

Yes, if your JavaScript is running in an HTML file, you can debug using Live Server and the browser’s developer tools.

What if the breakpoint doesn’t work?

Make sure the correct file is running and the breakpoint is in a reachable part of the code. Restart the debugger if needed.

Is launch.json required for every project?

No, it's optional. VS Code can automatically create debug configurations if needed.

Previous Post Next Post