Neuerungen in DevTools (Microsoft Edge 99)

Lesen Sie diese Ankündigungen, um sich die neuesten Features von Microsoft Edge DevTools und der Microsoft Edge DevTools-Erweiterung für Microsoft Visual Studio Code und Visual Studio zu ansehen.

Um auf dem neuesten Stand zu bleiben und die neuesten DevTools-Features zu erhalten, laden Sie eine Insiders-Vorschauversion von Microsoft Edge herunter. Unabhängig davon, ob Sie Windows, Linux oder macOS verwenden, sollten Sie Canary (oder einen anderen Vorschaukanal) als Standardentwicklungsbrowser verwenden. Die Beta-, Dev- und Canary-Versionen von Microsoft Edge werden als separate Apps parallel zur stabilen, veröffentlichten Version von Microsoft Edge ausgeführt. Weitere Informationen finden Sie unter Microsoft Edge Insider Channels.

Die neuesten Ankündigungen finden Sie unter Dem Microsoft Edge-Team auf Twitter. Um ein Problem mit DevTools zu melden oder nach einem neuen Feature zu fragen, melden Sie ein Problem im MicrosoftEdge/DevTools-Repository .

Sicheres Debuggen Ihres Produktionscodes mit Quellzuordnungen von Azure Artifacts Symbol Server

Azure Artifacts Symbol Server unterstützt jetzt das Speichern der Quellzuordnungen, die Ihr Buildprozess beim Kompilieren, Minimieren und Bündeln Ihres Codes erzeugt. Anstatt Quellzuordnungen auf Ihrem öffentlichen Server zu hosten, können Sie ihre Quellzuordnungen jetzt auf dem sicheren Azure Artifacts-Symbolserver veröffentlichen. Verbinden Sie dann DevTools mit Symbol Server, damit DevTools Ihre Quellzuordnungen automatisch abruft.

Mithilfe von Quellzuordnungen können Sie Ihren ursprünglichen Quellcode in DevTools anzeigen und debuggen, anstatt mit dem kompilierten, minimierten und gebündelten Produktionscode arbeiten zu müssen, der von Ihrem Server zurückgegeben wird. Wenn Sie Ihre Quellzuordnungen auf dem Azure Artifacts-Symbolserver hosten, können Sie Ihren Quellcode sicher und privat anzeigen und damit arbeiten, anstatt Ihre Quellzuordnungen auf Ihrem Server zu platzieren und Ihren ursprünglichen Code öffentlich zugänglich zu machen.

Gehen Sie wie folgt vor, um dieses Feature auszuprobieren:

  1. Veröffentlichen Sie Ihre Quellzuordnungen auf dem Azure Artifacts-Symbolserver.
  2. Öffnen Sie DevTools >Settings>Symbol Server, und verbinden Sie DevTools mit Azure Artifacts Symbol Server, indem Sie Ihr Azure DevOps-organization und persönliches Zugriffstoken eingeben.

Seite

Siehe auch:

Microsoft Edge DevTools-Erweiterung für Visual Studio

Nach dem Erfolg der Visual Studio Code-Integration können Sie jetzt auch die Microsoft Edge-Entwicklertools in Microsoft Visual Studio einbetten, um Ihre ASP.NET Projekte live zu debuggen. Laden Sie die Microsoft Edge-Entwicklertools für Visual Studio herunter, und probieren Sie es aus.

Gehen Sie wie folgt vor, um dieses Feature auszuprobieren:

  1. Stellen Sie sicher, dass Visual Studio 2022 und die ASP.NET Workload installiert sind.
  2. Richten Sie Web Live Preview als Standard-Web Forms Designer ein, wie unter Microsoft Edge Developer Tools für Visual Studio beschrieben.
  3. Öffnen Sie in einem ASP.NET Projekt eine Webseite des Projekts im Fenster Entwurf .
  4. Klicken Sie oben links im Fenster Entwurf auf die Schaltfläche Open Edge DevTools (Open Edge DevTools icon):

Ein ASP.NET Projekt beim Öffnen von Edge DevTools

Edge DevTools für Visual Studio wird geöffnet, wobei das Tool Elemente ausgewählt ist:

Microsoft Edge Developer Tools für Visual Studio: Elements-Tool von DevTools

Das Netzwerktool ist ebenfalls standardmäßig verfügbar:

Microsoft Edge Developer Tools für Visual Studio: Netzwerktool von DevTools

Das Tool "Überprüfen " (Symbol ") und " Screencast umschalten " (Screencastsymbol umschalten) sind verfügbar, und im Menü Weitere Tools (Symbol ") werden die Tools "Probleme", "Netzwerkbedingungen" und " Netzwerkanforderungen blockieren" angezeigt.

Siehe auch:

Ebenen in der 3D-Ansicht

Seit Microsoft Edge 88 bietet das 3D-Ansichtstool eine verbesserte Version des Tools "Ebenen" . Nun wurde in Microsoft Edge 99 die Funktionalität im Tool Ebenen entfernt, und das Tool Ebenen enthält stattdessen einen Link, der Sie zur Ansicht Zusammengesetzte Ebenen im Tool 3D-Ansicht umleitet. Sie finden alle Features, die zuvor im Ebenentool und mehr im Tool 3D-Ansicht vorhanden waren.

Update: Das Layer-Tool wurde jetzt entfernt.

Das Ebenentool ist jetzt mit dem Tool 3D-Ansicht verknüpft.

Siehe auch:

Verwenden Ihrer Quellzuordnungen zum Anzeigen von ursprünglichen Funktionsnamen in Leistungsprofilen

Aktualisieren: In Microsoft Edge 111 wurde dieses Feature entfernt, da das Leistungstool jetzt automatisch die ursprünglichen Datei- und Funktionsnamen bei der Profilerstellung für Produktionscode bereitstellt, solange Sourcemaps auf dem Azure Artifacts-Symbolserver gehostet werden. Weitere Informationen finden Sie unter Leistungstool entminimiert Datei- und Funktionsnamen bei der Profilerstellung von Produktionscode in Neuigkeiten in DevTools (Microsoft Edge 111).

Veralteter Eintrag "Neuerungen"

Das Aufzeichnen eines Leistungsprofils im Leistungstool erzeugt ein minimiertes Flammendiagramm. In früheren Versionen von Microsoft Edge hat das Flammendiagramm keine Quellzuordnungen verwendet, um Ihre ursprünglichen Funktionsnamen anzuzeigen, auch wenn Sie die Quellzuordnungen auf Ihrem Server gehostet haben.

Ab Microsoft Edge Version 99 können Sie Ihre ursprünglichen Funktionsnamen wie folgt in einem Leistungsprofil anzeigen:

  1. Zeichnen Sie ein Profil im Leistungstool auf.
  2. Klicken Sie auf die neue Schaltfläche Unminify (The Unminify icon), um das nicht minimierte Leistungsprofil zu erstellen und herunterzuladen.
  3. Laden (Importieren) (Das Symbol Profil laden) das nicht minimierte Leistungsprofil in das Leistungstool .

Die Schaltfläche "Aufheben " verwendet Quellzuordnungen, sofern sie parallel zu Ihrem Produktionscode gehostet werden, um Funktionsnamen im Flammendiagramm im Leistungstool zu entminifizieren.

Das Flammendiagramm im Leistungstool zeigt zunächst Funktionsnamen als b, O, Xt und bn an, die aus dem minimierten Produktionscode stammen, der vom Webserver zurückgegeben wird:

Minimierte Funktionsnamen im Flammendiagramm im Leistungstool

Nachdem Sie auf Unminify (Unminify icon) und dann Load profile (Load profile icon) geklickt haben, zeigt das Flammendiagramm im Leistungstool nun die Funktionen mit aussagekräftigen Namen an: invokeFunc (b), executeAction (O), endBatch (Xt) und runReactions (bn), die aus Ihren Quellzuordnungen abgerufen wurden:

Nicht minimierte Funktionsnamen im Flammendiagramm im Leistungstool

Siehe auch:

Verbesserte Barrierefreiheit für die Netzwerkkonsole und die 3D-Ansicht

In früheren Versionen von Microsoft Edge hat die Hilfstechnologie falsche Informationen beim Bereitstellen eines benutzerdefinierten Bearertokens im Netzwerkkonsolentool angekündigt. In Microsoft Edge Version 99 wurde dieses Problem behoben. Wenn Sie das Textfeld zum Bereitstellen eines benutzerdefinierten Bearertokens auswählen, liest die Hilfstechnologie jetzt "Tokenbearbeitungstext Anforderungsansichtsgruppe" vor.

Das Tool

In früheren Versionen von Microsoft Edge hat die Hilfstechnologie nur den Optionsfeldtext im 3D-Ansichtstool angekündigt, ohne den Gruppennamen anzukündigen, zu dem die Schaltfläche gehört. In Microsoft Edge Version 99 wurde dies behoben. Wenn sich der Fokus beispielsweise auf dem Optionsfeld Bildschirmtextur verwenden befindet, liest die Hilfstechnologie jetzt Folgendes an: "Optionsfeld "Farbtyp", Bildschirmtextur verwenden, Optionsfeld ausgewählt.

Das 3D-Ansichtstool

Siehe auch:

Verbesserte Quellordnerstruktur im Bereich "Quellen"

Auf der Registerkarte Seite des Tools Quellen wurde die Struktur der Quellordner jetzt verbessert, wobei die Benennung und Gliederung der Ordner weniger übersichtlich ist. Nicht benötigte Pfadpräfixe wie ../ und ./ wurden entfernt. Die Struktur wurde durch das Zusammenführen entsprechender doppelter Ordner vereinfacht.

Übersichtlichere Ordnergliederung auf der Registerkarte

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1284737.

Siehe auch:

Ankündigungen aus dem Chromium-Projekt

Microsoft Edge Version 99 enthält auch die folgenden Updates aus dem Chromium-Projekt:

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die ursprüngliche Seite für Ankündigungen aus dem Chromium Projekt ist What's New in DevTools (Chrome 99) und wurde von Jecelyn Yeen (Developer Advocate, der an Chrome DevTools bei Google arbeitet) verfasst.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.