ソースマップを使用してデプロイするのではなく、オリジナル コードをデバッグする

Meggin Kearney 氏
Meggin Kearney
Paul Bakaus 氏
ソフィア・エメリアノバ
Sofia Emelianova
GitHub

クライアント側のコードは、結合、圧縮、コンパイルした後でも、可読性とデバッグ可能な状態を維持してください。ソースマップを使用すると、[ソース] パネルでソースコードをコンパイル済みコードにマッピングできます。

プリプロセッサのスタートガイド

プリプロセッサのソースマップにより、DevTools は圧縮されたファイルに加えて元のファイルも読み込みます。

圧縮されたコードは Chrome によって実行されますが、[Sources] パネルには作成したコードが表示されます。 ソースファイルにブレークポイントを設定し、コードをステップスルーすることができ、すべてのエラー、ログ、ブレークポイントが自動的にマッピングされます。

これにより、開発サーバーから提供され、ブラウザで実行されるコードではなく、記述したコードをデバッグしているように見えます。

[ソース] パネルでソースマップを使用するには:

  • ソースマップを生成できるプリプロセッサのみを使用する。
  • ウェブサーバーがソースマップを提供できることを確認します。

サポートされているプリプロセッサを使用する

ソースマップと組み合わせて使用される一般的なプリプロセッサには、次のようなものがあります（ただし、これらに限定されません）。

拡張リストについては、ソースマップ: 言語、ツール、その他の情報をご覧ください。

[設定] でソースマップを有効にしてください

設定] の順にタップします。 [設定] > [設定] > [ソース] で、チェックボックス。 [JavaScript ソースマップを有効にする] をオンにします。

ソースマップが正常に読み込まれたかどうかを確認する

デベロッパー リソース: ソースマップを手動で表示、読み込むをご覧ください。

ソースマップによるデバッグ

ソースマップを ready と enabled にすると、次のことができます。

  1. [ソース] パネルでウェブサイトのソースを開きます。

  2. 自分が作成したコードだけに注目できるように、作成済みファイルとデプロイ済みファイルをファイルツリーでグループ化します。次に、作成済み。 の [作成済み] セクションを開き、元のソースファイルを [エディタ] で開きます。

    [作成済み] セクションで開いた元のファイル。

  3. 通常どおりにブレークポイントを設定します。（例: ログポイント）。コードを実行します。

    作成済みファイルに設定されているログポイント。

  4. [エディタ] の下部にあるステータスバーに、デプロイされたファイルへのリンクが表示されます。デプロイされた CSS ファイルについても同様です。

    デプロイされた CSS ファイルへのリンク（ステータスバー）。

  5. [Console] ドロワーを開きます。この例では、ログポイントのメッセージの横に、デプロイされたファイルではなく、元のファイルへのリンクがコンソールに表示されます。

    元のファイルへのリンクを含むコンソール メッセージ。

  6. ブレークポイントのタイプを通常のタイプに変更し、コードを再度実行します。今回は実行が一時停止します。

    通常のブレークポイントで実行が一時停止する。

    [Call Stack] ペインには、デプロイされたファイルではなく、元のファイルの名前が表示されます。

  7. エディタの下部にあるステータスバーで、デプロイされたファイルへのリンクをクリックします。[ソース] パネルに、対応するファイルが表示されます。

sourceMappingURL コメントを含むデプロイ ファイル。

デプロイされたファイルを開くと、//# sourceMappingURL コメントと、関連する元のファイルが見つかるかどうかが DevTools から通知されます。

デプロイされたファイルが Editor によって自動的にプリティ プリントされます。実際には、//# sourceMappingURL コメントを除くすべてのコードが 1 行に含まれています。

#sourceURL を使用して eval() 呼び出しに名前を付ける

#sourceURL を使用すると、eval() 呼び出しを処理する際のデバッグを簡素化できます。このヘルパーは、//# sourceMappingURL プロパティとよく似ています。詳しくは、ソースマップ V3 の仕様をご覧ください。

//# sourceURL=/path/to/source.file コメントは、eval() を使用するときにソースファイルを探すようブラウザに指示します。これにより、評価やインライン スクリプト、スタイルに名前を付けることができます。

こちらのデモページでテストします。

  1. DevTools を開き、[ソース] パネルに移動します。
  2. そのページの [Name your code:] 入力フィールドに任意のファイル名を入力します。
  3. [Compile] ボタンをクリックします。CoffeeScript ソースからの評価された合計とともにアラートが表示されます。
  4. [Page] ペインのファイルツリーで、入力したカスタム ファイル名で新しいファイルを開きます。これにはコンパイル済み JavaScript コードが含まれており、その中に // #sourceURL コメントがあり、ソースファイルの元の名前が付けられています。
  5. ソースファイルを開くには、[エディタ] のステータスバーのリンクをクリックします。

ステータスバーの sourceURL コメントとソースファイルへのリンク。