Sofia Emelianova
ソースマップを使用すると、コードを組み合わせて圧縮した後でも、パフォーマンスに影響を与えることなく、コードを読みやすくデバッグ可能な状態に保つことができます。
さまざまなトランスパイラー、ミニファイラー、バンドラを使用する場合、デプロイするコードは、作成したコードとは異なります。これらのツールは、ネットワークのパフォーマンスを向上させるために、コードを 1 行に圧縮し、不要な文字を削除し、変数を短くします。
コードに付随するソースマップは、多くのツールで生成できます。
Chrome DevTools で、デプロイされたコードとソースマップの両方を読み取り、通常どおりにコードをデバッグできます（ブレークポイントがある場合も同様です）。
ソースマップの仕組みをより深く理解するには、ソースマップ ビジュアライザをご覧ください。
また、ソースマップには拡張機能を含めることができます。ツールやフレームワークを構築する場合は、それらをサポートすることを検討してください。こちらの事例紹介: DevTools による Angular デバッグの改善をご覧ください。DevTools チームと Angular は、x_google_ignoreList 拡張機能をサポートすることで DevTools でのデバッグ エクスペリエンスを向上させています。
詳しくは、次をご覧ください。