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
890
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
970
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
64
Diving Into the Device API
mattdsteele
1
680
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
700
What Zelda Taught Me about Front End Engineering
mattdsteele
5
1k
Other Decks in Programming
See All in Programming
contribution to astral-sh/uv
shunsock
0
550
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
マンガアプリViewerの大画面対応を考える
kk__777
0
340
Devoxx BE - Local Development in the AI Era
kdubois
0
140
EMこそClaude Codeでコード調査しよう
shibayu36
0
450
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
520
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
1
150
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
ドメイン駆動設計のエッセンス
masuda220
PRO
12
3.1k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
KATA
mclloyd
PRO
32
15k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Writing Fast Ruby
sferik
630
62k
Raft: Consensus for Rubyists
vanstee
140
7.2k
A designer walks into a library…
pauljervisheath
209
24k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
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