JavaScript ソースマップ デコーダー
.map ファイルの Base64 VLQ マッピングをデコードして、ミニファイされた位置の背後にある元のソース、行、列を見つけ、生成されたものから元のマッピング表全体を参照するか、ミニファイされたスタックトレース全体を元のソースに逆マップします。
入力
.map ファイルの内容、またはインライン //# sourceMappingURL= data: URI からデコードされた JSON。
コードエディターまたはブラウザスタックトレースに表示されるように 1 ベース — 行の最初の文字は列 1 です。
出力
ガイド
バンドラーが JavaScript をミニファイすると、その横に .map ファイルが生成されます — ミニファイされた出力内のすべての位置を元のソース内の行と列にマップする JSON ドキュメント。このマッピングを手動で読むことは、マップの mappings フィールドに詰め込まれた Base64 VLQ (Variable-Length Quantity) セグメントをデコードすることを意味し、これはまさにこのツールがあなたのために行うバイナリでアルゴリズム的な作業です。
使い方
.map ファイルの内容をソースマップ フィールドに貼り付け（または直接アップロード）、次にモードを選択します：
- 位置を検索 — ミニファイされた行と列を入力して（ブラウザの DevTools またはミニファイされたコード ビューアに表示されているように）元のファイル、行、列、および周囲のソースのスニペットを取得します。
- マッピング表全体 — ソースマップが含むすべての生成されたから元のマッピングを参照、セグメントごとに 1 行。
- スタックトレースを逆マップ — ミニファイされたスタックトレース全体を貼り付け、同じトレースを返すと、認識可能なすべての
file:line:columnが元の場所に書き換わります。
ソースマップを見つける場所
ほとんどのバンドラー (webpack、esbuild、Vite、Rollup、Terser) は自動的に生成できます — ミニファイされたファイルの末尾の //# sourceMappingURL= コメントを探します。.map URL を指している場合、そのファイルの内容を取得します。インライン data:application/json;base64,... URI の場合、Base64 をデコードして、結果の JSON をここに貼り付けます。
よくある質問
位置検索が 1 ベースの行/列を必要とするのはなぜですか？
それはあなたが他の場所で見るものだからです — コード エディターの行/列インジケータ、ブラウザの DevTools、および JavaScript スタックトレースはすべて 1 からカウントします。ツールは内部的にソースマップが実際に使用する 0 ベースの列に変換するため、その数学を自分で行う必要はありません。
コンテキスト スニペットは常に表示されますか？
ソースマップが元のファイルのコンテンツを埋め込んでいる場合のみ（sourcesContent）。一部のビルド ツールはマップを小さく保つためにこれを省略します — なくても、ツールは正確な元のファイル、行、列を報告できますが、コード プレビューはありません。
スタックトレースが複数のファイルにまたがる場合はどうなりますか？
このツールは、file:line:column を解析できるすべてのフレームに 1 つの貼り付けられたソースマップを適用します — ファイル名自体は一致しないため、1 つのバンドルから完全に来るスタックトレースに対して機能します。複数のバンドルされたファイルにまたがるスタックトレースの場合、一度に数フレームずつ逆マップし、各フレームが実際に属するファイルのソースマップを使用します。
コードがミニファイされていません — 読みたいだけです
ミニファイされていない既に読み込める可能性のあるコードを再フォーマットする場合は、代わりに JavaScript コード フォーマッター を使用してください。反対方向に進む場合 — ソース マップがデコードするミニファイされたファイルにソースを縮小する場合 — JavaScript ミニファイア を参照してください。
プライバシー
すべてがブラウザで実行されます — ソースマップ、スタックトレース、アップロードしたファイルはデバイスを離れません。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/source-map-decoder \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"mode": "position",
"sourceMapText": "{\"version\":3,\"sources\":[\"src.js\"],\"sourcesConten…",
"minifiedLine": "1",
"minifiedColumn": "21",
"contextLines": "1"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `source-map-decoder` tool (JavaScript Source Map Decoder) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/source-map-decoder/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="JavaScript ソースマップ デコーダー — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| 1回あたりの費用 | 5クレジットから |
|---|