ソース マップ モニター ツール

  • [アーティクル]

ソース マップ モニター ツールを使用して、Web ページでソース マップの読み込みを要求したソース ファイルと、ソース マップが読み込まれたかどうかを監視します。 このツールは、Web ページでソース マップを使用して、再処理されたコードを元のソース コードにマップする場合に便利です。 ソース マッピング を使用すると、サーバーから返されるコードの再処理されたバージョンを操作する必要なく、元のソース コードを確認してデバッグできます。

この機能を試すには:

  1. 新しいタブまたはウィンドウで、「 処理されたコードを元のソース コードにマップする」の手順に従ってデバッグを行い、次に進みます。

  2. デモが開くポップアップ ダイアログを閉じます。

  3. [ソース] ツールの [ページ] タブで、デモで作成したファイル (Coffee2.jsなど) を選択します。

  4. DevTools のメイン ツール バーで、[その他のツール] ([その他のツール] アイコン) ボタンをクリックし、[ソース マップ モニター] ツールを選択します。

    ソース マップ モニター ツール

除外と包含

Source Maps Monitor ツールは、DevTools 設定>シンボル サーバー > フィルター動作のフィルター設定で構成されているように、どの URL 参照が行われたか、試行されていないかを示します。 例:

  1. Web ページを右クリックし、[ 検査] を選択します。 DevTools が開きます。

  2. [ 設定 ] (DevTools の [設定] アイコン) ボタンをクリックし、[ シンボル サーバー] を選択します。

  3. [ フィルター動作 ] ドロップダウン リストで、[ 除外リスト ] を選択します (または、[ 包含リスト] を選択します)。 [フィルター動作] ドロップダウン リストが表示されない場合は、次の記事の説明に従ってシンボル サーバーの設定を設定します。

  4. [ フィルター動作 ] テキスト ボックスに、除外する (または含める) ワイルドカードを含むドメインを入力します。次のようにします。 https://ryanseddon.com/*

  5. DevTools の設定を閉じます。

  6. DevTools で、 ソース マップ モニター ツールを選択します。

    ソース マップ モニター ツールは、除外された (または含まれている) ソース マップ URL 参照試行を示すようになりました。

Source Maps Monitor ツールは、ソース マップの URL 参照が試行されたことを示します

関連項目