使用 Azure Artifacts 符號伺服器來源對應安全地偵錯原始程式碼

發行項
11/15/2023

若要在 DevTools 中安全地查看並使用原始開發原始程式碼，而不是網頁伺服器所傳回的已編譯、縮制和配套生產程式碼，您可以使用在 Azure Artifacts 符號伺服器上發佈的來源對應。

來源對應會將已編譯的生產程式碼對應至原始開發來源檔案。接著，在 DevTools 中，您可以查看並使用熟悉的開發來源檔案，而不是編譯的程式碼。若要深入瞭解來源對應以及在 DevTools 中使用來源對應，請參閱將已處理的程式碼對應至原始原始程式碼以進行偵錯。

從 Azure Artifacts 符號伺服器下載您的來源對應，可讓您安全地擷取原始開發原始程式碼，對生產網站進行偵錯。

必要條件：將來源對應發佈至 Azure Artifacts 符號伺服器

若要在 DevTools 中使用來自 Azure Artifacts 符號伺服器的來源對應，必須先發佈到伺服器。

若要瞭解如何發佈來源對應，請參閱將來源對應發佈至 Azure Artifacts 符號伺服器，以安全地偵錯原始程式碼。

步驟 1：在 DevTools 中啟用來源對應

若要確定已在 DevTools 中啟用來源對應：

若要開啟 DevTools，請在 Microsoft Edge 中，以滑鼠右鍵按一下網頁，然後選取 [ 檢查]。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。
在 DevTools 中，按一下 [設定] ([) >[喜好設定]。
確定已選取 [ 啟用 JavaScript 來源對應 ] 核取方塊和 [ 啟用 CSS 來源對應 ] 核取方塊：

步驟 2：將 DevTools 連線到 Azure Artifacts 符號伺服器

DevTools 必須設定為成功擷取您網站的已發佈來源對應。

若要設定 DevTools，您可以建立 Azure Artifacts 符號伺服器連線。連線有兩種類型：Microsoft Entra標識符、最容易使用，以及個人存取權杖。

使用Microsoft Entra識別碼連線到符號伺服器

在 DevTools 中，按一下 [設定] ([符號伺服器]) >。
按一下 [新增符號伺服器聯 機] 以開始建立新的連線。
在 [授權模式] 下拉式清單中，選取 [Microsoft Entra識別碼]。

如果停用 [Microsoft Entra標識符] 選項，請登入 Microsoft Edge。若要深入了解，請參閱登入以跨裝置同步 Microsoft Edge。
在 [Azure DevOps 組織] 底下，按一下 [ 選取]。

您所屬的 DevOps 組織清單隨即出現。
按兩下您要連線的組織，或按一下它，然後按 Enter。
按一下 [新增 ] 以建立連線。
按一下右上方的 [ 關閉 () 按鈕以關閉 [ 設定 ] 面板，然後按一下 [ 重載 DevTools] 按鈕。

使用個人存取權杖連線到符號伺服器

若要使用個人存取權杖連線到符號伺服器 (PAT) ，請先在 Azure DevOps 中產生新的 PAT，然後設定 DevTools。

在 Azure DevOps 中產生新的 PAT

移至來登入您的 Azure DevOps 組織 https://dev.azure.com/{yourorganization} 。
在 Azure DevOps 中，移至[使用者設定>] [個人存取權杖]：

[ 個人存取權杖] 頁面隨即 出現：
按一下 [新增權杖]。 [ 建立新的個人存取權杖 ] 對話方塊隨即開啟：
在 [ 名稱] 文字方塊中，輸入 PAT 的名稱，例如「devtool source maps」。
在 [ 到期] 區段中，輸入 PAT 的到期日。
在 [ 範圍] 區段中 ，按一下 [顯示所有範圍] 展開區段。
向下捲動至 [符號]，然後選取 [ 讀取] 核取方塊。
按一下 [ 建立] 按鈕。 [ 成功！ ] 對話方塊隨即出現：
按一下 [ 複製到剪貼簿] 按鈕以複製 PAT。請務必複製權杖，並將它儲存在安全的位置。為了您的安全性，將不會再次顯示。

若要深入瞭解 PAT，請參閱使用個人存取權杖。

現在已產生新的 PAT。接下來，設定 DevTools。

設定 DevTools

在 DevTools 中，按一下 [設定] ([符號伺服器]) >。
按一下 [新增符號伺服器聯 機] 以開始建立新的連線。
在 [ 授權模式 ] 下拉式清單中，選取 [個人存取權杖]。
在 [ Azure DevOps 組織 ] 文字方塊中，輸入您建立 PAT 的 Azure DevOps 組織。
在 [ 個人存取權杖 ] 文字方塊中，將您的個人存取權杖貼 (PAT) ：
按一下 [新增] 按鈕。建立連線。
按一下右上方的 [ 關閉 () 按鈕以關閉 [ 設定 ] 面板，然後按一下 [ 重載 DevTools] 按鈕。

步驟 3：在 DevTools 中擷取原始程式碼

執行上述安裝步驟之後，當您使用 DevTools 來處理已發佈符號的網站組建時，您現在可以看到原始原始程式碼，而不是轉換的程式碼。

在 主控台 工具中，從記錄訊息到來源檔案的連結會移至原始檔案，而不是編譯的檔案。
在 [來源 ] 工具中逐步執行程式碼時，原始檔案會列在左側的 [ 導覽器 ] 窗格中。
在[來源] 工具中，出現在 [調試程式] 窗格的[呼叫堆疊] 中的原始程式檔連結會開啟原始程式檔。

連線到多個 Azure Artifacts 符號伺服器

若要從多個 Azure DevOps 組織擷取來源圖，請設定 DevTools 以連線到多個 Azure Artifacts 符號伺服器，如下所示：

在 DevTools 中，按一下 [設定] ([符號伺服器]) >。
按一下 [新增符號伺服器聯 機] 以建立其他連線。
設定新的連線。請參閱使用Microsoft Entra識別碼連線到符號伺服器或使用個人存取權杖連線到符號伺服器。

若要編輯或移除現有的連線，請將滑鼠停留在連線上方，然後按一下 [符號伺服器設定] 頁面上連線旁邊的 [編輯 () 或[移除 () ] 按鈕：

連接專案上的 [符號伺服器設定] 頁面上的 [移除和編輯] 按鈕

依 URL 篩選來源對應

若要決定要透過 Azure Artifacts 符號伺服器連線下載的來源對應，請使用 篩選行為 功能。

在 DevTools 中，按一下 [設定] ([符號伺服器]) >。
建立新的連線或編輯現有的連線。
在 [ 篩選行為 ] 下拉式清單中，選取 [ 排除清單 ] 以排除特定的來源對應，或選取 [ 包含清單 ] 只包含特定的來源對應。
在下拉式清單下方的文字方塊中，針對您想要排除或包含的來源對應，每行輸入一個 URL：
按一下 [ 儲存] 按鈕。

支援下列萬用字元：

萬用字元意義

? 比對單一字元。

* 比對一或多個任何字元。

如果您選取 [排除清單]，DevTools 會嘗試查閱腳本的任何來源對應，但 URL 符合清單中的其中一個專案除外。

如果您選取 [包含清單]，DevTools 只會嘗試查閱來源對應，以尋找具有符合清單中其中一個專案之 URL 的腳本。例如，假設您在 [篩選行為] 下拉式清單中選取 [包含清單]，然後在 [篩選行為] 文字方塊中輸入下列內容：
```
https://cdn.contoso.com/*
https://packages.contoso.com/*
```
在此範例中，DevTools 只會嘗試解析符合這兩個 URL 模式的來源對應，而且不會嘗試載入其他腳本的來源對應。

萬用字元	意義
?	比對單一字元。
*	比對一或多個任何字元。

檢查已下載來源對應的狀態

您可以使用來源對應監視工具來檢查 來源對應 的狀態。

若要深入瞭解 來源對應監視 工具，以及它如何協助監視哪些原始程式檔要求的來源對應，以及是否已載入這些來源對應，請參閱來源對應監視工具。

另請參閱

將來源對應發佈至 Azure Artifacts 符號伺服器，以安全地偵錯原始程式碼
將已處理的程式碼對應至原始原始程式碼，以進行偵錯
來源對應監視工具
在Microsoft Edge 115 (DevTools 的新功能中，將 DevTools連線到 Azure Artifacts 符號伺服器的改善) 。

共用方式為