次の方法で共有

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 で、[設定] ([設定] アイコン) >[Preferences] をクリックします。

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

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

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

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

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

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

  1. DevTools で、[ 設定] ([設定] アイコン) >Symbol Server をクリックします。

  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 の再読み込み ] ボタンをクリックします。

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

Personal Access Token (PAT) を使用してシンボル サーバーに接続するには、まず DevOps Azureで新しい PAT を生成してから、DevTools を構成します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DevTools の構成

  1. DevTools で、[ 設定] ([設定] アイコン) >Symbol Server をクリックします。

  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 で、[ 設定] ([設定] アイコン) >Symbol Server をクリックします。

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

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

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

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

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

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

  1. DevTools で、[ 設定] ([設定] アイコン) >Symbol Server をクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連項目

  • Last updated on