# Fix VS Code Debugger Not Hitting Breakpoints in TypeScript

You set a breakpoint in a TypeScript file in VS Code, press F5 to start debugging, but the debugger never stops at your breakpoint. The code runs to completion, and the breakpoint shows as an empty gray circle with "Unverified breakpoint" when you hover over it.

Step 1: Verify Source Maps Are Generated

The VS Code debugger uses source maps to map TypeScript source positions to the compiled JavaScript. Without source maps, the debugger cannot connect breakpoints to the running code.

Check your tsconfig.json:

json
{
    "compilerOptions": {
        "sourceMap": true,
        "outDir": "./dist",
        "rootDir": "./src"
    }
}

After compiling, verify source maps exist:

bash
ls dist/
# Should show: file.js  file.js.map

Check that the source map references the original TypeScript file:

bash
cat dist/file.js.map | python3 -m json.tool | grep "sources"
# Should show: "sources": ["../src/file.ts"]

Step 2: Configure launch.json Correctly

Create or update .vscode/launch.json:

json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug TypeScript",
            "program": "${workspaceFolder}/src/index.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
            "sourceMaps": true,
            "skipFiles": ["<node_internals>/**"]
        }
    ]
}

The outFiles pattern is critical -- it tells the debugger where to find the compiled JavaScript and source maps. If this pattern does not match your actual output location, breakpoints will not be verified.

Step 3: Using ts-node Instead of Compilation

If you use ts-node to run TypeScript directly without pre-compilation:

json
{
    "type": "node",
    "request": "launch",
    "name": "Debug TypeScript (ts-node)",
    "runtimeArgs": ["-r", "ts-node/register"],
    "args": ["${workspaceFolder}/src/index.ts"],
    "sourceMaps": true,
    "cwd": "${workspaceFolder}",
    "protocol": "inspector",
    "skipFiles": ["<node_internals>/**", "**/node_modules/**"]
}

With ts-node, the outFiles setting is not needed because ts-node generates inline source maps.

Step 4: Check Breakpoint Path Matching

The most common cause of unverified breakpoints is a path mismatch between the source file and the source map reference. Check:

```bash # In the compiled JS file, check the source map comment tail -1 dist/file.js // Should show: //# sourceMappingURL=file.js.map

# In the source map, check the source paths cat dist/file.js.map | python3 -m json.tool | grep -A 3 "sources" ```

If the sources array contains absolute paths that do not match your workspace, the debugger cannot map breakpoints:

json
{
    "sources": ["/home/user/old/path/src/file.ts"]
}

Fix by ensuring rootDir in tsconfig.json is set correctly:

json
{
    "compilerOptions": {
        "rootDir": "./src",
        "sourceRoot": "${workspaceFolder}/src"
    }
}

Step 5: Attach Debugger Instead of Launch

If you are running the application externally (e.g., npm start), attach the debugger instead:

json
{
    "type": "node",
    "request": "attach",
    "name": "Attach to Node",
    "port": 9229,
    "sourceMaps": true,
    "outFiles": ["${workspaceFolder}/dist/**/*.js"],
    "localRoot": "${workspaceFolder}",
    "remoteRoot": "/app"
}

Start your application with the inspect flag:

bash
node --inspect=9229 dist/index.js

Or with nodemon for auto-restart:

bash
nodemon --inspect=9229 dist/index.js

Step 6: Debug Console for Diagnosis

Open the Debug Console (View > Debug Console) during a debug session. Look for messages like:

bash
SourceMaps.setup: sourceMapPathOverrides
  webpack:///./~/* -> /path/to/node_modules/*
  webpack:///src/* -> /path/to/src/*

If you see "breakpoint not verified" messages, the source map paths do not match.

Step 7: Webpack or Bundler Issues

If you use Webpack, the source map configuration is in webpack.config.js:

javascript
module.exports = {
    mode: 'development',
    devtool: 'source-map',  // NOT 'eval' or 'inline'
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
};

Then configure VS Code:

json
{
    "type": "chrome",
    "request": "launch",
    "name": "Debug in Chrome",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}/src",
    "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///src/*": "${workspaceFolder}/src/*"
    }
}

The sourceMapPathOverrides maps the paths in the source map to actual file system locations.