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