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
760
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
770
Reactive Programming with RxJS
mattdsteele
0
96
GET TO THE CHOPVAR
mattdsteele
0
140
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.2k
The Decorator Pattern
mattdsteele
0
50
Diving Into the Device API
mattdsteele
1
520
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
580
What Zelda Taught Me about Front End Engineering
mattdsteele
5
870
Other Decks in Programming
See All in Programming
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.4k
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
620
gopls を改造したら開発生産性が高まった
satorunooshie
8
250
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
910
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
190
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
カスタムしながら理解するGraphQL Connection
yanagii
1
1.3k
offers_20241022_imakiire.pdf
imakurusu
2
370
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.4k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8k
Why Our Code Smells
bkeepers
PRO
334
57k
Designing for Performance
lara
604
68k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
The Invisible Side of Design
smashingmag
297
50k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
4
380
Become a Pro
speakerdeck
PRO
24
5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
1
43
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
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