How source maps are produced and consumed

Ever wondered how source maps actually work? In this episode, Nicolo Ribaudo, Babel maintainer and TC39 delegate, breaks down how source maps connect your JavaScript, TypeScript, and CSS back to the original code — making debugging, stack traces, and observability smoother in Chrome dev tools.

We dive into how source maps help in both development and production with minified code, explore tools like Webpack, Rollup, Next.js, and Svelte, and share when you should turn off source maps to avoid confusion.

Links

Website: https://nicr.dev
LinkedIn: https://www.linkedin.com/in/nicol%C3%B2-ribaudo-bb94b4187
BlueSky: https://bsky.app/profile/nicr.dev
Github: https://github.com/nicolo-ribaudo

Resources

Squiggleconf talk: https://squiggleconf.com/2025/sessions#source-maps-how-does-the-magic-work
Slide deck: https://docs.google.com/presentation/d/1lyor5xgv821I4kUWJIwrrmXBjzC_qiqIqcZxve1ybw0

We want to hear from you!

How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?

Fill out our listener survey! https://t.co/oKVAEXipxu
Let us know by sending an email to our producer, Elizabeth, at elizabet.becz@logrocket.com, or tweet at us at PodRocketPod.

Check out our newsletter! https://blog.logrocket.com/the-replay-newsletter/

Follow us. Get free stickers.

Follow us on Apple Podcasts, fill out this form, and we’ll send you free PodRocket stickers!

What does LogRocket do?

LogRocket provides AI-first session replay and analytics that surfaces the UX and technical issues impacting user experiences. Start understanding where your users are struggling by trying it for free at LogRocket.com. Try LogRocket for free today.

Chapters

00:00 Intro – Welcome to PodRocket + Introducing Nicolo Ribaudo
00:45 What Are Source Maps and Why They Matter for Debugging
01:20 From Babel to TC39 – Nicolo’s Path to Source Maps
02:00 Source Maps Beyond JavaScript: CSS, C, and WebAssembly
03:00 The Core Idea – Mapping Compiled Code Back to Source
04:00 How Source Maps Work Under the Hood (Encoded JSON)
05:10 File Size and Performance – Why It Doesn’t Matter in Production
06:00 Why Source Maps Are Useful Even Without Minification
07:00 Sentry and Error Monitoring – How Source Maps Are Used in Production
08:10 Two Worlds: Local Debugging vs. Remote Error Analysis
09:00 You’re Probably Using Source Maps Without Realizing It
10:00 Why Standardization Was Needed After 15+ Years of Chaos
11:00 TC39 and the Creation of the Official Source Maps Standard
12:00 Coordinating Browsers, Tools, and Vendors Under One Spec
13:00 How Chrome, Firefox, and WebKit Implement Source Maps Differently
14:00 Why the Source Maps Working Group Moves Faster Than Other Standards
15:00 A Small, Focused Group of DevTools Engineers
16:00 How Build Tools and Bundlers Feed Into the Ecosystem
17:00 Making It Easier for Tool Authors to Generate Source Maps
18:00 How Frameworks Like Next.js and Vite Handle Source Maps for You
19:00 Common Pitfalls When Chaining Build Tools
20:00 Debugging Wrong or Broken Source Maps in Browsers
21:00 Upcoming Feature: Scopes for Variables and Functions
22:00 How Scopes Improve the Live Debugging Experience
23:00 Experimental Implementations and How to Try Them
24:00 Where to Find the TC39 Source Maps Group + Get Involved
25:00 Nicolo’s Links – GitHub, BlueSky, and Talks Online
25:30 Closing Thoughts