Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

Source maps demystified

Ben Vinegar (Sentry)
4:25pm–5:05pm Thursday, June 22, 2017
Web Platform Foundations
 Location: 210 CG
Secondary topics:  Build and automation, Node.js, Tools
Average rating: ****.
(4.11, 9 ratings)

Who is this presentation for?

  • JavaScript programmers

Prerequisite knowledge

  • A working knowledge of JavaScript

What you'll learn

  • Learn how source maps actually work
  • Explore tools to generate and manipulate source maps (e.g., unminify minified code captured in logs)

Description

You’re probably familiar with source maps. They let you debug your original, unminified, and untranspiled code in the browser. But have you ever wondered how they actually work? Ben Vinegar takes a deep dive into the source map format to see what’s under the hood, exploring source map generation tools, parsers, and how to manipulate source maps directly for fun and profit.

Topics include:

  • A quick history of source maps
  • How source maps work in the browser
  • The latest source map spec (rev3)
  • How to reverse transform minified code/stack traces using Mozilla’s source map parsing library
  • Source maps and Node.js
  • Source map variants and their trade-offs (e.g., indexed versus nonindexed)
  • How to improve source map performance
Photo of Ben Vinegar

Ben Vinegar

Sentry

Ben Vinegar is a frontend engineer at Sentry. Ben is a contributor to O’Reilly’s Beautiful JavaScript and the coauthor of Third-Party JavaScript.