クライアント側のコードを結合、圧縮、またはコンパイルした後も、読みやすく、デバッグ可能な状態にしておきます。コンパイルしたコードにソースコードをマッピングするには、ソースマップを使用します。
TL;DR
- 圧縮されたコードをソースコードにマッピングするには、ソースマップを使用します。これにより、コンパイルされたコードを元のソースで参照し、デバッグすることができます。
- ソースマップを生成できるプリプロセッサのみを使用します。
- ウェブサーバーでソースマップを提供できることを確認します。
プリプロセッサの概要
この記事では、DevTools の [Sources] パネルで JavaScript ソースマップを使用する方法について説明します。プリプロセッサとは何か、プリプロセッサがどのように役立つのか、ソースマップがどのように機能するのかといった基本的な概要については、CSS と JS プリプロセッサを設定するをご覧ください。
サポートされているプリプロセッサの使用
ソースマップ作成機能のあるミニファイアを使用する必要があります。一般的なオプションについては、プリプロセッサのサポート セクションをご覧ください。さらに詳しくお知りになりたい場合は、Source maps: languages, tools and other info の Wiki ページをご覧ください。
次のようなプリプロセッサが、ソースマップと組み合わせてよく使われます。
- トランスパイラ（Babel、Traceur）
- コンパイラー（Closure Compiler、TypeScript、CoffeeScript、Dart）
- ミニファイア（UglifyJS）
DevTools の [Sources] パネルでのソースマップ
プリプロセッサのソースマップによって、DevTools では、圧縮されたコードに加えて元のファイルが読み込まれます。その後、元のファイルを使用してブレークポイントを設定し、コードをステップ実行します。その間、Chrome は実際には、圧縮されたコードを実行しています。そのため、本番環境で開発サイトを実行しているように感じられます。
DevTools でソースマップを実行すると、JavaScript がコンパイルされていないことがわかり、参照されている個々の JavaScript ファイルをすべて確認できます。ソース マッピングが使用されていますが、実際には、コンパイルされたコードが背後で実行されます。デバッグのために、エラー、ログ、ブレークポイントが開発コードにマッピングされます。その結果、本番環境で開発サイトを実行しているように感じられます。
設定でのソースマップの有効化
ソースマップはデフォルトで有効になっています（Chrome 39 以降）。ただし、ソースマップを再確認する場合や有効にする場合は、まず、DevTools を開き、設定の歯車アイコン 
をクリックします。[Sources] で、[Enable JavaScript Source Maps] をオンにします。[Enable CSS Source Maps] をオンにすることもできます。
ソースマップを使用したデバッグ
コードをデバッグする際、ソースマップが有効になっていると、ソースマップは 2 か所に表示されます。
- コンソール（ソースへのリンクは、生成されたファイルではなく、元のファイルです）
- コードをステップ実行するとき（コールスタック内のリンクをクリックすると、元のソースファイルが開きます）
@sourceURL と displayName
ソースマップの仕様に即していませんが、@sourceURL を使用すると、eval を使用する場合に開発がはるかに容易になります。このヘルパーは //# sourceMappingURL プロパティによく似ており、実際にはソースマップ V3 の仕様に記載されています。
評価されるコードに次のような特殊なコメントを挿入することによって、よりわかりやすい名前として DevTools に表示されるように、eval や、インラインのスクリプト、スタイルに名前を付けることができます。
//# sourceURL=source.coffee
このデモに移動し、次の手順を実行します。
- DevTools を開き、[Sources] パネルに移動します。
- [_Name your code:] 入力項目にファイル名を入力します。
- [compile] ボタンをクリックします。
- CoffeeScript ソースから評価された合計とともにアラートが表示されます。
[Sources] サブパネルを展開すると、先ほど入力したカスタム ファイル名を持つ新しいファイルが表示されます。そのファイルをダブルクリックして表示すると、元のソースについてコンパイルされた JavaScript が含まれています。ただし、最後の行には、元のソースファイルの名前を示す // @sourceURL コメントが表示されます。これは、言語の抽象化を使用している場合のデバッグに役立ちます。
