Source Maps and Debugging

A source map links positions in emitted JavaScript back to the corresponding TypeScript source. It helps supported debuggers show meaningful original lines and breakpoints. Source maps do not alter program logic and should be handled thoughtfully in deployed applications.

Compile this program with --sourceMap to produce both .js and .js.map. The source map is metadata for the debugger, not a JavaScript statement that changes the computed sum.

A stack trace is not magically rewritten everywhere; debugger or runtime support determines how source maps are used.

Save as source-maps-debugging.ts. The following program passed strict TypeScript compilation, and the displayed output was captured by executing its emitted JavaScript with Node.js 22.16.0.

TypeScript source

function subtotal(prices: number[]): number {
  return prices.reduce((sum, price) => sum + price, 0);
}
console.log(subtotal([10, 15, 5]));

Verified output

30

Compile: npx tsc --strict --target es2022 --module commonjs source-maps-debugging.ts; run: node source-maps-debugging.js. For Node.js API examples, install @types/node first. For browser projects, use the browser-specific instructions below.

The example demonstrates the code-level behavior; the related configuration or test commands are shown separately when needed.

Compile this program with --sourceMap to produce both .js and .js.map. The source map is metadata for the debugger, not a JavaScript statement that changes the computed sum.

Predict what changes if you alter one input. Then run the code to compare your reasoning with the real output.

Practical project lab: These are real configuration and source-file examples, not a TypeScript object that merely describes settings. Place the files at the named paths relative to one project directory.

tsconfig.json

{"compilerOptions":{"target":"ES2022","module":"CommonJS","strict":true,"sourceMap":true}}

main.ts

const quantity = 3;
console.log(quantity * 4);

Commands

npx tsc -p .
node --enable-source-maps main.js

main.js.map stores mappings; it does not change the multiplication result.

This local compiler or test-runner mini-project was validated in addition to the primary program.

A stack trace is not magically rewritten everywhere; debugger or runtime support determines how source maps are used.

Identify whether the failure is a type-checking issue, a configuration issue, or a runtime behavior issue before choosing a fix.

Compile with --sourceMap and inspect the sourceMappingURL comment and .js.map file.

Write down your expected result first. For configuration examples, compare compiler output and diagnostics; for test examples, make the assertion fail deliberately to verify that the tool reports it.

For the exact current options and platform behavior, consult the official documentation. These examples were verified using the tool versions described above.

A source map links positions in emitted JavaScript back to the corresponding TypeScript source.

Run the primary example, then complete the practice task or environment-specific lab.