Sicheres Debuggen von Originalcode mithilfe von Quellzuordnungen des Azure Artifacts-Symbolservers

  • Artikel
  • 3 Minuten Lesedauer

Um Ihren ursprünglichen Entwicklungsquellcode in DevTools sicher zu sehen und zu verwenden, anstatt den kompilierten, minimierten und gebündelten Produktionscode, der vom Webserver zurückgegeben wird, können Sie Quellzuordnungen verwenden, die auf dem Azure Artifacts Symbolserver veröffentlicht werden.

Source maps your compiled production code to your original development source files. 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 zu verwenden, müssen sie zuerst auf dem Server veröffentlicht werden.

Informationen zum Veröffentlichen von Quellzuordnungen finden Sie unter "Sicheres Debuggen des ursprünglichen Codes durch Veröffentlichen von Quellzuordnungen auf dem Azure Artifacts Symbolserver".

Schritt 1: Generieren eines persönlichen Zugriffstokens für Azure DevOps

Um Quellzuordnungen vom Azure Artifacts Symbolserver abzurufen, verwendet DevTools das Abrufprotokoll, um mit Azure DevOps zu kommunizieren, das ein gültiges PERSÖNLICHEs Zugriffstoken (PAT) erfordert.

Sie müssen eine PAT generieren, auch wenn Sie bereits eine generiert haben, um Quellzuordnungen auf dem Symbolserver im sicheren Debuggen des ursprünglichen Codes zu veröffentlichen, indem Sie Quellzuordnungen auf dem Azure Artifacts Symbolserver veröffentlichen.

So generieren Sie eine PAT in Azure DevOps:

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

  2. Wechseln Sie in Azure DevOps zu "User settingsPersonal > "-Zugriffstoken:

    Das Menü "Benutzereinstellungen" in Azure DevOps mit dem Befehl "Persönliche Zugriffstoken".

    Die Seite "Token für den persönlichen Zugriff" wird angezeigt:

    Die Seite "Persönliche Zugriffstoken" in Azure DevOps.

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

    Das Dialogfeld "Neues persönliches Zugriffstoken erstellen", wobei der Bereich "Lesen" für Symbole ausgewählt ist.

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

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

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

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

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

    Der "Erfolg!". Dialogfeld mit der zu kopierenden PAT.

  9. Klicken Sie auf die Schaltfläche "In Zwischenablage kopieren ", um die PAT zu kopieren. Kopieren Sie das Token, und speichern Sie es an einem sicheren Ort. Aus Sicherheitsgründen wird sie nicht erneut angezeigt.

Weitere Informationen zu PAT finden Sie unter Verwenden von persönlichen Zugriffstoken.

Schritt 2: Konfigurieren von DevTools

DevTools muss jetzt mit der PAT konfiguriert werden, um die Quellzuordnungen erfolgreich abzurufen.

So konfigurieren Sie DevTools:

  1. Klicken Sie zum Öffnen von DevTools in Microsoft Edge mit der rechten Maustaste auf eine Webseite, und wählen Sie dann "Überprüfen" aus. Oder drücken Ctrl++Shift``I Sie (Windows, Linux) oderI Command+Option+(macOS).

  2. Klicken Sie in DevTools > Symbolserver auf Einstellungen (Einstellungen Symbol).)

  3. Geben Sie im Textfeld Azure DevOps Organisation die Azure DevOps Organisation ein, in der Sie die PAT erstellt haben.

  4. Fügen Sie in das Textfeld Azure DevOps persönlichen Zugriffstokens Ihre PAT ein.

    Der Konfigurationsbildschirm "Symbolserver" in den DevTools-Einstellungen

  5. Klicken Sie oben rechts auf x, um den bereich Einstellungen zu schließen, und klicken Sie dann auf die Schaltfläche "DevTools neu laden".

Schritt 3: Abrufen des ursprünglichen Codes in DevTools

Wenn Sie nach den obigen Setupschritten DevTools verwenden, um an einem Build Ihrer Website zu arbeiten, für den Symbole veröffentlicht wurden, können Sie nun Ihren ursprünglichen Quellcode anstelle des transformierten Codes anzeigen.

  • Im Konsolentool werden Links von Protokollnachrichten zu Quelldateien zu den Originaldateien und nicht zu den kompilierten Dateien geleitet.

  • Beim Durchlaufen von Code im Tool "Quellen " werden die originalen Dateien im Navigator-Bereich auf der linken Seite aufgeführt.

  • Im Tool "Quellen " öffnen die Links zu Quelldateien, die im Aufrufstapel des Debuggerbereichs angezeigt werden, die ursprünglichen Quelldateien.

Überprüfen des Status der heruntergeladenen Quellzuordnungen

Sie können den Status Ihrer Quellzuordnungen mithilfe des Tools "Source Karten Monitor" überprüfen.

Weitere Informationen zum Tool "Source Karten Monitor" und zur Überwachung, welche Quelldateien Quellzuordnungen angefordert haben und ob diese Quellzuordnungen geladen wurden, finden Sie unter "Source Karten Monitor".

Weitere Informationen