ソースマップで生成位置を検索する手順

バージョン 3 のソースマップを貼り付けて「ローカルで解析」を押します。mappings 文字列はページ内で base64 VLQ としてデコードされます。何もダウンロードせず、生成後のファイルも不要で、ソースマップがブラウザの外に出ることはありません。

レポートには version・file・sourceRoot・sources 数・names 数・デコード済みマッピング数、それぞれのカウント、そして埋め込まれた sourcesContent のサイズを添えたソース 1 行ずつの一覧が表示されます。

「ソースマップ JSON」欄にマップを貼り付けるか、「サンプルを読み込む」を押します。src/index.ts の 5 セグメント、埋め込みソース 1 件、名前 "answer" の例です。
「ローカルで解析」を押します。「サンプルを読み込む」ではその場で解析されます。
3 つのカードを確認します。ソース数と名前の数、そして VLQ 文字列からデコードされたマッピング数です。
「検索」に生成後の行(1 始まり)と生成後の列(0 始まり)を入力して「検索」を押すと、元のファイル・行・列、セグメントが名前を持つ場合はその名前が表示されます。
「ソース」表には 1 ソース 1 行で、内容の列に埋め込みテキストのサイズ(バイト)または「埋め込みなし」が表示されます。「コピー」でレポート JSON をクリップボードに取り出せます。

レポートが数えるもの、検索が返すもの

mappings 文字列の各行は base64 VLQ セグメントをカンマで並べたもので、セグメント内の値は差分です。生成列は行ごとに 0 に戻りますが、ソース・元の行・元の列・名前はファイル全体で積み上がります。

生成列だけを持つセグメントは元の位置を持ちません。列を進めるだけで、デコード数には数えません。それ以外は書かれたままを表示し、レポートの数は実際に位置を持つセグメントの数です。

検索は、指定した行の中で、指定した列以下で最大の生成列を持つマッピングを選びます。ブラウザの開発者ツールが同じ位置に使うセグメントです。

行は 1 始まり、列は 0 始まりで、ブラウザのコンソールや mappings 文字列と同じ数え方です。その列以前にセグメントがなければ、隣の行で推測せずにマッピングなしと伝えます。

読み取るのはソースマップのテキストだけです。生成後のファイルや元のファイルを取得せず、マップがビルドと一致するかも確認せず、sourcesContent からファイルを復元もしません。マップに埋め込まれた文字列を表示するだけです。

インデックスマップ(sections)はデコードしません。いずれかのセクションマップを貼り付けてください。sourceRoot は表示しますが各行には付けません。mappings が空、または VLQ が壊れているマップは、修復せずにその旨を報告します。