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

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

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

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

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

DevTools failed to load SourceMapエラー

SourceMap404error_001

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(ソースマップ)とは?

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

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

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

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

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

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

ソースマップ404エラーを解決する

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

方法1.参照するコード自体を削除する。
方法2.ソースマップファイルを同階層に置く。

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

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

対処法1.sourceMappingURLの削除

警告が出ている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
SourceMap404error_002

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

コード最終行の

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

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

対処法2.ソースマップファイルを同階層に置く

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

SourceMap404error_003

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

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

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

対処法3.Chromeで警告を非表示にする

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

やり方は以下です。

1.デベロッパーツールを立ち上げる。
2.右上の歯車マークをクリック。
3.Sources項目の「Enable JavaScript source maps」のチェックを外す。
SourceMap404error_004

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

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

まとめ

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

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

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

-サイト構築

© 2021 ソロ学