Sicheres Debuggen von originalem Code mithilfe von Quellzuordnungen für Azure Artifacts-Symbolserver

Um Ihren ursprünglichen Entwicklungsquellcode in DevTools anstelle des kompilierten, minimierten und gebündelten Produktionscodes, der vom Webserver zurückgegeben wird, sicher anzuzeigen und damit zu arbeiten, können Sie Quellzuordnungen verwenden, die auf dem Azure Artifacts-Symbolserver veröffentlicht wurden.

Quellzuordnungen ordnen Ihren 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 zum ursprünglichen Quellcode zum Debuggen.

Wenn Sie Ihre Quellzuordnungen vom Azure Artifacts-Symbolserver herunterladen, können Sie Ihre Produktionswebsite debuggen, indem Sie Ihren ursprünglichen Entwicklungsquellcode sicher abrufen.

Voraussetzung: Veröffentlichen von Quellzuordnungen auf dem Azure Artifacts-Symbolserver

Um Quellzuordnungen vom Azure Artifacts-Symbolserver in DevTools verwenden zu können, müssen sie zuerst auf dem Server veröffentlicht werden.

Informationen zum Veröffentlichen von Quellzuordnungen finden Sie unter Sicheres Debuggen von Originalcode durch Veröffentlichen von Quellzuordnungen auf dem Azure Artifacts-Symbolserver.

Schritt 1: Aktivieren von Quellzuordnungen in DevTools

So stellen Sie sicher, dass Quellzuordnungen in DevTools aktiviert sind:

1. Klicken Sie zum Öffnen von DevTools in Microsoft Edge mit der rechten Maustaste auf eine Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS).

2. Klicken Sie in DevTools auf Einstellungen (") >Einstellungen.

3. Stellen Sie sicher, dass das Kontrollkästchen JavaScript-Quellzuordnungen aktivieren und das Kontrollkästchen CSS-Quellzuordnungen aktivieren aktiviert sind:

   

Schritt 2: Verbinden von DevTools mit dem Azure Artifacts-Symbolserver

DevTools muss so konfiguriert werden, dass die veröffentlichten Quellzuordnungen für Ihre Website erfolgreich abgerufen werden.

Zum Konfigurieren von DevTools erstellen Sie eine Azure Artifacts-Symbolserververbindung. Es gibt zwei Arten von Verbindungen: Microsoft Entra ID, die am einfachsten zu verwenden ist, und persönliches Zugriffstoken.

Herstellen einer Verbindung mit dem Symbolserver über Microsoft Entra-ID

1. Klicken Sie in DevTools auf Einstellungen (") >SymbolServer.

2. Klicken Sie auf Symbolserververbindung hinzufügen , um mit dem Erstellen einer neuen Verbindung zu beginnen.

3. Wählen Sie in der Dropdownliste AutorisierungsmodusMicrosoft Entra ID aus.

   Wenn die Option Microsoft Entra ID deaktiviert ist, melden Sie sich bei Microsoft Edge an. Weitere Informationen finden Sie unter Anmelden, um Microsoft Edge geräteübergreifend zu synchronisieren.

4. Klicken Sie unter Azure DevOps organization auf Auswählen.

   

   Die Liste der DevOps-Organisationen, in denen Sie Mitglied sind, wird angezeigt.

5. Doppelklicken Sie auf den organization, mit dem Sie eine Verbindung herstellen möchten, oder klicken Sie darauf, und drücken Sie dann die EINGABETASTE.

6. Klicken Sie auf Hinzufügen , um die Verbindung zu erstellen.

   

7. Klicken Sie oben rechts auf die Schaltfläche Schließen ( schließen), um den Bereich Einstellungen zu schließen, und klicken Sie dann auf die Schaltfläche DevTools erneut laden .

Herstellen einer Verbindung mit dem Symbolserver mithilfe eines persönlichen Zugriffstokens

Um mithilfe eines persönlichen Zugriffstokens (PAT) eine Verbindung mit dem Symbolserver herzustellen, generieren Sie zunächst ein neues PAT in Azure DevOps, und konfigurieren Sie dann DevTools.

Generieren eines neuen PAT in Azure DevOps

1. Melden Sie sich bei Ihrer Azure DevOps-organization an, indem Sie zu https://dev.azure.com/{yourorganization}wechseln.

2. Navigieren Sie in Azure DevOps zu Benutzereinstellungen>Persönliche Zugriffstoken:

   

   Die Seite Persönliche Zugriffstoken wird angezeigt:

   

3. Klicken Sie auf Neues Token. Das Dialogfeld Neues persönliches Zugriffstoken erstellen wird geöffnet:

   

4. Geben Sie im Textfeld Name einen Namen für das PAT ein, z. B. "devtool source maps".

5. Geben Sie im Abschnitt Ablauf ein Ablaufdatum für das PAT ein.

6. Klicken Sie im Abschnitt Bereiche auf Alle Bereiche anzeigen , um den Abschnitt zu erweitern.

7. Scrollen Sie nach unten zu Symbole, und aktivieren Sie dann das Kontrollkästchen Lesen .

8. Klicken Sie auf die Schaltfläche Erstellen. Das Dialogfeld Erfolg! wird angezeigt:

   

9. Klicken Sie auf die Schaltfläche In Zwischenablage kopieren , um das 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.

Ihr neuer PAT wurde nun generiert. Konfigurieren Sie als Nächstes DevTools.

Konfigurieren von DevTools

1. Klicken Sie in DevTools auf Einstellungen (") >SymbolServer.

2. Klicken Sie auf Symbolserververbindung hinzufügen , um mit dem Erstellen einer neuen Verbindung zu beginnen.

3. Wählen Sie in der Dropdownliste Autorisierungsmodusdie Option Persönliches Zugriffstoken aus.

4. Geben Sie im Textfeld Azure DevOps organization die Azure DevOps-organization ein, in der Sie das PAT erstellt haben.

5. Fügen Sie in das Textfeld Persönliches Zugriffstoken Ihr persönliches Zugriffstoken (PAT) ein:

   

6. Klicken Sie auf die Schaltfläche Hinzufügen. Die Verbindung wird erstellt.

7. Klicken Sie oben rechts auf die Schaltfläche Schließen ( schließen), um den Bereich Einstellungen zu schließen, und klicken Sie dann auf die Schaltfläche DevTools erneut laden .

Schritt 3: Abrufen des ursprünglichen Codes in DevTools

Wenn Sie nach dem Ausführen der obigen Setupschritte DevTools verwenden, um an einem Build Ihrer Website zu arbeiten, für die Symbole veröffentlicht wurden, können Sie jetzt Ihren ursprünglichen Quellcode anstelle des transformierten Codes sehen.

• Im Konsolentool werden Links von Protokollmeldungen zu Quelldateien zu den ursprünglichen Dateien und nicht zu den kompilierten Dateien weitergeleitet.

• Beim schrittweisen Durchlaufen von Code im Quellentool werden die ursprünglichen Dateien im Bereich Navigator auf der linken Seite aufgeführt.

• Im Tool Quellen öffnen die Links zu Quelldateien, die in der Aufrufliste des Debuggerbereichs angezeigt werden, die ursprünglichen Quelldateien.

Herstellen einer Verbindung mit mehreren Azure Artifacts-Symbolservern

Um Sourcemaps aus mehreren Azure DevOps-Organisationen abzurufen, konfigurieren Sie DevTools so, dass eine Verbindung mit mehreren Azure Artifacts-Symbolservern hergestellt wird:

1. Klicken Sie in DevTools auf Einstellungen (") >SymbolServer.

2. Klicken Sie auf Symbolserververbindung hinzufügen , um eine zusätzliche Verbindung zu erstellen.

3. Konfigurieren Sie die neue Verbindung. Weitere Informationen finden Sie unter Herstellen einer Verbindung mit dem Symbolserver mithilfe Microsoft Entra ID oder Herstellen einer Verbindung mit dem Symbolserver mit einem persönlichen Zugriffstoken.

Um eine vorhandene Verbindung zu bearbeiten oder zu entfernen, zeigen Sie auf die Verbindung, und klicken Sie dann auf der Seite Symbolservereinstellungen neben der Verbindung auf die Schaltfläche Bearbeiten () oder Entfernen ():

Filtern von Quellzuordnungen nach URL

Verwenden Sie das Feature Filterverhalten , um zu entscheiden, welche Quellzuordnungen über die Azure Artifacts-Symbolserververbindung heruntergeladen werden sollen.

1. Klicken Sie in DevTools auf Einstellungen (") >SymbolServer.

2. Erstellen Sie eine neue Verbindung, oder bearbeiten Sie eine vorhandene Verbindung.

3. Wählen Sie in der Dropdownliste Filterverhalten entweder Ausschlussliste aus, um bestimmte Quellzuordnungen auszuschließen, oder Einschlussliste , um nur bestimmte Quellzuordnungen einzuschließen.

4. Geben Sie im Textfeld unterhalb der Dropdownliste eine URL pro Zeile für die Quellzuordnungen ein, die Sie ausschließen oder einschließen möchten:

   

5. Klicken Sie auf die Schaltfläche Speichern .

   Die folgenden Wildcards werden unterstützt:

   Platzhalter	Bedeutung
   ?	Entspricht einem einzelnen Zeichen.
   *	Entspricht einem oder mehreren Zeichen.

   Wenn Sie Ausschlussliste auswählen, versucht DevTools, alle Quellzuordnungen für Skripts mit Ausnahme von Skripts nachzuschlagen, die über eine URL verfügen, die mit einem der Einträge in der Liste übereinstimmt.

   Wenn Sie Inklusionsliste auswählen, versucht DevTools nur, Quellzuordnungen für Skripts nachzuschlagen, die URLs aufweisen, die mit einem der Einträge in der Liste übereinstimmen. Angenommen, Sie wählen in der Dropdownliste Filterverhaltendie Option Inklusionsliste aus, und geben Sie dann Folgendes in das Textfeld Filterverhalten ein:

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

   In diesem Beispiel versucht DevTools nur, Quellzuordnungen aufzulösen, die diesen beiden URL-Mustern entsprechen, und versucht nicht, Quellzuordnungen für andere Skripts zu laden.

Überprüfen der status heruntergeladener Quellzuordnungen

Sie können die status Ihrer Quellzuordnungen mit dem Tool Source Maps Monitor überprüfen.

Weitere Informationen zum Tool Source Maps Monitor und dazu, wie es bei der Überwachung der angeforderten Quelldateien helfen kann und ob diese Quellzuordnungen geladen wurden, finden Sie unter Source Maps Monitor-Tool.

Siehe auch

• Sicheres Debuggen von Originalcode durch Veröffentlichen von Quellzuordnungen auf dem Azure Artifacts-Symbolserver
• Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen
• Monitortool für Quellzuordnungen
• Verbesserungen beim Verbinden von DevTools mit dem Azure Artifacts-Symbolserver in Neuigkeiten in DevTools (Microsoft Edge 115).