Source Map · 無料ローカルツール

Source Map Explorer

Source Map VLQ Mappings を解析し、Bundle の行に対応する元 file、row、embedded source を照会します。

アップロードなしスマートフォン対応テーマ切替対応

JavaScript Source Map ブラウザとは何ですか?

Source Map の VLQ Mappings を解析し、Bundle の行に対応する元ファイル、行番号、埋め込みソースを照会します。ToolHub は主要な処理をすべてブラウザ内で行うため、デスクトップでもモバイルでもすぐに利用でき、アカウント登録やバックエンドへの送信は不要です。

このツールの使い方は?

  1. field prompt に従って data を入力し、必要な processing method を選択します。
  2. 「Process Now」をクリックすると result、indicator summary、必要な error message を確認できます。
  3. 内容が実際の要件を満たすことを確認したら、result を copy するか file として download して利用できます。

適したユースケース

フロントエンドのデバッグ、エラー位置の特定、Bundle 監査、Sourcemap QA、オンライン調査に利用できます。すべての処理は現在のページ内で完結するため、内部データをリモートサービスへ送信したくないワークフローに適しています。

結果の解釈と注意事項

圧縮ツールが生成する Name Mapping や Sectioned Map では、より完全な Source Map 実装が必要になる場合があります。ツールは基本的な入力形式を検証し、読みやすいエラーを表示しますが、本番環境では元の仕様、業務ルール、または専門的な要件に照らして再確認してください。

ブラウザーとデバイスの対応状況

Source Map Explorer は、現行版の Chrome、Edge、Firefox、Safari に対応しています。モバイル版とデスクトップ版は、このページに記載された同じ検証ルールを使用します。

よくある質問

JavaScript Source Map Browser はデータをサーバーへアップロードしますか?
いいえ。ツールの機能は現在のブラウザータブ内で直接実行され、ToolHub が入力内容や生成結果をアップロード・保存することはありません。
JavaScript Source Map Explorer はどのような用途に適していますか?
front-end debugging、error location、Bundle audit、Sourcemap QA、online investigation
JavaScript Source Map browser を使う前に software を install する必要はありますか?
追加準備は不要です。modern JavaScript に対応した desktop / mobile browser があれば利用でき、account も不要です。
このツールにはどのような制限がありますか?
Compressor が生成する Name Mapping や Sectioned Map では、より完全な Source Map 実装が必要になる場合があります。
結果生成後に手動確認は必要ですか?
必要です。ツールは計算、変換、整形を支援できますが、公開、データ取り込み、業務上の意思決定を行う前には、実際の仕様に沿って結果を再確認してください。

Source Map Explorer:入力、出力、再現可能な例

無料の Source Map Explorer をオンラインで利用できます。高速・プライベート・モバイル対応で、処理はブラウザ内で直接行われます。

このページが実際に処理する内容

フィールド制御既定の例検証ロール
生成行(1 から開始)数値2Generated Line(1 始まり)は、tool 実行前に browser から number value として読み取られます。
生成列(0 から開始)数値0Generated Column(0 始まり)は、ツール実行前にブラウザによって数値として読み取られます。
Source Map JSON複数行テキスト{"version":3,"file":"bundle.min.js","sources":["src/app.js"],"names":[],"mappings":"AAAA;AACA","sourcesContent":["const title = 'ToolHub';\nSource Map JSON は、ツール実行前にブラウザから複数行テキスト値として読み取られます。

組み込み例を再現します

Start with Generated Line (starting from 1) = 2; Generated Column (starting from 0) = 0; Source Map JSON = {"version":3,"file":"bundle.min.js","sources":["src/app.js"],"names":[],"mappings":"AAAA;AACA","sourcesContent":["const title = 'ToolHub';\n, then run Source Map Explorer. Change one input at a time so the effect on the result remains traceable.

generated line(1 始まり)、generated column(0 始まり)、source map JSON を検証した後、結果を出力ワークスペースへ表示し、対応する copy または download 操作を有効にします。

いつ使うべきか、結果をどう解釈するか

フロントエンドのデバッグ、エラー位置の特定、Bundle 監査、Sourcemap QA、オンライン調査に利用できます。すべての処理は現在のページ内で完結するため、内部データをリモートサービスへ送信したくないワークフローに適しています。

使用前の制限とチェック

圧縮ツールが生成する Name Mapping や Sectioned Map では、より完全な Source Map 実装が必要になる場合があります。ツールは基本的な入力形式を検証し、読みやすいエラーを表示しますが、本番環境では元の仕様、業務ルール、または専門的な要件に照らして再確認してください。

ページ検証記録

検査済みコントロール文書化された入力 3件結果パスValidate → process → review → copy/download最終コンテンツレビュー2026-09-02