Neuigkeiten in DevTools (Microsoft Edge 112)

Dies sind die neuesten DevTools-Features in der stabilen Version von Microsoft Edge.

Video: Neuerungen in DevTools 112

Miniaturbild für das Video

Das Leistungstool hebt die Minierung von JavaScript auf, das in Out-of-Process-iframes ausgeführt wird

In früheren Versionen von Microsoft Edge wurde die JavaScript-Ausführung in einem Out-of-Process-iframe (OOPIF) von DevTools isoliert. Daher war das Leistungstool nicht in der Lage, Sourcemaps auf Leistungsereignisse anzuwenden, die von einem OOPIF stammen. Beim Aufzeichnen eines Profils im Leistungstool kann das Tool nur die minimierten Datei- und Funktionsnamen im Flammendiagramm anzeigen, nicht die nicht minimierten Namen:

Der nicht minimierte Aufrufstapel aus einem Profil, das im Leistungstool aufgezeichnet wurde, zeigt weiterhin minimierte Namen an

In Microsoft Edge 112 lädt das Tool "Leistung " jetzt Sourcemaps und wendet sie auf die in OOPIF nachverfolgten Leistungsereignisse an. Als Ergebnis können Sie nach dem Aufzeichnen eines Profils im Tool "Leistung " jetzt nicht minimierte Datei- und Funktionsnamen für die JavaScript-Ausführung sehen, die in einem OOPIF auftritt:

Der nicht minimierte Aufrufstapel aus einem Profil, das im Leistungstool aufgezeichnet wurde

Siehe auch:

Das CSS-Übersichtstool zeigt nicht einfache Selektoren für schnelle Leistungssteigerungen an

Das CSS-Übersichtstool verfügt über einen neuen Abschnitt Nicht-einfache Selektoren, in dem eine Liste der nicht einfachen CSS-Selektoren angezeigt wird, wenn Sie eine Übersichts-Momentaufnahme des CSS Ihrer Webseite machen. Diese Liste nicht einfacher CSS-Selektoren im CSS-Übersichtstool bietet eine schnelle Möglichkeit, häufige Schuldige zu identifizieren, die möglicherweise zeitintensive Recalculate Styles-Ereignisse verursachen:

Die neue Liste der nicht einfachen Selektoren im CSS-Übersichtstool

Dies ist eine Liste von Selektoren, die möglicherweise die Leistung beeinträchtigen können. Um festzustellen, ob diese Selektoren die Leistung tatsächlich reduzieren, verwenden Sie das Feature "Selektorstatistiken" im Tool "Leistung ".

Sie können versuchen, diese Selektoren so zu ändern, dass sie spezifischer sind und mit weniger Elementen übereinstimmen, wodurch die Zeit verkürzt wird, die der Browser zum Berechnen von Formatvorlagen in den folgenden Fällen benötigt:

  • Wenn Elemente zum DOM hinzugefügt oder daraus entfernt werden.
  • Wenn die Attribute eines Elements geändert werden, z. B class . oder id.
  • Wenn Benutzereingaben auftreten, z. B. eine Mausbewegung oder eine Änderung des Fokus, was sich auf Regeln auswirken :hover kann.

Um die Leistung einzelner CSS-Selektoren und die Auswirkungen Ihrer Änderungen zu analysieren, verwenden Sie das Feature "Selektorstatistiken" im Tool "Leistung ".

Siehe auch:

Der JSON-Viewer in Microsoft Edge unterstützt das Codefolding

Ab Microsoft Edge 110 haben Sie Zugriff auf ein experimentelles Feature zum Anzeigen von JSON direkt im Browser: den JSON-Viewer. Früher haben Sie möglicherweise Browsererweiterungen oder Text-Editoren zum Anzeigen von JSON verwendet. Jetzt können Sie JSON-Nutzlasten direkt in Microsoft Edge überprüfen, unabhängig davon, ob der JSON-Code aus dem Netzwerk oder vom Datenträger stammt.

Ab Microsoft Edge 112 unterstützt der JSON-Viewer jetzt das Falten von Code. Der JSON-Viewer ist ein experimentelles Feature. So aktivieren Sie den JSON-Viewer und die Codefaltung:

  1. Gehen Sie zu edge://flags.

  2. Beginnen Sie im Textfeld "Kennzeichnungen suchen " mit der Eingabe des JSON-Viewers.

  3. Wählen Sie im Dropdownmenü des JSON-Viewersdie Option Aktiviert aus. Unten rechts wird eine Schaltfläche "Neu starten " angezeigt.

  4. Klicken Sie auf die Schaltfläche Neustart .

  5. Wechseln Sie zu einer JSON-Datei, wie z. B https://microsoftedge.github.io/Demos/json-dummy-data/256KB.json. . . Zeilennummern werden auf der linken Seite angezeigt.

  6. Klicken Sie auf das Zahnradsymbol (Zahnradsymbol des JSON-Viewers) in der oberen rechten Ecke, und aktivieren Sie dann das Kontrollkästchen Codefaltung .

Wenn die Codefaltung aktiviert ist, können Sie jetzt Objekte und Arrays innerhalb des zu überprüfenden JSON-Codes erweitern und reduzieren:

Codefaltung im JSON-Viewer von Microsoft Edge

Bitte senden Sie uns Ihr Feedback!

Siehe auch:

Verbesserungen im Fokusmodus

Der Fokusmodus ist eine neue, experimentelle Benutzeroberfläche für DevTools. Der Fokusmodus vereinfacht und optimiert die DevTools-Benutzeroberfläche und bietet maximale Anpassbarkeit, ohne Kompromisse beim robusten Funktionsumfang der Tools einzugehen. In Microsoft Edge 112 hat der Fokusmodus die folgenden Verbesserungen erhalten:

Durch Drücken von Esc wird die Schnellansicht angezeigt oder vollständig ausgeblendet

In früheren Versionen von Microsoft Edge wurde im Fokusmodus der Schnellansichtsbereich immer als reduzierter oder erweiterter Bereich angezeigt. Durch Drücken von ESCwurde das Schnellansichtsfenster erweitert, wenn es reduziert war, und umgekehrt. Wenn jedoch das Konsolentool in der Aktivitätsleiste ausgewählt wurde, wurde durch Drücken der ESC-TASTEbei reduziertem Schnellansichtsbereich eine leere Ansicht angezeigt. In Microsoft Edge 112 wurde dieses Problem behoben.

Durch Drücken von ESC wird jetzt das Bedienfeld "Schnellansicht " eingeblendet oder ganz ausgeblendet. Wenn das Bedienfeld "Schnellansicht " derzeit ausgeblendet ist, wird durch Drücken von Esc das angezeigte Bedienfeld " Schnellansicht " erweitert:

Der Schnellansichtsbereich wird durch Drücken von ESC erweitert

Wenn die Symbolleiste für die Schnellansicht derzeit angezeigt wird (unabhängig davon, ob der Bereich " Schnellansicht " reduziert oder erweitert ist), werden durch Drücken von ESC die Symbolleiste und das Bedienfeld für die Schnellansicht vollständig ausgeblendet:

Die Symbolleiste und das Bedienfeld der Schnellansicht werden durch Drücken von ESC vollständig ausgeblendet

Das Knotensymbol für dedizierte DevTools überlappt nicht mehr mit dem ersten Symbol in der Aktivitätsleiste

Wenn DevTools im Fokusmodus erkennt, dass ein Node.js Server ausgeführt wird, wird das Knotensymbol angezeigt. Wenn Sie auf dieses Symbol klicken, werden die dedizierten DevTools für Node geöffnet.

Aktualisierung: Die vertikale Aktivitätsleiste wird in Microsoft Edge 144 und höheren Versionen nicht mehr unterstützt.

Vor Microsoft Edge 112 überlappt das Knotensymbol das erste Toolsymbol, wenn die Aktivitätsleiste vertikal ausgerichtet ist, was die Auswahl des ersten Tools erschwert. Dieses Problem wurde jetzt behoben. Es gibt keine Überlappung zwischen dem Knotensymbol und dem ersten Toolsymbol, wenn die Aktivitätsleiste vertikal ist:

Das Knotensymbol überlappt nicht mehr das erste Toolsymbol in der Aktivitätsleiste

Mit der vertikalen Aktivitätsleiste wird nur eine Beschriftung für jedes Toolsymbol angezeigt, wenn Sie den Mauszeiger bewegen

Aktualisierung: Die vertikale Aktivitätsleiste wird in Microsoft Edge 144 und höheren Versionen nicht mehr unterstützt.

Wenn sich die Aktivitätsleiste im Fokusmodus vertikal befindet, wird eine Toolnamenbeschriftung angezeigt, wenn Sie auf ein Symbol zeigen oder ein Symbol mit der Tastatur auswählen. Anhand dieser Bezeichnungen erfahren Sie mehr über das Symbol für jedes Tool in der Aktivitätsleiste.

Wenn Sie zuvor ein Symbol mit der Tastatur auswählen oder mit der Maus auf ein Symbol zeigen, werden zwei Beschriftungen gleichzeitig angezeigt. Dieses Problem wurde jetzt behoben. Es wird nur eine Beschriftung angezeigt:

Wenn Sie den Mauszeiger über ein Symbol in der Aktivitätsleiste bewegen, wird eine Beschriftung angezeigt.

Ankündigungen aus dem Chromium-Projekt

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

Siehe auch

  • Zuletzt aktualisiert um