Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Using Source Maps in 2015
Search
Matt Steele
April 08, 2015
Programming
0
870
Using Source Maps in 2015
And introducing the greatest compiles-to-js language of all time, arnoldc.js
Matt Steele
April 08, 2015
Tweet
Share
More Decks by Matt Steele
See All by Matt Steele
Upgrading to Angular 2 using ngUpgrade
mattdsteele
0
900
Reactive Programming with RxJS
mattdsteele
0
110
GET TO THE CHOPVAR
mattdsteele
0
160
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.3k
The Decorator Pattern
mattdsteele
0
62
Diving Into the Device API
mattdsteele
1
630
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
660
What Zelda Taught Me about Front End Engineering
mattdsteele
5
1k
Other Decks in Programming
See All in Programming
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
830
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
510
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
TypeScriptでDXを上げろ! Hono編
yusukebe
3
880
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
660
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Thoughts on Productivity
jonyablonski
69
4.8k
Practical Orchestrator
shlominoach
189
11k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Tale of Four Properties
chriscoyier
160
23k
Writing Fast Ruby
sferik
628
62k
Agile that works and the tools we love
rasmusluckow
329
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Transcript
SOURCE MAPS
IT’S SHOWTIME
It’s 2015 Tools Are Complicated
Compilers
Compilers
Compilers
Compilers
Compilers
Transpilers
Transpilers
Transpilers
None
Preprocessors
Preprocessors
Preprocessors
Preprocessors
Postprocessors
Postprocessors
Postprocessors
Postprocessors
Postprocessors
I’LL BE BACK
Build Phase
Build Phase
Build Phase
Build Phase
Now you have two problems
None
DEBUG THIS
Source Maps To The Rescue
Content Source
CSS & JavaScript
app.js app.min.js Without Source Maps
app.js app.min.js app.min.js.map With Source Maps
None
None
None
None
Variable Length Quantity http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
It all Just Works
Demo
Multi-Level Source Maps
HASTA LA VISTA, BABY
ES6 CoffeeScript TypeScript
ES6 CoffeeScript TypeScript Concat
ES6 CoffeeScript TypeScript Concat Minify
Demo
ArnoldC
None
IT'S SHOWTIME TALK TO THE HAND "hello world" YOU HAVE
BEEN TERMINATED Hello World
GET TO THE CHOPPER a HERE IS MY INVITATION 4
GET UP b YOU'RE FIRED 2 ENOUGH TALK a = (4 + b) * 2
HEY CHRISTMAS TREE foo YOU SET US UP @I LIED
HEY CHRISTMAS TREE bar YOU SET US UP @NO PROBLEMO foo = false bar = true
Two Problems
1.
✓
✓ ✗ ✗
✓ … ✗ ✗
None
None
None
None
None
2.
2.
So
I wrote a compiler
arnoldc.js https://github.com/mattdsteele/arnoldc.js
Compiles from ArnoldC to JavaScript
Compiles from ArnoldC to JavaScript (With Source Maps)
DO IT NOW
11+ Source Maps
1. Upgrade your tools Tips
2. Gulp > Grunt (for this) Tips gulp.task('javascript', function() {
gulp.src('src/**/*.js') .pipe(sourcemaps.init()) .pipe(plugin1()) .pipe(plugin2()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); });
3. Inline your sourcesContent Tips
Tips 4. Source Map Visualization Tool http://sokra.github.io/source-map-visualization/
@mattdsteele http://steele.blue