How Shit Works - Source Maps
1 like164 views
The document provides an introduction to source maps, explaining their purpose in mapping generated code back to the original source code for easier debugging. It covers key concepts such as terminology, structure of source maps including vlq (variable-length quantity), and their widespread adoption across various development tools and languages. Additionally, it includes resources and examples relevant to source maps and their implementations.
How Shit Works - Source Maps
- 1. How Sh*t Works - Source Maps Adir Amsalem, Front End Developer adiramsalem AdirAmsalem@amsalemadiradira@wix.com
- 2. Hi. Lithuania I am Adir Amsalem. ● Front end @ Wix ● Co-organizer @ YGLF Ukraine Vilnius Kyiv Dnipro Wix Engineering Locations Israel Tel-Aviv Be’er Sheva
- 3. AGENDA Motivation Introduction to Source Maps Deep Dive
- 6. Let’s transpile TypeScript to JavaScript
- 7. TypeScript
- 13. Houston, we have a problem
- 14. OMG...
- 15. OMG...
- 16. Better, but not perfect
- 17. So... How can we debug this code?
- 20. Terminology Original Code The source code which has not been passed through the compiler. Generated Code The code which is generated by the compiler.
- 23. Transpiling it with Babel simple-greeter.js simple-greeter.es5.js simple-greeter.es5.js.map
- 34. simple-greeter.es5.js.map 1. Starts at the beginning of the generated file
- 35. simple-greeter.es5.js.map 1. Starts at the beginning of the file 2. Line breaks are represented by a semicolon (;)
- 36. simple-greeter.es5.js.map 1. Starts at the beginning of the file 2. Line breaks are represented by a semicolon (;) 3. Segments are represented by a base64 VLQ
- 37. simple-greeter.es5.js.map 1. Starts at the beginning of the file 2. Line breaks are represented by a semicolon (;) 3. Segments are represented by a base64 VLQ 4. Segments are separated by a comma (,)
- 38. Source Maps 1. Represented as a single JSON Object 2. Map generated code to original code 3. Can be referenced with either a directive (usually a comment) or an http header 4. Use VLQ to reduce the overall fize size (~50% smaller) 5. Widely adopted - supported by almost every major browser, transpiler, preprocessor, build tool, etc 6. Not only for JavaScript - CSS can me mapped as well (SASS, LESS, etc)
- 39. Deep Dive 03
- 40. VLQ (Variable-length quantity) A universal code that uses an arbitrary number of binary octets (eight-bit bytes) to represent an arbitrarily large integer. Source: https://en.wikipedia.org/wiki/Variable-length_quantity
- 41. VLQ Examples
- 43. Segment Fields Field number Description 1 Column index of the corresponding line in the generated file 2 Source index in the sources list 3 Line index in the source represented 4 Column index of the line in the source represented
- 44. Segment Fields Are relative to the previous segment in the line
- 45. Let’s see it in action Or visualized
- 46. Useful Links 1. Source Map Revision 3 Proposal 2. Source Map Visualization 3. Online Source Mapper 4. Webpack configuration 5. NPM package: mozilla/source-map 6. NPM package: azu/multi-stage-sourcemap 7. NPM package: evanw/node-source-map-support