PodRocket

Source maps: how does the magic work? with Nicolo Ribaudo

Oct 21, 2025
Guest
Nicolo Ribaudo
In this conversation, Nicolo Ribaudo, a Babel maintainer and TC39 delegate, shares his deep expertise in source maps and debugging. He explains how source maps link minified JavaScript and CSS back to their original code, making debugging smoother. Nicolo discusses the importance of source maps in both development and production environments, and highlights common pitfalls and tips for troubleshooting. He also introduces the new 'scopes' feature, which improves variable mapping for clearer debugging in dev tools.
Ask episode
AI Snips
Chapters
Transcript
Episode notes
ANECDOTE

From Babel Maintainer To TC39 Delegate

  • Nicolo traced his path from maintaining Babel to joining TC39 and working on source maps.
  • His involvement grew from tool implementation to standardization coordination.
INSIGHT

Source Maps Are Language-Agnostic

  • Source maps apply to more than JavaScript; they map transformed CSS, WASM, or even C back to original sources.
  • Nicolo demonstrated stepping through original C code compiled to WASM using source maps in Chrome DevTools.
INSIGHT

Source Maps Are Literal Maps

  • A source map is a JSON file that records filenames, original contents, and encoded mappings.
  • The encoded mappings map characters in built code back to precise locations in original source files.
Get the Snipd Podcast app to discover more snips from this episode
Get the app