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

Meggin Kearney
Meggin Kearney
Paul Bakaus
Sofia Emelianova
Sofia Emelianova
GitHub

クライアントサイドのコードは、結合、圧縮、コンパイル後も読みやすくデバッグできるようにします。ソースマップを使用して、[ソース] パネルでソースコードをコンパイル済みコードにマッピングします。

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

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

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

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

[ソース] パネルでソースマップを使用する手順は次のとおりです。

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

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

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

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

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

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

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

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

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

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

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

  2. 作成したコードのみに集中するには、作成してデプロイしたファイルをファイルツリーにグループ化します。次に、作成者。 [作成者] セクションを開き、元のソースファイルをエディタで開きます。