ソースマップからオリジナルファイルを復元する(不完全版):メモ

ソースマップとコンパイル後のファイルしかない状態から、統合前のオリジナルファイルを復元する方法のメモ。

ソースマップを見ながら手動でできないこともないでしょうが、可能なら何らかのツールでやれたほうがよいので探していました。

ツールを見つけはしましたが、最終的には「完全なものは手にはいらない」という不完全な状態でとまっています。

実現したいこと

• 複数のSCSSファイルをコンパイルしてまとめたCSSファイルと.mapのソースマップはあるが、オリジナルのSCSSファイルはない
• オリジナルのSCSSファイルを全て復元する

方法の検討

1. ソースマップから手作業で復元
2. Chromeから個別にSCCファイルをダウンロード
3. ツールを使う

1: ソースマップから手作業で復元

そもそもソースマップ自体にオリジナルの情報が記載されているのですから、ここから手動で復元することは可能です。

ですがテキストエディタの置換などを駆使してという感じになりそうで、ミスの発生が懸念され、時間もかかり、あまりやりたくありません。

2: Chromeから個別にSCSSファイルをダウンロード

Chromeの開発者ツールで要素を調査すると、ソースマップがあれば該当のオリジナルSCSSファイルを個別に表示させ、入手することが可能です。

これができるなら全部ダウンロードすれば良い、と思ったのですがまとめてダウンロードする方法がわからず。

そのため一つ一つ要素をチェックし、未発見のSCSSファイルがあればそれをダウンロード、という作業が必要になりました。

把握している範囲ではSCSSがあたっている箇所がわからないと表示できないので、抜けが発生しやすい方法です。

3: ツールを使う

• javascript – How to use sourcemaps to restore the original file? – Stack Overflow
• source-map-visualization

日本語では情報が見つかりませんでしたが、英語圏で探すと上記1つ目のページがヒットし、その中に2つ目のツールが示されていました。

２つ目のURLにあるツールの使い方は以下のとおり簡単です。

• 「custom…」のボタンを押す
• 「Step 1 Provide generated code file:」で統合後のCSSファイルを選んでアップロード
• 「Step 2 Provide SourceMap file:」でソースマップファイルを選んでアップロード
• 画面右の「original」のところにまとめてSCSSファイルの中身が表示される

どうやらオリジナルファイルのダウンロードができないようで(できそうに思うのですが方法がわからず)、手作業コピペでファイルを作らなければならないのですが、抜けなくソースマップに書かれたオリジナルのSCSSファイルが手に入ります。

この作業前にソースマップ上部の統合されたファイル名から一覧を作成し、チェックリストとして用いると比較的安全に作業できるでしょう。

なおこのツールには以下のボタンもあるため、試していませんがCSSの他にJavaScriptにも使えるはずです。

• coffee
• simple-coffee
• typescript
• babel
• sass

ソースマップに記載されていないファイルは手に入らない

当然ながら、ソースマップに記載されていないファイルは手に入りません。

試したファイルでは、@importでファイル名が指定されていても、該当のファイル名や記述がソースマップに見つからない状態を確認しました。

結び

今回は「ソースマップ 復元」「ソースマップ オリジナル」「ソースマップから戻す」「SASS map 戻す」などのワードで検索していましたが、日本語のページは見つからず、英語での検索に切り替えた形です。

ツール自体は4年前(2015年?)のものなのでもっと便利なものがありそうですが、そういったものも見つけられませんでした。そのため、日本語にしろ英語にしろどこかに何かがあるだろうという疑念というか期待は持っています。

とはいえソースマップに記述がないものはどうしようもないので、完全なファイルの入手方法は不明なままです。