クライアント側のコードは、結合、圧縮、コンパイルした後でも、可読性とデバッグ可能な状態を維持してください。ソースマップを使用すると、[ソース] パネルでソースコードをコンパイル済みコードにマッピングできます。
プリプロセッサのスタートガイド
プリプロセッサのソースマップにより、DevTools は圧縮されたファイルに加えて元のファイルも読み込みます。
圧縮されたコードは Chrome によって実行されますが、[Sources] パネルには作成したコードが表示されます。 ソースファイルにブレークポイントを設定し、コードをステップスルーすることができ、すべてのエラー、ログ、ブレークポイントが自動的にマッピングされます。
これにより、開発サーバーから提供され、ブラウザで実行されるコードではなく、記述したコードをデバッグしているように見えます。
[ソース] パネルでソースマップを使用するには:
- ソースマップを生成できるプリプロセッサのみを使用する。
- ウェブサーバーがソースマップを提供できることを確認します。
サポートされているプリプロセッサを使用する
ソースマップと組み合わせて使用される一般的なプリプロセッサには、次のようなものがあります(ただし、これらに限定されません)。
拡張リストについては、ソースマップ: 言語、ツール、その他の情報をご覧ください。
[設定] でソースマップを有効にしてください
[設定] > [設定] > [ソース] で、 [JavaScript ソースマップを有効にする] をオンにします。
ソースマップが正常に読み込まれたかどうかを確認する
デベロッパー リソース: ソースマップを手動で表示、読み込むをご覧ください。
ソースマップによるデバッグ
ソースマップを ready と enabled にすると、次のことができます。
- [ソース] パネルでウェブサイトのソースを開きます。
自分が作成したコードだけに注目できるように、作成済みファイルとデプロイ済みファイルをファイルツリーでグループ化します。次に、 の [作成済み] セクションを開き、元のソースファイルを [エディタ] で開きます。
通常どおりにブレークポイントを設定します。(例: ログポイント)。コードを実行します。
[エディタ] の下部にあるステータスバーに、デプロイされたファイルへのリンクが表示されます。デプロイされた CSS ファイルについても同様です。
[Console] ドロワーを開きます。この例では、ログポイントのメッセージの横に、デプロイされたファイルではなく、元のファイルへのリンクがコンソールに表示されます。
ブレークポイントのタイプを通常のタイプに変更し、コードを再度実行します。今回は実行が一時停止します。
[Call Stack] ペインには、デプロイされたファイルではなく、元のファイルの名前が表示されます。
エディタの下部にあるステータスバーで、デプロイされたファイルへのリンクをクリックします。[ソース] パネルに、対応するファイルが表示されます。
デプロイされたファイルを開くと、//# sourceMappingURL
コメントと、関連する元のファイルが見つかるかどうかが DevTools から通知されます。
デプロイされたファイルが Editor によって自動的にプリティ プリントされます。実際には、//# sourceMappingURL
コメントを除くすべてのコードが 1 行に含まれています。
#sourceURL
を使用して eval()
呼び出しに名前を付ける
#sourceURL
を使用すると、eval()
呼び出しを処理する際のデバッグを簡素化できます。このヘルパーは、//# sourceMappingURL
プロパティとよく似ています。詳しくは、ソースマップ V3 の仕様をご覧ください。
//# sourceURL=/path/to/source.file
コメントは、eval()
を使用するときにソースファイルを探すようブラウザに指示します。これにより、評価やインライン スクリプト、スタイルに名前を付けることができます。
こちらのデモページでテストします。
- DevTools を開き、[ソース] パネルに移動します。
- そのページの [Name your code:] 入力フィールドに任意のファイル名を入力します。
- [Compile] ボタンをクリックします。CoffeeScript ソースからの評価された合計とともにアラートが表示されます。
- [Page] ペインのファイルツリーで、入力したカスタム ファイル名で新しいファイルを開きます。これにはコンパイル済み JavaScript コードが含まれており、その中に
// #sourceURL
コメントがあり、ソースファイルの元の名前が付けられています。 - ソースファイルを開くには、[エディタ] のステータスバーのリンクをクリックします。