Source maps for debugging

on YouTube ↗12m

" summary

Explains how to generate and chain Source Maps: compile CoffeeScript with -m to emit application.js plus application.js.map, then run uglifyjs with --source-map (and --in-source-map) to produce a production.min.js and merged map. Notes a gotcha: combining files where only one has a map drops the other’s mapping. Shows Chrome Canary/WebKit/Firefox nightly support, recommends uploading maps to a staging server (not committing them) and mentions Rails and Sass tooling that support Source Maps.

AI-written summary · about

" chapters (7)

1. 0:00Source maps intro
2. 1:56How source maps work
3. 3:40Generating with CoffeeScript & UglifyJS
4. 6:29Minifying with source maps
5. 7:56Viewing in dev tools
6. 9:42Browser support & Rails
7. 11:08CSS source maps with SASS

" related talks

• 24mSource maps through the looking glassBen Vinegar · JSConf EU 2017
• 01mSource mapJecelyn Yeen · BrazilJS Conf 2024
• 30mA deep dive into Source MapsNicolò Ribaudo · JSHeroes 2024
• 40mJavaScript Source Maps, can we do better?Kamil Ogórek · Armada JS 2023
• 08mBetter DX with Source MapsJecelyn Yeen · ViteConf 2023
• 24mStacktraces, Sourcemaps & Everything In BetweenCharly Gomez · JNation 2026
• 56mYour Own Language with Source Map Support in Half an HourDmitriy Karlovskiy · HolyJS 2021 Piter
• 50mModern Web DebuggingJecelyn Yeen · SmashingConf Freiburg 2023