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
790
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
830
Reactive Programming with RxJS
mattdsteele
0
98
GET TO THE CHOPVAR
mattdsteele
0
150
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.2k
The Decorator Pattern
mattdsteele
0
53
Diving Into the Device API
mattdsteele
1
560
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
620
What Zelda Taught Me about Front End Engineering
mattdsteele
5
920
Other Decks in Programming
See All in Programming
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
250
PEPCは何を変えようとしていたのか
ken7253
3
260
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
55
19k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
160
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
14k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Six Lessons from altMBA
skipperchong
27
3.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building Your Own Lightsaber
phodgson
104
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Building Applications with DynamoDB
mza
93
6.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Building an army of robots
kneath
303
45k
KATA
mclloyd
29
14k
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