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

Meggin Kearney
Meggin Kearney
Paul Bakaus
Sofia Emelianova
Sofia Emelianova
GitHub

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

プリプロセッサを使ってみる

プリプロセッサからのソースマップを使用すると、DevTools では圧縮されたファイルに加えて、元のファイルも読み込まれます。

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

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

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

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

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

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

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

[設定] でソースマップを有効にする

設定。 [設定] > [設定] > [ソース] で、チェックボックス。 [JavaScript ソースマップを有効にする] がオンになっていることを確認します。

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

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

ソースマップを使用したデバッグ

ソースマップが準備され、有効になっている場合は、次のことができます。

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

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

    [Authored] セクションで開かれた元のファイル。

  3. 通常どおりにブレークポイントを設定します。たとえば、ログポイントです。コードを実行します。

    作成されたファイルに設定されたログポイント。

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

    ステータスバーに表示された、デプロイされた CSS ファイルへのリンク。

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

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

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

    通常のブレークポイントで実行を一時停止しました。

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

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

sourceMappingURL コメント付きのデプロイ済みファイル。

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

デプロイされたファイルがエディタによって自動的にプリティ プリントされます。実際には、//# 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] ペインのファイルツリーで、入力したカスタム ファイル名の新しいファイルを開きます。これには、ソースファイルの元の名前を含む // #sourceURL コメントがあるコンパイル済み JavaScript コードが含まれます。
  5. ソースファイルを開くには、エディタのステータスバーにあるリンクをクリックします。

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