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
880
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
930
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
63
Diving Into the Device API
mattdsteele
1
650
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
670
What Zelda Taught Me about Front End Engineering
mattdsteele
5
1k
Other Decks in Programming
See All in Programming
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
旅行プランAIエージェント開発の裏側
ippo012
2
920
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
Swift Updates - Learn Languages 2025
koher
2
490
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
AIでLINEスタンプを作ってみた
eycjur
1
230
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
200
AI時代のUIはどこへ行く?
yusukebe
18
9k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
440
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.2k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Site-Speed That Sticks
csswizardry
10
820
Code Review Best Practice
trishagee
71
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
4 Signs Your Business is Dying
shpigford
184
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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