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
700
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
670
Reactive Programming with RxJS
mattdsteele
0
90
GET TO THE CHOPVAR
mattdsteele
0
130
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.1k
The Decorator Pattern
mattdsteele
0
38
Diving Into the Device API
mattdsteele
1
450
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
540
What Zelda Taught Me about Front End Engineering
mattdsteele
5
800
Other Decks in Programming
See All in Programming
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
マイ隙間家具OSSたちのご紹介
karupanerura
2
150
ONE WEDGE_Company_Information
1wedge
0
170
Ruby製社内ツールのGo移行
bgpat
2
260
TCA魔法学入門🪄
dazy
0
280
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
Introduction for Open Source Swift Workshop
giginet
PRO
0
180
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
object-oriented-conference-2024
fuwasegu
6
1.8k
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.9k
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.2k
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
14k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Six Lessons from altMBA
skipperchong
19
2.9k
What the flash - Photography Introduction
edds
64
11k
Optimizing for Happiness
mojombo
369
69k
What's new in Ruby 2.0
geeforr
335
31k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Docker and Python
trallard
33
2.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Making Projects Easy
brettharned
106
5.4k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
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