Sicheres Debuggen von Originalcode durch Veröffentlichen von Quellzuordnungen zum Azure Artifacts-Symbolserver
Auf sichere Weise Verwenden Sie Quellkarten, die vom Azure Artifacts-Symbolserver bereitgestellt werden, und arbeiten Sie mit Ihrem ursprünglichen Entwicklungsquellcode in DevTools anstelle des kompilierten, minimierten und gebündelten Produktionscodes, der vom Webserver zurückgegeben wird.
Wenn Sie Ihre Quellzuordnungen direkt auf Ihrem Webserver veröffentlichen, wird der ursprüngliche Quellcode öffentlich sichtbar. Um zu vermeiden, dass der ursprüngliche Quellcode öffentlich sichtbar wird, veröffentlichen Sie Ihre Quellzuordnungen auf dem Azure Artifacts Symbolserver. Dieser Ansatz ermöglicht die Verwendung Ihrer Quellzuordnungen in DevTools beim Debuggen Ihrer Produktionswebsite, ohne die Quellzuordnungen auf Ihrem Webserver zu veröffentlichen.
Quellzuordnungen ordnen Den kompilierten Produktionscode ihren ursprünglichen Entwicklungsquelldateien zu. In DevTools können Sie dann Ihre vertrauten Entwicklungsquelldateien anstelle des kompilierten Codes anzeigen und damit arbeiten. Weitere Informationen zur Quellzuordnung und zur Verwendung von Quellzuordnungen in DevTools finden Sie unter Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen.
Konzepte
Sie müssen Ihre Quellzuordnungen auf dem Azure Artifacts Symbolserver indizieren, damit Ihre Quellzuordnungen für DevTools verfügbar sind, wenn Sie Ihre Produktionswebsite debuggen.
Fügen Sie dazu die x_microsoft_symbol_client_key Zeichenfolgeneigenschaft zur Kompilierungszeit ihren Quellzuordnungen hinzu. Diese Eigenschaft enthält den Hexadezimalwert in Kleinbuchstaben des 256-Bit-SHA-2-Hash der entsprechenden Originalquelldatei.
DevTools ist dann in der Lage, diesen Hash für jede kompilierte Datei zu berechnen und den Hash zum Abrufen der richtigen Quellzuordnung vom Azure Artifacts Symbolservers zu verwenden. Um Ihre Quellzuordnungen sicher abzurufen, verwendet DevTools ein persönliches Zugriffstoken, das Sie bereitstellen, um eine Verbindung mit dem Azure Artifacts Symbolserver herzustellen.
Schritt 1: Generieren eines persönlichen Zugriffstokens für Azure DevOps
Die Veröffentlichungsquelle ist dem Azure Artifacts Symbolserver zugeordnet und erfordert ein persönliches Zugriffstoken (PAT). Diese PAT wird vom Buildsystem beim Kompilieren von Code und Veröffentlichen von Quellkarten verwendet.
So generieren Sie eine PAT in Azure DevOps:
Melden Sie sich bei Ihrer Azure DevOps Organisation an, indem Sie zu
https://dev.azure.com/{yourorganization}.Wechseln Sie in Azure DevOps zu DenPersönlichen Zugriffstoken der Benutzereinstellungen > :
Die Seite "Persönliche Zugriffstoken " wird angezeigt:
Klicken Sie auf "Neues Token". Das Dialogfeld "Neues persönliches Zugriffstoken erstellen " wird geöffnet:
Geben Sie im Textfeld "Name " einen Namen für die PAT ein, z. B. "Quellzuordnungen veröffentlichen".
Geben Sie im Abschnitt "Ablauf" ein Ablaufdatum für die PAT ein.
Klicken Sie im Abschnitt "Bereiche " auf "Alle Bereiche anzeigen ", um den Abschnitt zu erweitern.
Scrollen Sie nach unten zum Abschnitt "Symbole" , und aktivieren Sie dann das Kontrollkästchen "Lesen & Schreiben ".
Klicken Sie auf die Schaltfläche " Erstellen ". Der Erfolg! wird folgendes Dialogfeld angezeigt:
Klicken Sie auf die Schaltfläche " In Zwischenablage kopieren", um die PAT zu kopieren. Stellen Sie sicher, dass Sie das Token kopieren und an einem sicheren Ort speichern. Aus Sicherheitsgründen wird es nicht mehr angezeigt.
Weitere Informationen zu PAT finden Sie unter Verwenden von persönlichen Zugriffstoken.
Schritt 2: Berechnen des SHA-256-Hash ihres Skripts und Anfügen an die Quellzuordnungen
Im letzten Schritt des Erstellungsprozesses Ihrer Anwendung sollten Sie für jede Quellzuordnung, die Sie veröffentlichen möchten, den SHA-256-Hash der JavaScript-Datei berechnen, der die Quellzuordnung entspricht, und sie über die Zeichenfolgeneigenschaft an die x_microsoft_symbol_client_key Quellzuordnung anfügen.
Buildsysteme variieren von Anwendung zu Anwendung, daher gibt es keine eindeutige möglichkeit, dies anzuwenden. Hier ist jedoch ein Webpack 5-Beispiel-Plug-In, das Ihrer Webpack-Konfiguration hinzugefügt werden kann, wenn Sie es verwenden:
// file: webpack.plugin-symbols.js
// Copyright (C) Microsoft Corporation. All rights reserved.
// Licensed under the BSD 3-clause license.
const crypto = require('crypto');
const fs = require('fs');
const path = require('path');
const process = require('process');
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,
};
});
});
}
};
Sie können das Plug-In dann dem plugins Abschnitt in Ihrer webpack.config.js Konfigurationsdatei hinzufügen:
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(),
]
});
};
Schritt 3: Veröffentlichen von Quellzuordnungen zum Azure Artifacts-Symbolserver
Führen Sie eine der folgenden Optionen aus, um Quellzuordnungen zu veröffentlichen.
Veröffentlichen von Quellkarten mithilfe von Azure DevOps Pipelines
Azure DevOps wird mit der PublishSymbols@2 Pipelinebuildaufgabe geliefert. Diese Aufgabe kann verwendet werden, um Ihre Quellzuordnungen auf dem Azure Artifacts Symbolserver zu veröffentlichen.
Stellen Sie sicher, dass Sie diese Aufgabe so konfigurieren, dass der indexableFileFormats Parameter entweder All oder SourceMapfestgelegt ist.
Veröffentlichen von Quellzuordnungen mithilfe von symbol.exe
Das Symbol Server-Team veröffentlicht eine .NET Core-Anwendung, symbol.exedie automatisch heruntergeladen werden kann . Nach dem Herunterladen symbol.exekönnen Sie einen Befehl ausführen, um Ihre Quellzuordnungen auf dem Azure Artifacts Symbolserver zu veröffentlichen:
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
Beachten Sie hier, dass der -n Parameter eindeutig sein muss. Wiederholungen von Auftragsnamen, auch fehlgeschlagene Stellennamen, werden abgelehnt.