Web

Source Map に関する情報

投稿日:2019年4月19日 更新日:

1. Source Map とは?

従来の問題点

例えば Webサイトで JavaScript を使う場合、

  • CoffeeScript」で書いたコードを「JavaScript」のコードに変換する。
  • JavaScript (ES2015(ES6))」で書いたコードを「JavaScript (ES5)」のコードに変換する。
  • JavaScript」のコードを「圧縮」する。

といった 変換処理 を行い、その結果生成されたファイルを Webサイトで使うことが多いです(複数の変換を行うこともあります)。

ウェブブラウザの開発者ツールを使うと、今見ているWebページで実行されている JavaScript コードをデバッグ(実行されているコードをリアルタイムで追っていく)することができますが、これはあくまで変換した後のコードに対するデバッグであるので非常に見にくいことが多く、特に圧縮されている場合であればそもそも満足にコードを追うことすらできません。このようなデバッグ操作は、変換前のコード に対して行いたいのです。

ソースマップ(Source Map)

これを実現するためのファイルが、ソースマップ (Source Map) です。

これは「元のコード」と「変換後のコード」との対応関係が記述されたファイルになります。

Webブラウザはこのファイルに記述された情報を使って、元のコードを追うことが可能になるのです。

HTMLファイルからは、main.min.js ファイルが読み込まれているのですが…
画面1. HTMLファイルからは、main.min.js ファイルが読み込まれているのですが…
デバッグには、変換前の main.js ファイルが使用されます
画面2. デバッグには、変換前の main.js ファイルが使用されます

ソースマップに関連するファイルを整理する

ソースマップに関連するファイルを表にします。

 
No. ファイル 説明
1 変換前のファイル
  • 基本的には、Web経由でアクセスできるところに配置しないとWebブラウザの開発者ツールから利用することができない。
  • Chrome の Workspace 機能を使えば、ローカルに配置していても利用させることができる。(Chrome の開発者ツールは、ソースマップ内で指定された変換前ファイルとローカルのファイルを自動で紐づけてくれるが、この紐付けの条件などについては詳しいドキュメントがないようだ)
2 ソースマップ
  • 変換後のファイル末尾に ソースマップファイルのファイルパス(もしくはURL)が記述されるので、Webブラウザはそこからソースマップの配置場所を知り取得することができる(画面3 参照)。
  • 主な内容は、「変換後ファイルのパス」と「変換前コードと変換後コードの対応情報」である。
  • 変換処理を行うツールが、ソースマップを作成する(通常はオプションで作成の指示を行う)。
  • 仕様:Source Map Revision 3 Proposal
3 変換後のファイル
  • Webページ(HTML)内から読み込ませているファイルで、実際は CSS ファイルもしくは JavaScriptファイル。
  • 変換ツールによって生成されたファイルである。
  • 変換された内容に加えて、末尾に「ソースマップ」ファイルのファイルパス(もしくはURL)が追記されている(画面3 参照)。
変換後ファイルの末尾にはソースマップのファイルパス(URL)が記述される
画面3. 変換後ファイルの末尾にはソースマップのファイルパス(URL)が記述される

ソースマップの動作

以下のような動作になります。

  1. Webブラウザで Webページにアクセスする。
  2. Webブラウザは、HTML内で指定されている JavaScrip ファイルを読み込む。
  3. この JavaScriptファイル末尾には、ソースマップのファイルパス(もしくはURL)が記述されているので、Webブラウザはソースマップを取得して読み込む。
  4. ソースマップ内には「変換前のファイルのファイルパス(もしくはURL)」と、「変換前コードと変換後コードの詳細な対応情報」が記述されているので、Webブラウザはそれらの情報を取得する。
  5. Webブラウザの開発者ツールで JavaScript コードをデバッグする際、変換後のコード位置とそれに対応する変換後のコード位置を参照することで、変換後のコードを利用(表示)することができる。

ソースマップは誰が作るのか?

ソースマップは、変換処理を行うツールが変換を行う際に同時に作成するのが普通です。
(変換する箇所の対応を記録していけば作成できるので)

例: webpack, UglifyJS, Sass, etc…

2. Chrome ブラウザで Source Map を有効にする

Chrome ではデフォルトで Source Map 機能が有効になっていると思いますが、心配な場合は以下の手順で有効にしてください。

(1) Ctrl + Shift + I キーを押して、開発者ツールを開きます。

(2) 設定アイコンを押して、[Settings] を選択します。

[Settings] を選択します
画面4. [Settings] を選択します

(3) [Preferences] タブを開き、[Enable JavaScript source maps] と [Enable CSS source maps] にチェックを入れます。

Source Map を有効にする
画面5. Source Map を有効にする

3. Source Map でドキュメントルートにないファイルを参照する

ソースマップを利用する場合、変換前のファイルは Webでアクセスできるようにしておくのが普通だと思います。

しかし以下のような状況だと、なかなかそうはいきません。

  • 公開されているWebサーバーでソースマップを使いたいが、変換前のファイルを公開できるところに置きたくない。
  • 変換前のファイルが、ドキュメントルート内にないので Webアクセスできない。

このような場合は、主に2つの対応方法があります。

方法1

アクセスが限定された環境(例えば ローカル環境)にたてた Webサーバーで変換前ファイルにアクセスできるようにしておき、ソースマップ内では http://ドメイン/.. を使った URL で変換前ファイルパスを指定する。

方法2

Chrome の Workspace 機能を使って、ローカル上にある変換前ファイル(を含んだフォルダー)を Chrome に登録し、ソースマップ内で指定される変換前ファイルパスと紐付ける。
※ ソースマップ内の変換前ファイルパスは、ある程度適当でよい。Chrome が自動的に紐付けてくれる。

Chrome の Workspace 機能を使う方法(方法2)についての補足

Chrome にローカルフォルダーを追加する

Chrome からアクセスを可能させたいフォルダーを追加します。

(1) 開発者ツールの [Sources]パネル – [Filesystem] を開き、[+ Add folder to workspace] をクリックします。

(2) Chrome にアクセスさせたいフォルダーを指定します。

(3) Chrome からこのフォルダーへのアクセスを許可してよいか聞いてきますので、[許可] を選択します。

(4) 下のエリアに、追加されたフォルダーがツリー表示されます。

ローカルのフォルダーを追加する
画面6. ローカルのフォルダーを追加する

Chrome が自動的に Web側のファイルとローカル側のファイルを紐付けます

Chrome が自動的に、Web側のファイルとローカル側のファイルを紐付けするのですが、紐付けする条件についての仕様がよく分かりません(以前は手動で紐付けることができました)。

この作業の手順はおおよそ以下になりますが、3 か 4 のところで紐付けが行われると思います。

  1. 目的のWebサイトにアクセスする
  2. ローカルのフォルダーを Chrome に追加する
  3. 開発者ツールを一旦閉じ、再度開く
  4. Webサイトを再読込する

紐付けられると、開発者ツールの [Sources]パネル内などで該当するファイルに 緑のマークが表示されます。
なかなか紐付けされない場合は、「開発者ツールを閉じて開く」や「Webサイトをリロード」を何度か試して下さい。

ソースマップ内からの変換前ファイルパスはオレンジ色で表示されます
画面7. ソースマップ内からの変換前ファイルパスはオレンジ色で表示されます

紐付けの条件?

先程も書いたように、「Web側のどのファイルとローカル側のどのファイルが紐付けられるのか?」というのがイマイチ分かりません。このあたりについて同じようなことを指摘しているページがあったので以下にリンクを貼っておきます。

また、Webサーバーをローカル上にたてている場合は良いのですが、リモート環境にあるWebサーバーの場合、ローカル側のファイルとうまく紐づけしてくれません(私のやり方が悪いかもしれませんが)。開発用の機能ということで、意図的にこのような仕様になっているのかもしれません。

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

cron-job.org を利用して特定のURLに定期的にアクセスさせる

cron-job.org というサービスの利用手順について説明します。

HTTPレスポンスヘッダとブラウザキャッシュの関係を調査

目次1. はじめに2. 使用したツールWebサーバー側クライアント側3. 使用する HTML (PHP) ファイル4. 実験パターン1HTML (PHP)のヘッダ出力部分1回目のアクセス2回目のアクセ …

Chrome

リソースの優先度によって同時にダウンロードされるかが決まる(Chrome)

リソースの優先度によって同時にダウンロードされるかが決まる(Chrome)。

DokuWiki

DokuWiki が最新版なのに upgrade now! が表示される場合の対処法

目次1. DokuWiki が最新版なのに upgrade now! が表示される2. 対処方法その13. 対処方法その24. おわりに参考 1. DokuWiki が最新版なのに upgrade n …

web development

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

HTTP Response Header である COEP, COOP, CORP, CORS についてのメモです。