Your JavaScript Broke in Production. Now How Do You Debug It?

Debugging JavaScript in production is hard when source maps are missing. Learn how to isolate and fix live bugs. Production environments often strip source maps for security or build optimisation, leaving you with minified code. This video walks through a real-world scenario where a discount coupon logic failed, demonstrating how to trace the issue back to the source. We go beyond basic console logging. You will see how to leverage Chrome DevTools for runtime debugging, using XHR breakpoints and logpoints to inspect variables without deploying changes. This workflow is essential for frontend debugging when you cannot rely on standard mapping or need to manually attach artifacts from CI. Whether you are dealing with hidden source maps or complex minified logic, this guide provides a clear flowchart to isolate production bugs efficiently. Drop a comment on which of these scenarios you encounter most often, and subscribe for weekly engineering breakdowns. ⏱️ Chapters: 0:00 – The bug: coupon shows 20% instead of 30% 0:44 – The problem: no usable source map in production 1:02 – The debugging flowchart (overview) 1:20 – Case 1: Is the authored source usable? 1:57 – Is the source map reference in the bundle? 2:40 – Checking Developer Resources for load errors 4:00 – No map reference: generated vs hidden 4:51 – Runtime debugging: find your entry point 6:02 – XHR breakpoint + call stack 7:00 – Logpoints: inspect values without editing 8:23 – DOM breakpoints, event listeners, pause on exception 9:28 – Recovering the map from CI artifacts 11:22 – "Add Source Map" in DevTools 12:37 – Hidden source maps & security 14:06 – The full flowchart, summarised 🔗 Connect with me on LinkedIn:   / ershubgupta   💬 Which case do you hit most in production? Drop it in the comments — if it's useful, I'll cover it in a future video. #javascript #debugging #chromeDevTools #webdevelopment #frontend