將來源對應發佈至 Azure Artifacts 符號伺服器，以安全地偵錯原始程序代碼

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

將您的來源對應直接發佈至 Web 伺服器，會公開顯示原始原始原始程式碼。 若要避免讓原始原始原始程式碼公開可見，請將您的來源對應發佈至 Azure Artifacts 符號伺服器。 這種方法可讓您在偵錯生產網站時，於 DevTools 中使用您的來源對應，而不需要將來源對應發佈至您的 Web 伺服器。

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

概念

您必須在 Azure Artifacts 符號伺服器上編製來源對應的索引，以便當您偵錯生產網站時，您的來源對應可供 DevTools 使用。

若要這樣做，請在 x_microsoft_symbol_client_key 編譯時將字串屬性新增至您的來源對應。 此屬性包含對應原始程序檔 的 256 位 SHA-2 哈希 小寫十六進位值。

DevTools 接著可以計算每個已編譯檔案的這個哈希，並使用哈希從 Azure Artifacts 符號伺服器擷取正確的來源對應。 為了安全地擷取您的來源對應，DevTools 會使用您提供的個人存取令牌來聯機到 Azure Artifacts 符號伺服器。

步驟 1：產生 Azure DevOps 的個人存取令牌

發佈來源對應至 Azure Artifacts 符號伺服器需要 個人存取令牌 (或 PAT) 。 編譯程式代碼和發佈來源對應時，您的組建系統將會使用這個 PAT。

若要在 Azure DevOps 中產生 PAT：

1. 移至 來登入您的 Azure DevOps 組織 https://dev.azure.com/{yourorganization}。

2. 在 Azure DevOps 中，移至 [使用者設定>] [個人存取令牌]：

   

   [ 個人存取令牌] 頁面隨即 出現：

   

3. 按兩下 [新增令牌]。 [ 建立新的個人存取令牌 ] 對話框隨即開啟：

   

4. 在 [ 名稱] 文本框中，輸入 PAT 的名稱，例如「發佈來源對應」。

5. 在 [ 到期] 區段中，輸入 PAT 的到期日。

6. 在 [ 範圍] 區段中 ，按兩下 [顯示所有範圍] 展開區段。

7. 向下捲動至 [ 符號] 區段，然後選取 [ 讀取 & 寫入 ] 複選框。

8. 按兩下 [ 建立] 按鈕。 [ 成功！ ] 對話框隨即出現：

   

9. 按兩下 [ 複製到剪貼簿] 按鈕以複製 PAT。 請務必複製令牌，並將它儲存在安全的位置。 為了您的安全性，將不會再次顯示。

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

步驟 2：計算腳本的 SHA-256 哈希，並將它附加至您的來源對應

在應用程式建置程式的最後一個步驟中，針對您想要發佈的每個來源對應，您應該計算來源對應所對應 JavaScript 檔案的 SHA-256 哈希，並透過 x_microsoft_symbol_client_key 字串屬性將它附加至來源對應。

建置系統會因應用程式而異，因此沒有明確的單一方式可套用此功能。 但以下是 範例 Webpack 5 外掛程式，如果您使用 Webpack 組態，可以將其新增至其中：

// file: webpack.plugin-symbols.js
// Copyright (C) Microsoft Corporation. All rights reserved.
// Licensed under the BSD 3-clause license.

const crypto = require('crypto');

module.exports = class PrepareSourceMapsForSymbolServerPlugin {
  /**
   * @param {import('webpack').Compiler} compiler
   * @returns {void}
   */
  apply(compiler) {
    compiler.hooks.emit.tap('PrepareSourceMapsForSymbolServerPlugin', (compilation) => {
      const files = Object.keys(compilation.assets);
      const sourceMaps = files.filter(v => v.endsWith('.map'));
      const sourceFilesAndMapsNames = sourceMaps.map(mapFileName => {
        const sourceFileName = mapFileName.substring(0, mapFileName.length - 4);
        return {
          sourceFileName,
          mapFileName,
        };
      });
      const sourceFiles = sourceFilesAndMapsNames.map(({ sourceFileName, mapFileName }) => {
        const sourceFile = compilation.assets[sourceFileName];
        const sourceFileBuffer = sourceFile.buffer();
        const hasher = crypto.createHash('sha256');
        hasher.write(sourceFileBuffer);
        const digest = hasher.digest();
        const sourceFileHash = digest.toString('hex');

        const sourceMapAsset = compilation.assets[mapFileName];
        const sourceMapSource = sourceMapAsset.source();
        const sourceMapContents = JSON.parse(sourceMapSource);
        sourceMapContents['x_microsoft_symbol_client_key'] = sourceFileHash;
        const rewrittenSourceMapContents = JSON.stringify(sourceMapContents);
        if (!sourceMapAsset.isBuffer()) {
          // Not a buffer -- write to the _value property
          sourceMapAsset._value = rewrittenSourceMapContents;
        } else {
          sourceMapAsset._valueAsBuffer = Buffer.from(rewrittenSourceMapContents, 'utf-8');
        }

        return {
          sourceFileName,
          mapFileName,
          sourceFileHash,
          sourceMapAsset,
        };
      });
    });
  }
};

然後，您可以將外掛程式新增至 plugins 組 webpack.config.js 態檔中的 區段：

const PrepareSourceMapsForSymbolServerPlugin = require('./webpack.plugin-symbols.js');

// ...

module.exports = (env, args) => {
  const mode = process.env.NODE_ENV || (env && env.NODE_ENV) || 'production';
  return {
    devtool: mode === 'production' ? 'hidden-source-map' : 'inline-source-map',
    resolve: {
      modules: [
        path.resolve('./node_modules'),
      ],
    },
    output: {
      publicPath: '/',
      filename: '[name].bundle.js',
      chunkFilename: '[name].chunk.js',
    },
    plugins: [
        // ... other plugins
        new PrepareSourceMapsForSymbolServerPlugin(),
    ]
  };
};

步驟 3：發佈來源對應至 Azure Artifacts 符號伺服器

若要將來源對應發佈至 Azure Artifacts 符號伺服器，請使用下列其中一種方法：

• 使用 Azure DevOps Pipelines 發佈來源對應。
• 使用 symbol.exe發佈來源對應。

這些方法如下所述。

使用 Azure DevOps Pipelines 發佈來源對應

Azure DevOps 隨附 PublishSymbols@2 管線建置工作。 此工作可用來將您的來源對應發佈至 Azure Artifacts 符號伺服器。

設定這個工作時，請將 參數設定 indexableFileFormats 為 All 或 SourceMap。

使用 發佈來源對應 symbol.exe

Symbol Server 小組會發佈 .NET Core 應用程式 ， symbol.exe可自動下載。 若要以程式設計方式下載 symbol.exe，請使用 GET 符號服務 REST API 中端點的 方法 Client ，如 用戶端 - 取得中所述。 然後執行下列命令，將您的來源對應發佈至 Azure Artifacts 符號伺服器：

symbol publish
        -d {root directory containing your source maps}
        -n {a unique name for this job}
        -s {service URL, such as https://artifacts.dev.azure.com/contoso}
        --patAuthEnvVar {name of environment variable containing a PAT}
        --indexableFileFormats SourceMap

參數 -n 必須是唯一的。 重複的作業名稱將會遭到拒絕，包括失敗的作業名稱。

另請參閱

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