Azure Artifacts シンボル サーバー ソース マップを使用して元のコードを安全にデバッグする

  • [アーティクル]

Web サーバーから返されるコンパイル済み、縮小済み、バンドルされた運用コードではなく、DevTools で元の開発ソース コードを安全に確認して操作するには、Azure Artifacts シンボル サーバーで発行されたソース マップを使用できます。

ソース マップは、コンパイル済みの運用コードを元の開発ソース ファイルにマップします。 DevTools では、コンパイルされたコードではなく、使い慣れた開発ソース ファイルを表示して操作できます。 DevTools でのソース マッピングとソース マップの使用の詳細については、「 デバッグのために、処理されたコードを元のソース コードにマップする」を参照してください。

Azure Artifacts シンボル サーバーからソース マップをダウンロードすると、元の開発ソース コードを安全に取得することで、運用 Web サイトをデバッグできます。

前提条件: ソース マップを Azure Artifacts シンボル サーバーに発行する

DevTools で Azure Artifacts シンボル サーバーのソース マップを使用するには、最初にサーバーに発行する必要があります。

ソース マップを発行する方法については、「ソース マップを Azure Artifacts シンボル サーバーに発行して元のコードを安全にデバッグする」を参照してください。

手順 1: DevTools でソース マップを有効にする

DevTools でソース マップが有効になっていることを確認するには、

  1. DevTools を開くには、Microsoft Edge で Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。

  2. DevTools で、[ 設定] ([設定] アイコン) >[基本設定] をクリックします。

  3. [JavaScript ソース マップを有効にする] チェック ボックスと [CSS ソース マップを有効にする] チェック ボックスがオンになっていることを確認します。

    DevTools 設定の [基本設定] 構成画面

手順 2: DevTools を Azure Artifacts シンボル サーバーに接続する

Web サイトの発行済みソース マップを正常に取得するように DevTools を構成する必要があります。

DevTools を構成するには、Azure Artifacts シンボル サーバー接続を作成します。 接続には、最も使い方が簡単なMicrosoft Entra ID と個人用アクセス トークンの 2 種類があります。

Microsoft Entra ID を使用してシンボル サーバーに接続する

  1. DevTools で、[ 設定] ([設定] アイコン) >[シンボル サーバー] をクリックします。

  2. [ シンボル サーバー接続の追加] をクリックして、新しい接続の作成を開始します。

  3. [承認モード] ドロップダウン リストで、[Microsoft Entra ID] を選択します。

    [Microsoft Entra ID] オプションが無効になっている場合は、Microsoft Edge にサインインします。 詳細については、「サインインしてデバイス間をMicrosoft Edge で同期する」をご参照ください。

  4. [Azure DevOps organization] で、[選択] をクリックします。

    DevTools のシンボル サーバー設定画面

    メンバーである DevOps 組織の一覧が表示されます。

  5. 接続するorganizationをダブルクリックするか、クリックして Enter キーを押します。

  6. [ 追加] をクリックして接続を作成します。

    DevTools の [シンボル サーバー] 設定画面に、[追加] ボタンが表示され、新しい接続が作成されます

  7. 右上の [閉じる ] ([設定を閉じる] アイコン) ボタンをクリックして [設定] パネルを閉じ、[ DevTools の再読み込み ] ボタンをクリックします。

個人用アクセス トークンを使用してシンボル サーバーに接続する

個人用アクセス トークン (PAT) を使用してシンボル サーバーに接続するには、まず Azure DevOps で新しい PAT を生成してから、DevTools を構成します。

Azure DevOps で新しい PAT を生成する

  1. に移動して、Azure DevOps organizationにサインインしますhttps://dev.azure.com/{yourorganization}。

  2. Azure DevOps で、[ ユーザー設定>] [個人用アクセス トークン] の順に移動します。

    Azure DevOps の [ユーザー設定] メニューと [個人用アクセス トークン] コマンド

    [ 個人用アクセス トークン] ページが 表示されます。

    Azure DevOps の [個人用アクセス トークン] ページ

  3. [ 新しいトークン] をクリックします。 [ 新しい個人用アクセス トークンの作成 ] ダイアログが開きます。

    [新しい個人用アクセス トークンの作成] ダイアログで、[シンボル] の [読み取り] スコープが選択されています

  4. [ 名前 ] テキスト ボックスに、PAT の名前 ("devtool ソース マップ" など) を入力します。

  5. [ 有効期限 ] セクションで、PAT の有効期限を入力します。

  6. [ スコープ ] セクションで、[ すべてのスコープを表示 ] をクリックしてセクションを展開します。

  7. [シンボル] まで下にスクロールし、[読み取り] チェック ボックスをオンにします。

  8. [作成] ボタンをクリックします。 [成功] ダイアログが表示されます。

    コピーする PAT を含む [Success!] ダイアログ

  9. [ クリップボードにコピー ] ボタンをクリックして PAT をコピーします。 トークンをコピーし、セキュリティで保護された場所に保存してください。 セキュリティのために、再び表示されることはありません。

PAT の詳細については、「 個人用アクセス トークンを使用する」を参照してください。

新しい PAT が生成されました。 次に、DevTools を構成します。

DevTools の構成

  1. DevTools で、[ 設定] ([設定] アイコン) >[シンボル サーバー] をクリックします。

  2. [ シンボル サーバー接続の追加] をクリックして、新しい接続の作成を開始します。

  3. [ 承認モード ] ドロップダウン リストで、[ 個人用アクセス トークン] を選択します。

  4. [Azure DevOps organization] テキスト ボックスに、PAT を作成した Azure DevOps organizationを入力します。

  5. [ 個人用アクセス トークン ] テキスト ボックスに、個人用アクセス トークン (PAT) を貼り付けます。

    DevTools 設定のシンボル サーバー構成画面。新しい PAT 接続の作成に必要なフィールドが表示されます

  6. [追加] ボタンをクリックします。 接続が作成されます。

  7. 右上の [閉じる ] ([設定を閉じる] アイコン) ボタンをクリックして [設定] パネルを閉じ、[ DevTools の再読み込み ] ボタンをクリックします。

手順 3: DevTools で元のコードを取得する

上記のセットアップ手順を実行した後、DevTools を使用して、シンボルが発行された Web サイトのビルドで作業すると、変換されたコードではなく、元のソース コードが表示されるようになります。

  • コンソール ツールでは、ログ メッセージからソース ファイルへのリンクは、コンパイルされたファイルではなく元のファイルに移動します。

  • ソース ツールでコードをステップ実行すると、左側の [ナビゲーター] ウィンドウに元のファイルが一覧表示されます。

  • [ソース] ツールで、[デバッガー] ウィンドウの [呼び出し履歴] に表示されるソース ファイルへのリンクによって、元のソース ファイルが開きます。

複数の Azure Artifacts シンボル サーバーに接続する

複数の Azure DevOps 組織からソースマップをフェッチするには、次のように、複数の Azure Artifacts シンボル サーバーに接続するように DevTools を構成します。

  1. DevTools で、[ 設定] ([設定] アイコン) >[シンボル サーバー] をクリックします。

  2. [ シンボル サーバー接続の追加] をクリックして、追加の接続を作成します。

  3. 新しい接続を構成します。 「Microsoft Entra ID を使用してシンボル サーバーに接続する」または「個人用アクセス トークンを使用してシンボル サーバーに接続する」を参照してください。

既存の接続を編集または削除するには、接続にカーソルを合わせて、[シンボル サーバーの設定] ページで接続の横にある [編集] (編集アイコン) または [削除] (削除アイコン) ボタンをクリックします。

[シンボル サーバーの設定] ページの接続項目の [削除] ボタンと [編集] ボタン

URL でソース マップをフィルター処理する

Azure Artifacts シンボル サーバー接続を介してダウンロードするソース マップを決定するには、 フィルター動作 機能を使用します。

  1. DevTools で、[ 設定] ([設定] アイコン) >[シンボル サーバー] をクリックします。

  2. 新しい接続を作成するか、既存の接続を編集します。

  3. [ フィルター動作 ] ドロップダウン リストで、特定のソース マップを除外する 場合は [除外リスト] を選択し、特定のソース マップのみを含 める場合は [包含リスト] を選択します。

  4. ドロップダウン リストの下のテキスト ボックスに、除外または含めるソース マップの 1 行に 1 つの URL を入力します。

    シンボル サーバー接続の編集画面での包含リストの設定

  5. [ 保存 ] ボタンをクリックします。

    次のワイルドカードがサポートされています。

    ワイルドカード 意味
    ? 1 文字に一致します。
    * 任意の文字の 1 つ以上に一致します。

    [除外リスト] を選択すると、DevTools は、リスト内のいずれかのエントリに一致する URL を持つスクリプトを除き、スクリプトのソース マップの検索を試みます。

    [包含リスト] を選択した場合、DevTools は、リスト内のいずれかのエントリに一致する URL を持つスクリプトのソース マップの検索のみを試みます。 たとえば、[フィルター動作] ドロップダウン リストで [包含リスト] を選択し、[フィルター動作] テキスト ボックスに次のように入力するとします。

    https://cdn.contoso.com/*
https://packages.contoso.com/*

    この例では、DevTools は、これら 2 つの URL パターンに一致するソース マップの解決のみを試み、他のスクリプトのソース マップの読み込みを試みません。

ダウンロードしたソース マップの状態を確認する

ソース マップの状態をチェックするには、[ソース マップ モニター] ツールを使用します。

ソース マップ モニター ツールの詳細と、ソース マップを要求したソース ファイルの監視に役立つ方法、およびソース マップが読み込まれたかどうかを確認するには、「ソース マップ モニター ツール」を参照してください。

関連項目