Source MapはWebフロントエンドを開発している際にブレークポイントを入れたり、エラー箇所を見やすくするのに使われています。コードがミニファイされていたりして分かりづらいJavaScript、CSSファイルがSource Mapによって分かりやすくなります。 そんなSource MapをビジュアライズするのがSource Map Visualizationです。こんな使い方もあったのかと気付かされます。

Source Map Visualizationの使い方

左側がデモのファイルです。右側に生成されるコードが表示されています。

オンマウスで該当箇所同士が線で結ばれます。

Source Map Visualizationは開発時に裏で使われている程度の認識でしかなかったので、こうしてビジュアライズされることで実体も分かるようになります。ぜひ手持ちのSource Mapファイルで試してみてください。

Source Map VisualizationはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Source Map Visualization evanw/source-map-visualization: A simple visualization of source map data