Debugging TypeScript in VSCode

VSCode has built-in support for debugging JavaScript and TypeScript applications. In this section, we will set up our project for debugging so you can add breakpoints, step through code, and inspect variables.

Install the Debugger Extension

When you opened the starter project in VSCode, you may have been prompted to install recommended extensions. If you accepted, the JavaScript Debugger (Nightly) extension is already installed. If not, install it now from the VSCode Marketplace.

This extension provides debugging support for Chrome and Microsoft Edge. There are extensions for Firefox and Safari as well, but they do not have as many features. We recommend using Chrome or Edge.

The Launch Configuration

The starter project already includes a .vscode/launch.json file that configures the debugger:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173/dictionary-app/",
      "webRoot": "${workspaceFolder}",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**", "node_modules/**"],
      "smartStep": true,
      "sourceMaps": true,
      "trace": true
    }
  ]
}

Here is what the key settings do:

  • type / request: Use the Chrome debugger and launch a new browser instance.
  • url: The URL of the application, which must match where Vite serves it.
  • skipFiles: Skip over Node internals and node_modules when stepping through code.
  • smartStep: Automatically step over code that does not have source maps (e.g., bundler-generated code).
  • sourceMaps: Enable source map support so you can debug the original TypeScript source instead of the compiled JavaScript.

Enable Source Maps

For the debugger to map the compiled JavaScript back to your TypeScript source, the TypeScript compiler needs to generate source maps. Add the sourceMap option to your tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true
    // Other compiler options...
  }
  // Other configuration options...
}

Source maps are files that tell the browser (and the debugger) how each line of compiled JavaScript corresponds to the original TypeScript. Without them, breakpoints set in .ts files will not correspond to the correct line in the compiled JavaScript.

Debugging Your Application

  1. Start the Vite development server:

    pnpm dev

  2. Add a breakpoint: Click to the left of a line number in the editor. A red dot will appear, indicating a breakpoint. Try adding one inside the event listener callback, for example on the line that calls searchWord.

  3. Launch the debugger: Open the Run and Debug panel (Ctrl+Shift+D or Cmd+Shift+D). Select “Launch Chrome against localhost” from the dropdown and click the green play button.

  4. Trigger the breakpoint: Chrome will open with your application. Enter a word and click “Submit.” VSCode will pause execution at your breakpoint. From there you can inspect variables, step through the code one line at a time, and evaluate expressions in the Debug Console.

Checkpoint: Commit your progress.

git add .
git commit -m "dictionary-10: Enable source maps for debugging"
git push