CodeBlanks Logo Icon CodeBlanks
Login Register

Source maps

Learn to debug transpiled code with source maps.

What is a source map?

Node.js often runs code transpiled by TypeScript or Babel. The transpiled code's line numbers do not match the original source; error stack traces look meaningless. A source map holds this mapping and shows the debugger the original source.

The node --enable-source-maps file.js flag turns on source map support. Error stacks show the original position alongside the transpiled one: at functionName (source.ts:10:5). This makes it easy to find errors in the original file in TypeScript projects. Source map files usually have the .js.map extension and are produced during compilation. Node.js finds and loads them automatically; no extra config is needed.

Reading stack traces

With source maps enabled, error stacks show two positions: transpiled (dist/file.js:42:7) and original (src/file.ts:10:5). You fix the error by looking at the original position.

Example stack: Error: invalid value\n at calculate (src/calc.ts:10:5)\n at main (src/index.ts:25:3). This shows the error originated at line 10 of calc.ts and was called from line 25 of index.ts. Without a source map the stack would only show dist/calc.js; that file is transpiled and hard to read. Source maps also let you set breakpoints on original lines; DevTools maps them automatically.

Practice Write a script that produces a stack trace

Define function calculate(value) { if (value < 0) throw new Error("Negative value"); return value * 2; }. Call with try { calculate(5); calculate(-1); }. Catch with catch (e) { console.log("Error: " + e.message); }. Add console.log("Done").

Starter code

index.js
// Define the calculate function
// write here

// Call with try
// write here

// Catch
// write here

// Print "Done"
// write here

Sample solution

index.js
function calculate(value) {
  if (value < 0) throw new Error("Negative value");
  return value * 2;
}
try {
  calculate(5);
  calculate(-1);
} catch (e) {
  console.log("Error: " + e.message);
}
console.log("Done");

Expected output

Hata: Negatif değer
Tamamlandı

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Complete the source map flag

Question 
node --enable-____-maps dosya.js
Answer 
node --enable-source-maps dosya.js

Explanation: The --enable-source-maps flag enables source map support.

2 What does a source map show?

index.js
Error at calculate (src/calc.ts:10:5)
  • Only the compiled file location
  • Only the memory address
  • The run time
  • The location in the original source file Correct answer

Explanation: A source map shows the original source position.

3 Match each concept to its role

Term Meaning
source map Mapping to original source
--enable-source-maps Enables the flag
.js.map Map file extension
stack trace Call stack

All lessons in Intermediate

1 Events

  1. EventEmitter
  2. on and emit
  3. once
  4. removeListener
  5. error event
  6. Summary - Events

2 Streams

  1. What are streams?
  2. Readable stream
  3. Writable stream
  4. pipe
  5. Transform stream
  6. Summary - Streams

3 HTTP server

  1. http.createServer
  2. Request and response
  3. Routing
  4. JSON response
  5. Query string
  6. Summary - HTTP server

4 Project: Helper library

  1. Module design
  2. String helpers
  3. Number helpers
  4. Date helpers
  5. Putting it together

5 Express basics

  1. What is Express?
  2. express()
  3. app.get
  4. app.post
  5. app.listen
  6. Summary - Express basics

6 Middleware

  1. What is middleware?
  2. app.use
  3. Router middleware
  4. Error middleware
  5. Body parser
  6. Summary - Middleware

7 Routing

  1. Route parameters
  2. Query parameters
  3. express.Router
  4. Route groups
  5. Method chaining
  6. Summary - Routing

8 Project: Quiz app

  1. Quiz model
  2. Adding questions
  3. Running the quiz
  4. Score calculation
  5. Putting it together

9 Async patterns

  1. Async iteration
  2. Async generators
  3. Concurrency limit
  4. Retry pattern
  5. Debounce and throttle
  6. Summary - Async patterns

10 Buffer and binary

  1. What is Buffer?
  2. Buffer.from
  3. Buffer.concat
  4. toString and encoding
  5. Buffer slice
  6. Summary - Buffer

11 Process and CLI

  1. process.argv
  2. process.env
  3. process.exit
  4. process.stdin/stdout
  5. Child process
  6. Summary - Process

12 Project: Library API

  1. Model design
  2. Express app
  3. CRUD routes
  4. Middleware
  5. Putting it together

13 npm and packages

  1. npm install
  2. package.json scripts
  3. devDependencies
  4. Semver
  5. npm publish
  6. Summary - npm

14 Error handling

  1. The Error class
  2. try/catch
  3. Custom errors
  4. Error middleware
  5. Unhandled rejection
  6. Summary - Error handling

15 Testing basics

  1. node:test
  2. assert
  3. describe and it
  4. Before and after
  5. Mock
  6. Summary - Testing basics

16 Debugging

  1. node inspect
  2. Chrome DevTools
  3. console methods
  4. util.inspect
  5. Source maps
  6. Summary - Debugging

17 Date and time

  1. The Date object
  2. Date methods
  3. Intl.DateTimeFormat
  4. performance.now
  5. setTimeout and setInterval
  6. Summary - Date and time

18 Crypto

  1. crypto module
  2. createHash
  3. randomBytes
  4. HMAC
  5. AES
  6. Summary - Crypto

19 URL and query string

  1. URL object
  2. URLSearchParams
  3. URL properties
  4. URL.resolve
  5. querystring
  6. Summary - URL and query string

20 Intermediate final

  1. Project design
  2. Express API
  3. fs persistence
  4. Middleware
  5. Putting it together