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
sourcemap規格概要
Search
rchaser53
June 15, 2017
Programming
1
1k
sourcemap規格概要
rchaser53
June 15, 2017
Tweet
Share
More Decks by rchaser53
See All by rchaser53
LLVM IR入門
rchaser53
4
2.3k
pitch loaderについて
rchaser53
1
480
Rustからwasmを生成してみた話
rchaser53
1
690
Base64 VLQ概要
rchaser53
2
1.3k
TypeScript+React入門
rchaser53
1
750
Other Decks in Programming
See All in Programming
現場で役立つモデリング 超入門
masuda220
PRO
13
2.9k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
Vue.js学習の振り返り
hiro_xre
2
130
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
What's in a price? How to price your products and services
michaelherold
243
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Designing for humans not robots
tammielis
249
25k
Building Your Own Lightsaber
phodgson
102
6.1k
Rails Girls Zürich Keynote
gr2m
93
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Transcript
Source Map Revision 3 概要 @rchaser53
CAUTION! 発表内容は発表者の独自調査によるものです 間違ってたらすみません
規格(Source Map Revision 3) 2011/4/12 年に初版に初版が公開 非常に短く実質7p くらいしかないので気軽に読める量 ( 気軽に読める内容とは言っていない)
sourcemap の出力結果 実際は1 行だけど見づらいから改行している { "version" : 3, "file": "out.js",
"sourceRoot": "", "sources": ["foo.js", "bar.js"], "sourcesContent": [null, null], "names": ["src", "maps", "are", "fun"], "mappings": "A,AAAB;;ABCDE;" }
interface と概要 { version: 3; // version 3 3固定 file:
string; // 対象 sourceRoot?: string; // 基準 sources: string[]; // 対象 元 sourcesContent?: string[]; // 変換元 names: string[]; // 対象 出力 mappings: string; // 生成前 位置 }
sourcesRoot とsources 変換前のファイルの位置を示す ファイルが存在しないと参照した際に何も表示されない sourcesRoot が空文字なケースもある (sources に全部書かれている)
対象のファイルが存在する場合
対象のファイルが存在しない場合
sourcesContent 変換前のソース ts=>js であればts のファイルの内容が出力されている sources より優先される
こんな感じに書かれている サーバに変換前のファイルを配置しなくてよくなる
name 変換後のファイルにの単語が配列として保存されている mappings で使用される 重複されて記述されることはない [] でも普通に動く
mappings Base64 VLQ というので記述されている 絶対的に情報を指定せず、相対的に情報を指定する 複雑だけど規格書には詳細は定義されていない こんなの ;AAAAA,EAAE,gBABC,CAAEB;
別資料へ… Base64 VLQ 概要
その他の情報 ・inline sourcemap ・X-Sourcemap
inline sourcemap ファイルに直接sourcemap の情報を書き込む xxx.js.map とかいらない ファイルのサイズはお察し
こんな感じになる
sourceMappingURL=data:application/json;base64 json でbase64 フォーマットだということを示して eyJ2ZXJzaW9uIjozLCJmaWxlIjoic291cmNlbWFwVGVzdC5qcyIsInN base64 ベースの情報を続けて記述する
eyJ2ZXJzaW9uIjozLCJmaWxlIjoic291cmNlbWFwVGVzdC5qcyIsInN ↓ { "version":3, "file":"sourcemapTest.js", "sourceRoot":"", "sources":["../src/sourcemapTest.ts"], "names":[], "mappings":"AAGA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;AACpB,OAAO,CAAC,G "sourcesContent":["interface
Poyo {\n hoge : string;\n}\nconsole.log }
X-Sourcemap sourcemap の位置をヘッダーで指定する ソースに不要な情報が表示されなくなる 正直ソース読む人はheader も読みそうな気はする
便利なライブラリ集 mozilla/source-map sourcemap を作成やsourcemap 同士の関連付けに使える babel, webpack, uglify などが使用(TypeScript は未使用)
azu/multi-stage-sourcemap お手軽簡単に多段ソースマップが作成できる 上のライブラリのサンプルコードとして使える
ご静聴ありがとうございました!