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

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)! https://t.co/oKVAEXipxu Let us know by sending an email to our producer, Elizabeth, at [e-mail] (mailto:[e-mail]), or tweet at us at PodRocketPod (https://twitter.com/PodRocketpod). Check out our newsletter (https://blog.logrocket.com/the-replay-newsletter/)! https://blog.logrocket.com/the-replay-newsletter/ Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), 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. (https://logrocket.com/signup/?pdr) 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