Source Mapを使うと、SassやLess、TypeScriptなどで、コンパイルされ難読化されたコードが、オリジナルファイルの何行目に書かれているかを確認することができます。
例では ID: mainに設定したスタイルがオリジナルファイルの「style.scss」の7行目に書かれていることが分かるかと思います。
しかしCPIサーバーではSource Mapが正しく動作しません。
設定の前に注意事項
1)
CPIサーバーで、Source Mapを使うためには .htaccessの設定変更が必要です。
.htaccessファイルは記述を間違えますとWebサイトが停止していまう恐れがあります。必ずテスト環境で試してから、本番に反映してください。
2)
この設定を反映するとイメージマップが使用できなくなります。Source Mapと、イメージマップを両方使いたい場合は、下記の行を「.htaccess」に追加し、イメージマップで使っているファイルの拡張子を変更してください。
例)
- AddHandler imap-file imagemap
ファイル名例)
image.imagemap
設定方法
CPIサーバーでSource Mapを使う場合は、「.htaccess」に下記の行を追加する必要があります。
(.htaccessファイルが無い場合は、新規作成してください)
- RemoveHandler map
設定は以上です。上記設定を反映しても、Source Mapが正しく表示されない場合は、ブラウザのキャッシュを一度削除してください。