Sofia Emelianova
ソースマップを使用すると、コードを結合して圧縮した後でも、パフォーマンスに影響を与えることなく、コードを読みやすく、デバッグできるようにすることができます。
さまざまなトランスパイラ、圧縮ツール、バンドルツールを使用する場合、デプロイするコードは作成したコードとは異なります。ネットワーク パフォーマンスを向上させるため、これらのツールはコードを 1 行に圧縮し、不要な文字を削除し、変数を短縮します。
多くのツールを使用して、コードにソースマップを生成できます。
Chrome DevTools は、デプロイされたコードとソースマップの両方を読み取り、ブレークポイントがある場合でも、通常どおりにコードをデバッグできます。
ソースマップの動作について詳しくは、ソースマップ ビジュアライザーをご覧ください。
また、ソースマップには拡張機能を含めることができます。ツールやフレームワークを構築する場合は、サポートすることを検討してください。ケーススタディ: DevTools による Angular デバッグの改善をご覧ください。DevTools チームと Angular は、x_google_ignoreList 拡張機能をサポートすることで、DevTools のデバッグ機能を改善しました。
詳しくは、次をご覧ください。