Inside Source Maps: Debugging, DevTools, and Production Builds | Nicolo Ribaudo | PodRocket

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 Related 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 --- Fill out our feedback form to help us improve PodRocket! https://forms.gle/xHm5PdAasfYqXYzT7 --- Chapters 00:00 Intro – Welcome to PodRocket + Introducing Nicolo Ribaudo 00:45 What Are Source Maps and Why They Matter for Developers 01:20 How Nicolo Got from Babel to Source Maps 02:00 Source Maps Beyond JavaScript: CSS, WebAssembly, and More 03:00 What Source Maps Actually Do – Debugging Transformed Code 04:00 Under the Hood: The JSON File and Encoded Mappings 05:20 How Browsers Use Source Maps for Breakpoints and Debugging 06:00 File Size, Loading, and Why They Don’t Affect Production 07:00 Using Source Maps in Development vs. Production 08:10 How Source Maps Integrate with Tools Like Sentry 09:00 Two Main Uses: Browser Debugging vs. Error Monitoring 10:30 The Hidden Power of Build Tools Generating Source Maps Automatically 11:30 Why You Probably Use Source Maps Without Realizing It 12:10 Standardization – How the Source Map Format Was (Finally) Defined 13:00 The Wild West Before Standardization 14:00 Inside the TC39 Working Group: Defining the Source Map Spec 15:00 Collaboration Between Browsers, Tool Authors, and Vendors 16:00 Differences in Browser DevTools and Mapping Accuracy 17:00 Why Standardization Progresses Faster in Source Maps 18:00 The Small but Focused Group Behind the Work 19:00 How Standardization Helps Developers, Not Just Browsers 19:50 The Role of Build Tools Like Webpack, Vite, and Rollup 21:00 Making Source Maps Easier to Generate for Tool Authors 21:50 How to Enable Source Maps in Your Framework (Next.js, Svelte, etc.) 23:00 Common Pitfalls: Chaining Tools That Break Source Maps 24:00 Debugging Wrong or Broken Source Maps 25:00 New Feature: Source Map Scopes and Variable Mapping 26:30 How Scopes Improve the Live Debugging Experience 27:30 When and How You’ll See This in Browsers 28:40 Experimental Support and How to Try It 29:20 Where to Find Nicolo + Get Involved in the TC39 Source Maps Group 30:00 Closing Thoughts --- 🎙 Listen to PodRocket 🎧 Spotify: https://open.spotify.com/show/6oFuKu89C9X1wQ7bT0QEM2 🎧 Apple Podcasts: https://podcasts.apple.com/us/podcast/podrocket-a-web-development-podcast-from-logrocket/id1539945251 📺 Subscribe on YouTube: @LogRocket Follow on Socials ➡️ Paul Mikulskis, Host: https://www.linkedin.com/in/paul-mikulskis-37a50b4a/ ➡️ Elizabeth Becz, Producer: https://www.linkedin.com/in/elizabethb3cz/ ➡️ LogRocket: https://www.linkedin.com/company/logrocket/ --- What does LogRocket do? LogRocket provides AI-first session replay and analytics that surface the UX and technical issues impacting user experiences. Start understanding where your users are struggling by trying it for free at LogRocket.com.