拡張子が「.map」のソースマップファイルとは？ChromeでSourceMapに404エラーが出た場合の対処法３つ。

Chromeのデベロッパーツールに「DevTools failed to load SourceMap:～」という警告が出ていました。

内容を見ると「HTTP error:status code 404」とあり、ソースマップが見つかりませんでしたという旨の警告のようです。

そもそも拡張子が「.map」となっているファイルは何のためにあるのか？
また、Chromeでこの内容に対応する方法を３つご紹介いたします。

主にデバッグに関わる内容のため、放置しても問題はないです。

この記事の目次

DevTools failed to load SourceMapエラー

Chromeデベロッパーツールに表示された警告

Chromeデベロッパーで表示された警告の内容は以下です。

DevTools failed to load SourceMap:Could not load content for https://~.min.js.map:HTTP error:status code 404,

【日本語訳】
DevToolsはSourceMapを読み込めませんでした:https://~.min.js.mapにてコンテンツを読み込めませんでした:HTTPエラー:ステータスコード404。

どうやら当サイトの場合、Smushという画像処理系のWordpressプラグイン内にあるファイル「smush-lazy-load.min.js.map」内でソースマップが読み込めず404エラーが返ってきているようです。

まず、SourceMapについて触れておきます。
ソースマップは圧縮されたコードを人が目視確認しやすくするためにあります。
「js.map」や「css.map」のように拡張子が.mapとなっているファイルです。

完成したJavascriptやCSSを実際のWebサイト上で使用する場合、高速化の観点から圧縮（minify）して使用するのが一般的です。
また、別の言語で開発したものをコンパイルしてから使用したりもします。

圧縮やコンパイルを行うとプログラムコードは数行に変換され軽量になります。
しかし、ビッシリとコードが敷き詰められるため、人の目には難読になります。

そこで、変換前の元のファイルの場所をsourceMappingURLとして記述しておくことでブラウザ上でコードを確認しやすくします。

変換前のコードと変換後のコードを紐づけるのがソースマップの役割です。

ソースマップはプログラムを見やすくする必要がない場合には必要のないファイルとも言えます。実際に読み込まれるファイルは加工後のファイルのため、サイトに問題が出ることはありません。

Chromeのデベロッパーツールでソースマップが404になって見つからない場合、解決する方法は以下の２点です。

先述したようにサイトの動作に影響が出ることは無いはずなので、Chromeの設定で警告の表示を消すこともできます。方法３はこれです。

では順番にやってみましょう。

警告が出ているjs、cssファイルからソースマッピングの参照コードを削除します。
ソースマッピングを記述するコード例は以下です。
【jsの場合】

//# sourceMappingURL=example.min.js.map

【cssの場合】

/* # sourceMappingURL=sample.css.map */

コメントアウトみたいな感じですね。
この部分を削除すれば参照されなくなるので警告が消えます。

僕の場合はプラグイン内のファイルでしたので辿ります。
smush-lazy-load.min.js.mapでstatus code 404が出ている場合は以下です。

wp-content/plugins/wp-smushit/app/assets/js/smush-lazy-load.min.js

smush-lazy-load.min.js.map内のソースマップ参照を削除

コード最終行の

//# sourceMappingURL=smush-lazy-load.min.js.map

を削除すればOK！
（プラグインが更新されると元に戻ります。）

ソースマップファイルをエラーが出ているファイルと同じフォルダ内に設置し、適切にsourceMappingURLを記述します。
これが本来の使い方ですね。

同じフォルダにソースマップを設置

ただ今回、プラグインに元々ソースマップが同梱されていました。
しかしながらエラーが出てしまっていました。
間違いは無さそうなので原因不明です…
今回はsourceMappingURLを削除する方法で対応しておきました。

もしかしたらキャッシュが原因なのかもしれません。

Chromeのデベロッパーツールに出る「DevTools failed to load SourceMap～」という表示自体が邪魔な場合、直接対応するよりも設定から非表示にすればOKです。

やり方は以下です。

Chromeデベロッパーツールの設定画面

チェックを外してからページをリロードするときれいさっぱり「DevTools failed to load SourceMap～」の警告が消えていると思います。

Chrome開発者ツールでソースマップの404エラーが出ている場合の対処法でした。

デバッグ用の元ファイルの参照に関する問題なので、チームで開発を行うようなことがない限り気にしなくて良さそうです。

うちはソロでやっていますが、Chromeで表示されるエラー及び警告を0にしたかったのでプラグインのファイル自体に手を入れました。
完全に自己満足ですね・ｗ・