jaen

Source Mapスタックトレース復元

Source Map v3 の.mapファイルとスタックトレースを入力し、app.min.js:1:24050 のような圧縮後のエラー位置を、元のソースファイルの行・列に対応付けるツールです。sourcesContentが含まれる場合は該当箇所のソースも表示します。外部のMapやソースを取得せず、すべてブラウザ内で処理されます。

Source Mapとスタックトレースはサーバーへ送信されず、復元はすべてブラウザ内で行われます。外部のMapや元ソースのURLを自動で取得することはありません。

対象は Source Map v3 の単一のMap（sections を持つインデックスMapは対象外）です。Chrome・Edge（at fn (url:行:列)）と Firefox・Safari（fn@url:行:列）のスタックトレース形式に対応しています。

Mapに file の指定がないため、すべてのフレームをこのMapで復元します。

スタックトレースの列番号の基準

復元結果

Source Mapとスタックトレースを入力すると、元のソースの位置が表示されます。

使い方

  1. 左に.mapファイルの内容を貼り付けるか、ファイルを読み込みます。
  2. 右に本番環境などで記録されたスタックトレースを貼り付けます。
  3. 必要に応じて生成済みJavaScriptのファイル名を指定します。省略するとMapの file の値を使います。
  4. フレームごとに元のファイル名・行・列と、該当箇所のソースが表示されます。結果はコピーできます。

このツールについて

本番環境のJavaScriptは圧縮されているため、エラーの位置が app.min.js:1:24050 のように表示され、どのコードで発生したか分かりません。ビルド時に生成したSource Mapを使えば、元のソースファイルの位置に戻せます。

ブラウザのスタックトレースの行・列は1始まりですが、Source Mapの内部表現では列が0始まりです。このツールは基準の違いを変換して位置ずれを防ぎ、0始まりの列番号を出力するツール向けの切り替えも用意しています。対応付けできないフレームや別ファイルのフレームは、元の行をそのまま残して理由を表示します。

初期版は分割されていない単一のMapが対象で、sections を持つインデックスMapには対応していません。sourcesContentがない場合も位置の復元は利用できます。Mapやスタックトレースがサーバーへ送信されることはありません。

Mapに {"version":3,"file":"app.js","sources":["src/main.ts"],"names":[],"mappings":"AAAA"}、スタックに at fn (app.js:1:1) を入力し、列を1始まりにすると、src/main.tsの1行1列へ復元されます。この例は位置だけを含み、元ソース本文の表示はありません。

本番ファイルとMapは同じビルドの組み合わせを使ってください。古いMapでも読み込み自体はできるため、対応しない版では結果の位置を信頼できません。外部のソースやMapを取得する機能はなく、貼り付けた資料をブラウザ内で照合します。

よくある質問

どのブラウザのスタックトレースに対応していますか？

Chrome・Edge（at fn (url:行:列)）と Firefox・Safari（fn@url:行:列）の形式に対応しています。

復元した位置が1文字ずれます。

列番号の基準が合っていない可能性があります。ブラウザのスタックトレースは1始まりです。0始まりで出力するツールの場合は、基準を切り替えてください。

Source Mapを公開せずに使えますか？

はい。Mapはブラウザ内だけで読み込まれ、サーバーへ送信されることはありません。