ソースマップファイル(.map)の404エラーが出た時の対処法
最終更新日: Update!!
ウェブサイトのデバッグ時に拡張子が「.map」という見覚えのないファイルが404エラーになっていたことはありませんか?今回はこのケースについて備忘録を残しておきます。
解決方法としては2通りあり、まず1つ目はこれらのソースコードマップファイルを同階層に用意する方法と、もう一つはエラーに該当するソースコードマップファイルに対応するファイル内のソースコードマップを指定している部分のコードを削除することです。
Sassの場合ですとコンパイル時にソースマップファイルも出力されるようです。中身を見てみるとこんな感じでした。
【sample.css.map】※一部抜粋
ソースマップファイル(.map)とは
ソースマップファイルとは拡張子が.mapとなっているファイルのことで、コンパイルされた難読化したコードを元のソースコードファイルから参照できるようにするマッピングの目的があります。 javascriptやcssなどは、SassやTypeScriptといった拡張メタ言語からコンパイルされたものを使用していることがあります。その場合は圧縮されていたり、コードが読みにくい形になっていたりデバッグをする上でマイナスになります。そこでソースマップを使い、元のファイルを参照することでデバッグが容易になります。ソースマップファイルの404エラー
ブラウザのデベロッパーツールなどでデバッグをしていると、これらソースコードマップファイルの404エラーが表示されることがあります。表示には特に問題がなかったとしても気になりますよね、、
{ "version": 3, "mappings": ";AAAA;;;;;8BAK8B;AAI9B;;8BAE8B; 〜以下省略〜 "sources": ["../scss/sample.scss", 〜以下省略〜 "names": [], "file": "sample.css" }これを対応するファイルと同じ階層に置くと大丈夫です。2番目のコードを削除する方法ですが、こちらはエラーが出ているソースコードマップが対応しているファイルを見てみると、ソースコードマップファイルを参照している記述が見受けられるかと思います。 【sample.css】※一部抜粋
/*# sourceMappingURL=sample.css.map */この部分のコードを削除することでエラーが表示されなくなります。ただし、ソースコードマップファイルとの紐付けがなくなるため、ソースコードマップを使ったデバッグができなくなります。 ソースコードマップファイルの活用方法についてはまた別の機会にまとめていきたいと思います。対象となるのはjsやCSSになるかと思いますが、同じエラーが表示されて困っている場合はぜひお試しください。 (参考) jquery-1.10.2.min.mapが404 Not Found
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories