DevTools のヒント: ソースマップとは
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
ソースマップを使用すると、コードを結合して圧縮した後でも、パフォーマンスに影響を与えることなく、コードを読みやすく、デバッグできるようにすることができます。
さまざまなトランスパイラ、圧縮ツール、バンドルツールを使用する場合、デプロイするコードは作成したコードとは異なります。ネットワーク パフォーマンスを向上させるため、これらのツールはコードを 1 行に圧縮し、不要な文字を削除し、変数を短縮します。

多くのツールを使用して、コードにソースマップを生成できます。

Chrome DevTools は、デプロイされたコードとソースマップの両方を読み取り、ブレークポイントがある場合でも、通常どおりにコードをデバッグできます。

ソースマップの動作について詳しくは、ソースマップ ビジュアライザーをご覧ください。
また、ソースマップには拡張機能を含めることができます。ツールやフレームワークを構築する場合は、サポートすることを検討してください。ケーススタディ: DevTools による Angular デバッグの改善をご覧ください。DevTools チームと Angular は、x_google_ignoreList
拡張機能をサポートすることで、DevTools のデバッグ機能を改善しました。
詳しくは、次をご覧ください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2023-03-31 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2023-03-31 UTC。"],[],[]]