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
860
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
890
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
620
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
660
What Zelda Taught Me about Front End Engineering
mattdsteele
5
990
Other Decks in Programming
See All in Programming
エンジニア向け採用ピッチ資料
inusan
0
150
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
190
CursorはMCPを使った方が良いぞ
taigakono
0
150
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
210
WindowInsetsだってテストしたい
ryunen344
1
190
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
120
Using AI Tools Around Software Development
inouehi
0
1.2k
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
A comprehensive view of refactoring
marabesi
0
970
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
300
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
The Pragmatic Product Professional
lauravandoore
35
6.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
It's Worth the Effort
3n
184
28k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Building Adaptive Systems
keathley
43
2.6k
The Language of Interfaces
destraynor
158
25k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
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