Source maps through the looking glass
summary
Deep dive into the actual source map format and workflows, with concrete examples: shows Babel output with sourceMappingURL, explains the VLQ encoded mappings that map output columns back to input files, and walks through decoding segments to build a lookup table. Demonstrates using the source-map npm library as a consumer, describes Sentry fetching maps to unminify stack traces, cites version 3 of the spec and warns that real maps can reach ~30 MB.
AI-written summary · about
chapters (18)
- 0:00Start
- 0:30Sol.ce maps through the looking glass
- 1:55Transpile with Babel
- 2:10Bundle with Webpack
- 5:10Compiling with Debug Symbols
- 6:07"Compiled" JavaScript is still text
- 7:36Quick history
- 8:57Wide adoption
- 9:56Generate a source map
- 10:48Linking to Source Maps
- 11:56SourceMap HTTP Header
- 15:56Mappings and new lines
- 16:23Mappings continued
- 18:17Segment fields
- 20:09Segment values are relative
- 22:09Mozilla's source-map
- 22:47What did we learn?
- 23:34Resources
related talks
30mA deep dive into Source Maps
40mJavaScript Source Maps, can we do better?
12mSource maps for debugging
24mStacktraces, Sourcemaps & Everything In Between
08mBetter DX with Source Maps
56mYour Own Language with Source Map Support in Half an Hour
33mEmbracing Black Magic: The Power of Code Transpilation
50mModern Web Debugging