Schnellerer Start der Entwicklertools
Das Starten der DevTools ist jetzt bei der JavaScript-Kompilierung um etwa 37% schneller (von 6,9 Sekunden auf 5 Sekunden). 🎉
Das Team hat einige Optimierungen vorgenommen, um den Leistungsaufwand für die Serialisierung, das Parsen und die Deserialisierung beim Start zu reduzieren.
In einem kommenden Blogpost für Entwickler wird die Implementierung ausführlich erläutert. Mehr dazu demnächst!
Chromium-Problem: 1029427
Neue CSS-Tools zur Winkelvisualisierung
Die Entwicklertools bieten jetzt eine bessere Unterstützung für das Debugging von CSS-Winkeln.
Wenn auf ein HTML-Element auf Ihrer Seite ein CSS-Winkel angewendet wird (z.B. background: linear-gradient(angle, color-stop1, color-stop2)
oder transform: rotate(angle)
), wird im Bereich „Stile“ neben dem Winkel ein Uhrsymbol angezeigt. Klicken Sie auf das Uhrsymbol, um das Uhr-Overlay ein- oder auszuschalten. Klicken Sie auf eine beliebige Stelle auf der Uhr oder ziehen Sie die Nadel, um den Winkel zu ändern.
Du kannst den Winkel auch mithilfe von Maus und Tastenkombinationen ändern. Weitere Informationen dazu findest du in der Dokumentation.
Chromium-Probleme: 1126178, 1138633
Nicht unterstützte Bildtypen emulieren
In den DevTools wurden auf dem Tab „Rendering“ zwei neue Emulationen hinzugefügt, mit denen Sie die Bildformate AVIF und WebP deaktivieren können. Mit diesen neuen Emulationen können Entwickler verschiedene Szenarien für das Laden von Bildern einfacher testen, ohne den Browser wechseln zu müssen.
Angenommen, wir haben den folgenden HTML-Code, um ein Bild in AVIF und WebP für neuere Browser bereitzustellen, mit einem Fallback-PNG-Bild für ältere Browser.
<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="A test image">
</picture>
Öffnen Sie den Tab Rendering, wählen Sie „AVIF-Bildformat deaktivieren“ aus und aktualisieren Sie die Seite. Bewegen Sie den Mauszeiger auf img src
. Das aktuelle Bild-src (currentSrc
) ist jetzt das WebP-Fallback-Bild.
Chromium-Problem: 1130556
Speicherkontingentgröße im Bereich „Speicher“ simulieren
Sie können die Speicherkontingentgröße jetzt im Bereich „Speicher“ überschreiben. Mit dieser Funktion können Sie verschiedene Geräte simulieren und das Verhalten Ihrer Apps bei geringer Speicherverfügbarkeit testen.
Klicken Sie auf Anwendung > Speicher, aktivieren Sie das Kästchen Benutzerdefiniertes Speicherkontingent simulieren und geben Sie eine gültige Zahl ein, um das Speicherkontingent zu simulieren.
Chromium-Probleme: 945786, 1146985
Neue Web Vitals-Spur in den Aufnahmen im Bereich „Leistung“
Bei Leistungsaufzeichnungen können jetzt Web Vitals-Informationen angezeigt werden.
Nachdem Sie die Ladeleistung erfasst haben, aktivieren Sie im Bereich „Leistung“ das Kästchen Web Vitals, um die neue Leiste „Web Vitals“ aufzurufen.
Derzeit werden in der Leiste Informationen zu Web Vitals wie First Contentful Paint (FCP), Largest Contentful Paint (LCP) und Layout Shift (LS) angezeigt.
Unter web.dev/vitals erfahren Sie mehr darüber, wie Sie die Nutzerfreundlichkeit mit den Web Vitals-Messwerten optimieren können.
Chromium-Problem: –
CORS-Fehler im Bereich „Netzwerk“ melden
In den DevTools wird jetzt ein CORS-Fehler angezeigt, wenn eine Netzwerkanfrage aufgrund von CORS (Cross-Origin Resource Sharing) fehlschlägt.
Sehen Sie sich im Bereich Netzwerk die fehlgeschlagene CORS-Netzwerkanfrage an. In der Spalte „Status“ wird „CORS-Fehler“ angezeigt. Bewegen Sie den Mauszeiger auf den Fehler. In der Kurzinfo wird jetzt der Fehlercode angezeigt. Bisher wurde in den DevTools für CORS-Fehler nur der allgemeine Status „(failed)“ angezeigt.
Dies bildet die Grundlage für unsere nächsten Verbesserungen, bei denen wir eine detailliertere Beschreibung der CORS-Probleme liefern werden.
Chromium-Problem: 1141824
Aktualisierungen der Ansicht „Frame-Details“
Informationen zur ursprungsübergreifenden Isolierung in der Frame-Detailansicht
Der Status ursprungsübergreifend isoliert wird jetzt im Abschnitt Sicherheit und Isolation angezeigt.
Im neuen Bereich API-Verfügbarkeit sehen Sie, ob SharedArrayBuffer
s (SAB) verfügbar sind und ob sie mit postMessage()
geteilt werden können.
Eine Warnung zur Einstellung wird angezeigt, wenn das SAB und postMessage()
derzeit verfügbar sind, der Kontext jedoch nicht ursprungsübergreifend isoliert ist. Weitere Informationen zur plattformübergreifenden Isolation und dazu, warum sie für Funktionen wie SharedArrayBuffers
erforderlich ist, finden Sie in diesem Artikel.
Chromium-Problem: 1139899
Neue Informationen zu Webworkern in der Frame-Detailansicht
In den Entwicklertools werden jetzt dedizierte Web Worker unter dem Frame angezeigt, wodurch sie erstellt werden.
Maximieren Sie im Bereich Anwendung einen Frame mit Webworkern und wählen Sie dann im Verzeichnis Worker einen Worker aus, um die Details des Webworkers aufzurufen.
Chromium-Probleme: 1122507, 1051466
Details zum Start-Frame für geöffnete Fenster anzeigen
Sie können jetzt sehen, welcher Frame das Öffnen eines anderen Fensters verursacht hat.
Wählen Sie ein geöffnetes Fenster unter der Baumstruktur Frames aus, um die Fensterdetails zu sehen. Klicken Sie auf den Link Opener-Frame, um den Opener im Bereich „Elemente“ einzublenden.
Chromium-Problem: 1107766
Netzwerkbereich über den Bereich „Dienstworker“ öffnen
Über den neuen Link Netzwerkanfragen können Sie sich alle Informationen zum Routing von Service Worker-Anfragen ansehen. Dies bietet Entwicklern zusätzlichen Kontext beim Debuggen der Software.
Klicken Sie auf Anwendung > Dienstworker und dann auf die Netzwerkanfragen eines Dienstworkers. Im unteren Bereich wird das Steuerfeld Netzwerk geöffnet, in dem alle Anfragen angezeigt werden, die sich auf Service Worker beziehen. Die Netzwerkanfragen werden nach "is:service-worker-intercepted" gefiltert.
Chromium-Problem: –
Neue Kopieroptionen im Bereich „Netzwerk“
Property-Wert kopieren
Mit der neuen Option Wert kopieren im Kontextmenü können Sie den Property-Wert einer Netzwerkanfrage kopieren.
Klicken Sie im Bereich Netzwerk auf eine Netzwerkanfrage, um den Bereich Header zu öffnen. Klicken Sie mit der rechten Maustaste auf eines der Attribute in diesem Abschnitt: Anfragenutzlast (JSON) Formulardatenabfragestring-Parameter Antwortheader für Anfrageheader
Wählen Sie dann Wert kopieren aus, um den Property-Wert in die Zwischenablage zu kopieren.
Chromium-Problem: 1132084
Stacktrace für Netzwerkinitiator kopieren
Klicken Sie mit der rechten Maustaste auf eine Netzwerkanfrage und wählen Sie Stacktrace kopieren aus, um den Stacktrace in die Zwischenablage zu kopieren.
Chromium-Problem: 1139615
Updates für Wasm-Fehlerbehebung
Wasm-Variablenwert bei Mausbewegung als Vorschau anzeigen
Wenn der Mauszeiger auf eine Variable in WebAssembly (Wasm) bewegt wird, während das Element an einem Haltepunkt pausiert ist, wird in den Entwicklertools jetzt der aktuelle Wert der Variablen angezeigt.
Öffnen Sie im Bereich Quellen eine Wasm-Datei, setzen Sie einen Haltepunkt und aktualisieren Sie die Seite. Bewegen Sie den Mauszeiger auf eine Variable, um den Wert zu sehen.
Chromium-Probleme: 1058836, 1071432
Wasm-Variable in der Konsole auswerten
Sie können jetzt Wasm-Variablen in der Console auswerten, während die Ausführung an einem Haltepunkt angehalten ist.
In diesem Beispiel setzen wir einen Haltepunkt in Zeile local.get $input
. Wenn Sie beim Debuggen $input
in die Konsole eingeben, wird der aktuelle Wert der Variablen zurückgegeben, in diesem Fall 4
.
Chromium-Problem: 1127914
Einheitliche Maßeinheiten für Datei-/Speichergrößen
In den DevTools wird jetzt konsequent „KB“ für die Anzeige von Datei-/Speichergrößen verwendet. Zuvor hatte die Entwicklertools eine Mischung aus KB (1.000 Byte) und KiB (1.024 Byte). Im Bereich „Netzwerk“ wurden beispielsweise bisher die Labels „kB“ verwendet, die Berechnungen wurden jedoch in KiB ausgeführt, was zu unnötigen Verwirrungen führte.
Chromium-Problem: 1035309
Pseudoelemente im Elementbereich hervorheben
In den DevTools wurde der Farbkontrast von Pseudoelementen erhöht, damit sie besser zu erkennen sind.
Chromium-Problem: 1143833
Experimentelle Funktionen
CSS Flexbox-Fehlerbehebungstools
Flexbox-Debugging-Tools sind in Arbeit
In den DevTools wird jetzt im Bereich „Elemente“ ein flex
-Symbol für Elemente angezeigt, auf die display: flex
angewendet wurde.
Außerdem wurden den folgenden Flexbox-Eigenschaften neue Ausrichtungssymbole hinzugefügt:
flex-direction
align-items
align-content
align-self
justify-items
justify-content
Außerdem sind diese Symbole kontextbezogen. Die Symbolrichtung wird anhand der folgenden Kriterien angepasst:
flex-direction
direction
writing-mode
Diese Symbole sollen Ihnen helfen, das Flexbox-Layout der Seite besser zu visualisieren.
Hier finden Sie die Designdokumente zu den Flexbox-Tools. Weitere Funktionen folgen bald.
Probieren Sie es aus und teilen Sie uns Ihre Meinung mit.
Chromium-Probleme: 1144090, 1139945
Tastenkürzel für Akkorde anpassen
Seit der letzten Veröffentlichung werden in den Entwicklertools experimentelle Unterstützung für benutzerdefinierte Tastenkombinationen hinzugefügt.
Du kannst jetzt im Shortcut-Editor Akkorde erstellen – sogenannte Tastenkürzel mit mehreren Tasten.
Gehen Sie zu Einstellungen > Verknüpfungen, bewegen Sie den Mauszeiger auf einen Befehl und klicken Sie auf die Schaltfläche Bearbeiten (Stiftsymbol), um die Akkordverknüpfung anzupassen.
Chromium-Problem: 174309
Vorschaukanäle herunterladen
Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.
Chrome-Entwicklertools-Team kontaktieren
Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.
- Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
- Melden Sie ein DevTools-Problem über das Dreipunkt-Menü Weitere Optionen > Hilfe > DevTools-Problem melden.
- Tweeten Sie an @ChromeDevTools.
- Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.
Neu in den Entwicklertools
Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.
- CSS mit Gemini debuggen
- KI-Funktionen auf einem speziellen Tab in den Einstellungen verwalten
- Verbesserungen am Bereich „Leistung“
- Leistungsergebnisse mit Anmerkungen versehen und teilen
- Leistungsstatistiken direkt im Bereich „Leistung“ abrufen
- Übermäßige Layoutverschiebungen leichter erkennen
- Nicht zusammengesetzte Animationen erkennen
- Hardware-Nebenläufigkeit wird zu „Sensoren“ verschoben
- Anonyme Scripts ignorieren und sich in Stacktraces auf den Code konzentrieren
- „Elemente“ > „Stile“: Unterstützung für Schreibmodi im Querformat für Raster-Overlays und CSS-weite Keywords
- Lighthouse-Analysen für nicht-HTTP-Seiten im Zeitspannen- und Snapshot-Modus
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserungen am Netzwerkbereich
- Netzwerkfilter neu gedacht
- Sensible Daten werden bei HAR-Exporten jetzt standardmäßig ausgeschlossen
- Verbesserungen im Bereich „Elemente“
- Autocomplete-Werte für „text-emphasis-*“-Eigenschaften
- Scroll-Überlauf mit Kennzeichen
- Verbesserungen am Bereich „Leistung“
- Empfehlungen in Live-Messwerten
- Navigationspfade verwenden
- Verbesserungen am Bereich „Speicher“
- Neues Profil „Losgelöste Elemente“
- Verbesserte Benennung von einfachen JS-Objekten
- Dynamische Themen deaktivieren
- Chrome-Test: Prozessfreigabe
- Lighthouse 12.2.1
- Sonstige Highlights
- Der Rekorder unterstützt den Export nach Puppeteer für Firefox
- Verbesserungen am Bereich „Leistung“
- Live-Messwerte beobachten
- Suchanfragen im Netzwerk-Track
- Stapelabzüge von „performance.mark“- und „performance.measure“-Aufrufen ansehen
- Testadressendaten im Autofill-Steuerfeld verwenden
- Verbesserungen im Bereich „Elemente“
- Weitere Status für bestimmte Elemente erzwingen
- Unter „Elements“ > „Stile“ werden jetzt mehr Rastereigenschaften automatisch vervollständigt
- Lighthouse 12.2.0
- Sonstige Highlights
- Console Insights von Gemini wird in den meisten europäischen Ländern eingeführt
- Änderungen am Bereich „Leistung“
- Erweiterter Netzwerk-Track
- Leistungsdaten mit der Extensibility API anpassen
- Details im Timing-Track
- Alle aufgeführten Anfragen im Bereich „Netzwerk“ kopieren
- Schnellere Heap-Snapshots mit benannten HTML-Tags und weniger Unordnung
- Bereich „Animationen“ öffnen, um Animationen zu erfassen und @Keyframes live zu bearbeiten
- Lighthouse 12.1.0
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- CSS-Ankern im Bereich „Elemente“ prüfen
- Verbesserungen im Bereich „Quellen“
- Erweiterte Option „Hier nie pausieren“
- Neue Scroll-Snap-Ereignis-Listener
- Verbesserungen am Netzwerkbereich
- Aktualisierte Voreinstellungen für die Netzwerkdrosselung
- Service Worker-Informationen in benutzerdefinierten Feldern des HAR-Formats
- WebSocket-Ereignisse im Bereich „Leistung“ senden und empfangen
- Verschiedene Highlights
- Verbesserungen am Bereich „Leistung“
- Tracks mit dem aktualisierten Konfigurationsmodus für Tracks verschieben und ausblenden
- Skripts im Flame-Diagramm ignorieren
- CPU um das 20-fache drosseln
- Der Bereich „Leistungsstatistiken“ wird eingestellt
- Übermäßige Arbeitsspeichernutzung mit neuen Filtern in Heap-Snapshots ermitteln
- Storage-Buckets unter „Anwendung“ > „Speicher“ prüfen
- Warnungen zu Self-XSS mit einem Befehlszeilen-Flag deaktivieren
- Lighthouse 12.0.0
- Sonstige Highlights
- Fehler und Warnungen in der Konsole mit Gemini besser verstehen
- Unterstützung von@position-try-Regeln unter „Elemente“ > „Stile“
- Verbesserungen im Bereich „Quellen“
- Automatischen hübschen Ausdruck und Schließen von Klammern konfigurieren
- Abgelehnte Versprechen, die verarbeitet wurden, werden als erkannt erkannt.
- Fehlerursachen in der Konsole
- Verbesserungen im Netzwerkbereich
- Header „Early Hints“ prüfen
- Wasserfall-Spalte ausblenden
- Verbesserungen am Bereich „Leistung“
- CSS-Selektorstatistiken erfassen
- Reihenfolge ändern und Titel ausblenden
- Speicherplatzhalter im Bereich „Speicher“ ignorieren
- Lighthouse 11.7.1
- Verschiedene Highlights
- Neues Autofill-Steuerfeld
- Erweiterte Netzwerkdrosselung für WebRTC
- Unterstützung für scrollbare Animationen im Bereich „Animationen“
- Verbesserte Unterstützung für CSS-Verschachtelung unter „Elemente“ > „Stile“
- Bereich „Erweiterte Leistung“
- Funktionen und ihre untergeordneten Elemente im Flammendiagramm ausblenden
- Pfeile von ausgewählten Initiatoren zu von ihnen initiierten Ereignissen
- Lighthouse 11.6.0
- Kurzinfos für spezielle Kategorien unter „Arbeitsspeicher“ > „Heap-Snapshots“
- Anwendung > Speicherupdates
- Für freigegebenen Speicher verwendete Byte
- Web SQL wird vollständig eingestellt
- Verbesserungen am Steuerfeld für die Abdeckung
- Das Steuerfeld „Ebenen“ wird möglicherweise eingestellt
- Einstellung des JavaScript-Profilers: Phase 4, finale Phase
- Sonstige Highlights
- Osterei finden
- Aktualisierungen des Steuerfelds „Elemente“
- Fokussierte Seite unter „Elemente“ > „Stile“ emulieren
- Farbauswahl, Winkeluhr und Ease-In-Editor in
var()
-Fallbacks - Das CSS-Tool für Längen ist eingestellt
- Pop-up-Fenster für das ausgewählte Suchergebnis unter „Leistung“ > „Haupt-Track“
- Änderungen am Bereich „Netzwerk“
- Schaltfläche „Löschen“ und Suchfilter auf dem Tab „Netzwerk“ > „EventStream“
- Tooltips mit Gründen für Ausnahmen für Drittanbieter-Cookies unter „Netzwerk“ > „Cookies“
- Alle Haltepunkte unter „Quellen“ aktivieren und deaktivieren
- Geladene Scripts in den DevTools für Node.js ansehen
- Lighthouse 11.5.0
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
- Die offizielle Sammlung von Rekorder-Erweiterungen ist online
- Netzwerkverbesserungen
- Fehlerursache in der Spalte „Status“
- Verbessertes Untermenü „Kopieren“
- Leistungsverbesserungen
- Navigationspfade auf der Zeitachse
- Initiatoren von Ereignissen im Haupt-Track
- Menü zur Auswahl einer JavaScript-VM-Instanz für Node.js DevTools
- Neuer Befehl und neuer Kurzbefehl unter „Quellen“
- Verbesserungen bei Elementen
- Das Pseudo-Element ::view-transition kann jetzt in „Styles“ bearbeitet werden
- Unterstützung des Attributs „align-content“ für Blockcontainer
- Unterstützung für die Position von emulierten faltbaren Geräten
- Dynamische Themen
- Warnungen zur Einstellung von Drittanbieter-Cookies im Bereich „Netzwerk“ und „Anwendung“
- Lighthouse 11.4.0
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserungen bei Elementen
- Optimierte Filterleiste im Bereich „Netzwerk“
@font-palette-values
-Support- Unterstützter Fall: Benutzerdefinierte Property als Fallback für eine andere benutzerdefinierte Property
- Verbesserte Unterstützung von Quellzuordnungen
- Verbesserungen am Bereich „Leistung“
- Erweiterte Interaktionen erfassen
- Erweiterte Filterung auf den Tabs „Bottom-Up“, „Anrufbaum“ und „Ereignisprotokoll“
- Einzugshinweise im Bereich „Quellen“
- Hilfreiche Kurzinfos zu überschriebenen Überschriften und Inhalten im Bereich „Netzwerk“
- Neue Optionen im Befehlsmenü zum Hinzufügen und Entfernen von Blockierungsmustern für Anfragen
- Der Test für CSP-Verstöße wird entfernt
- Lighthouse 11.3.0
- Verbesserungen bei der Barrierefreiheit
- Verschiedene Highlights
- Einstellung von Drittanbieter-Cookies
- Cookies Ihrer Website mit dem Privacy Sandbox Analysis Tool analysieren
- Erweiterte Funktion zum Ignorieren von Einträgen
- Standard-Ausschlussmuster für node_modules
- Wenn eine Ausnahme abgefangen wird oder nicht ignorierten Code passiert, wird die Ausführung jetzt beendet.
x_google_ignoreList
in Quellzuordnungen inignoreList
umbenannt- Neuer Schalter für den Eingabemodus beim Remote-Debugging
- Im Steuerfeld „Elemente“ werden jetzt URLs für #documentknoten angezeigt
- Gültige Content Security Policy im Bereich „Anwendung“
- Verbesserte Fehlerbehebung bei Animationen
- Dialogfeld „Ist dieser Code vertrauenswürdig?“ in „Quellen“ und Warnung vor Self-XSS in der Console
- Event-Listener-Haltepunkte in Webworkern und Worklets
- Das neue Mediensymbol für
<audio>
und<video>
- Vorabladen wurde in „Spekulatives Laden“ umbenannt
- Lighthouse 11.2.0
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserter Abschnitt „@property“ unter „Elemente“ > „Stile“
- Bearbeitbare @property-Regel
- Probleme mit ungültigen @property-Regeln werden gemeldet
- Aktualisierte Liste der zu emulierenden Geräte
- Optimierte Darstellung von Inline-JSON in Script-Tags in „Quellen“
- Private Felder in der Console automatisch vervollständigen
- Lighthouse 11.1.0
- Verbesserungen bei der Barrierefreiheit
- Einstellung von Web SQL
- Validierung des Seitenverhältnisses von Screenshots unter „Anwendung“ > „Manifest“
- Sonstige Highlights
- Neuer Bereich für benutzerdefinierte Properties unter „Elemente“ > „Stile“
- Mehr Verbesserungen für lokale Überschreibungen
- Erweiterte Suche
- Verbesserter Bereich „Quellen“
- Optimierter Arbeitsbereich im Bereich „Quellen“
- Bereiche in „Quellen“ neu anordnen
- Syntaxhervorhebung und übersichtliche Darstellung für weitere Scripttypen
- Medienfunktion „prefers-reduced-transparency“ emulieren
- Lighthouse 11
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserungen am Netzwerkbereich
- Webinhalte noch schneller lokal überschreiben
- Inhalte von XHR- und Abrufanfragen überschreiben
- Anfragen von Chrome-Erweiterungen ausblenden
- Für Menschen lesbare HTTP-Statuscodes
Leistung: Änderungen an der Abrufpriorität für Netzwerkereignisse ansehen
- Standardmäßig aktivierte Quelleneinstellungen: Code-Einklappen und automatische Dateienthüllung
- Verbesserte Fehlerbehebung bei Problemen mit Drittanbieter-Cookies
- Neue Farben
- Lighthouse 10.4.0
- Vorabladen im Bereich „Anwendung“ debuggen
- Die C/C++-WebAssembly-Debugging-Erweiterung für die Entwicklertools ist jetzt Open Source
- Sonstige Highlights
- (Experimentell) Neue Rendering-Emulation: „prefers-reduced-transparency“
- (Experimentell) Erweiterter Protokoll-Monitor
- Verbesserte Fehlerbehebung bei fehlenden Stylesheets
- Unterstützung für lineare Zeitachse unter „Elemente“ > „Stile“ > „Editor für Übergänge“
- Unterstützung von Storage-Buckets und Metadatenansicht
- Lighthouse 10.3.0
- Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader-Funktion
- Verschiedene Highlights
- Verbesserungen der Elemente
- Neues CSS-Logo für das CSS-Subgrid
- Auswahlspezifität in Kurzinfos
- Werte benutzerdefinierter CSS-Properties in Kurzinfos
- Verbesserungen bei Quellen
- CSS-Syntaxhervorhebung
- Tastenkürzel zum Festlegen bedingter Haltepunkte
- Anwendung > Eindämmung von Bounce-Tracking
- Lighthouse 10.2.0
- Content-Skripts standardmäßig ignorieren
- Netzwerk > Antwortverbesserungen
- Sonstige Highlights
- Unterstützung für WebAssembly-Debugging
- Verbessertes Schrittverhalten in Wasm-Apps
- Fehlerbehebung für das automatische Ausfüllen mit dem Bereich „Elemente“ und dem Tab „Probleme“
- Behauptungen in der Rekorder App
- Lighthouse 10.1.1
- Leistungsverbesserungen
- Mit „performance.mark()“ wird das Timing beim Hovern unter „Leistung“ > „Timings“ angezeigt.
- Der Befehl „profile()“ füllt „Leistung“ > „Haupt“ aus
- Warnung bei langsamen Nutzerinteraktionen
- Web Vitals-Updates
- Einstellung des JavaScript-Profilers: Phase 3
- Sonstige Highlights
- Netzwerkantwortheader überschreiben
- Verbesserungen bei der Fehlerbehebung für Nuxt, Vite und Rollup
- Verbesserungen bei CSS unter „Elemente“ > „Stile“
- Ungültige CSS-Properties und -Werte
- Links zu Keyframes in der Kurzschreibweise für Animationen
- Neue Console-Einstellung: Autocomplete on Enter
- Im Befehlsmenü werden erstellte Dateien hervorgehoben
- Einstellung des JavaScript-Profilers: Phase 2
- Verschiedene Highlights
- Updates für Rekorder
- Rekorder-Replay-Erweiterungen
- Mit Durchstoßpunkten aufnehmen
- Aufzeichnungen als Puppeteer-Scripts mit Lighthouse-Analyse exportieren
- Erweiterungen für den Rekorder
- Elemente > Updates für Stile
- CSS-Dokumentation im Bereich „Styles“
- Unterstützung für CSS-Verschachtelung
- Logpoints und bedingte Haltepunkte in der Console markieren
- Irrelevante Scripts beim Debuggen ignorieren
- Einstellung des JavaScript-Profilers
- Weniger Kontrast emulieren
- Lighthouse 10
- Sonstige Highlights
- Fehlerbehebung bei HD-Farben mit dem Bereich „Stile“
- Verbesserte UX für Unterbrechungen
- Anpassbare Tastenkombinationen für die Rekorder App
- Verbesserte Syntaxhervorhebung für Angular
- Caches im Bereich „Anwendung“ neu anordnen
- Sonstige Highlights
- Leistungsbereich beim Aktualisieren löschen
- Updates für Rekorder
- Code des User Flows im Recorder ansehen und hervorheben
- Auswahltypen einer Aufnahme anpassen
- User Flow während der Aufzeichnung bearbeiten
- Automatischer Direktdruck
- Verbesserte Syntaxhervorhebung und Inline-Vorschau für Vue, SCSS und mehr
- Ergonomische und einheitliche automatische Vervollständigung in der Console
- Sonstige Highlights
- Aufzeichnung: Optionen zum Kopieren von Schritten, Wiedergabe auf der Seite, Kontextmenü des Schritts
- Tatsächliche Funktionsnamen in den Aufzeichnungen der Leistung anzeigen
- Neue Tastenkombinationen in der Konsole und im Bereich „Quellen“
- Verbesserte JavaScript-Fehlerbehebung
- Sonstige Highlights
- [Experimentell] Verbesserte Nutzerfreundlichkeit beim Verwalten von Wendepunkten
- [Experimentell] Automatische In-Place-Optimierung
- Tipps zu inaktiven CSS-Properties
- XPath und Textauswahlen im Rekorder-Bereich automatisch erkennen
- Komma getrennte Ausdrücke durchgehen
- Verbesserte Einstellung für die Ignorierliste
- Sonstige Highlights
- Tastenkürzel in den DevTools anpassen
- Zwischen hellem und dunklem Design mit Tastenkombination wechseln
- C/C++-Objekte im Speicherprüftool hervorheben
- Vollständige Initiatorinformationen für den HAR-Import unterstützen
- DOM-Suche nach Drücken der Taste
Enter
starten - Symbole
start
undend
füralign-content
CSS-Flexbox-Eigenschaften anzeigen - Sonstige Highlights
- Dateien im Bereich „Quellen“ nach „Erstellt“/„Bereitgestellt“ gruppieren
- Verknüpfte Stack-Traces für asynchrone Vorgänge
- Bekannte Drittanbieter-Scripts automatisch ignorieren
- Verbesserter Aufrufstapel während der Fehlerbehebung
- Quellen auf der Ignorieren-Liste im Bereich „Quellen“ ausblenden
- Dateien in der Ignorierliste im Befehlsmenü ausblenden
- Neuer Messwert „Interaktionen“ im Bereich „Leistung“
- Aufschlüsselung der LCP-Zeiten im Bereich „Leistungsstatistiken“
- Standardnamen für Aufnahmen im Rekorderbereich automatisch generieren
- Verschiedene Highlights
- Schritt-für-Schritt-Anleitung zum Abspielen im Rekorder
- Unterstützung von Mouseover-Ereignissen im Rekorder-Bereich
- Largest Contentful Paint (LCP) im Bereich „Leistungsstatistiken“
- Textblitze (FOIT, FOUT) als mögliche Grundursachen für Layoutänderungen identifizieren
- Protokoll-Handler im Bereich „Manifest“
- Badge der obersten Ebene im Steuerfeld „Elemente“
- Wasm-Debugging-Informationen zur Laufzeit anhängen
- Live-Bearbeitung während der Fehlerbehebung unterstützen
- @scope at-Regeln im Bereich „Stile“ ansehen und bearbeiten
- Verbesserungen bei Quellzuordnungen
- Verschiedene Highlights
- Frame während der Fehlerbehebung neu starten
- Optionen für die Zeitlupenwiedergabe im Steuerfeld für die Rekorder App
- Erweiterung für das Steuerfeld für die Aufnahme erstellen
- Dateien im Bereich „Quellen“ nach „Erstellt“/„Bereitgestellt“ gruppieren
- Neuer Messwert „Nutzertimings“ im Bereich „Leistungsstatistiken“
- Zugewiesenen Slot eines Elements anzeigen
- Hardware-Parallelität für Leistungsaufzeichnungen simulieren
- Vorschau für nicht farbliche Werte beim automatischen Vervollständigen von CSS-Variablen anzeigen
- Blockierende Frames im Bereich „Back-Forward-Cache“ identifizieren
- Verbesserte Vorschläge für die automatische Vervollständigung von JavaScript-Objekten
- Verbesserungen bei Quellkarten
- Sonstige Highlights
- Doppelklick- und Rechtsklickereignisse im Bereich „Aufzeichnung“ erfassen
- Neuer Zeitspanne- und Snapshot-Modus im Lighthouse-Steuerfeld
- Verbesserte Zoomsteuerung im Bereich „Leistungsstatistiken“
- Löschen einer Leistungsaufzeichnung bestätigen
- Bereiche im Elementbereich neu anordnen
- Farbe außerhalb des Browsers auswählen
- Verbesserte Vorschau von Inline-Werten beim Debuggen
- Unterstützung großer BLOBs für virtuelle Authentifikatoren
- Neue Tastenkombinationen im Bereich „Quellen“
- Verbesserungen bei Quellkarten
- Vorabversion: Neues Steuerfeld für Leistungsstatistiken
- Neue Tastenkürzel zum Emulieren von hellen und dunklen Designs
- Verbesserte Sicherheit auf dem Tab „Netzwerkvorschau“
- Verbessertes Neuladen am Haltepunkt
- Updates für die Console
- Aufzeichnung des User Flows am Anfang abbrechen
- Übernommene Pseudo-Elemente für Hervorhebungen im Bereich „Stile“ anzeigen
- Sonstige Highlights
- [Experimentell] CSS-Änderungen kopieren
- [Experimentell] Farbe außerhalb des Browsers auswählen
- Aufgezeichnete Nutzerflüsse als JSON-Datei importieren und exportieren
- Kaskadenebenen im Bereich „Stile“ ansehen
- Unterstützung der Farbfunktion
hwb()
- Verbesserte Darstellung privater Unterkünfte
- Verschiedene Highlights
- [Experimentell] Neuer Zeitspanne- und Snapshot-Modus im Lighthouse-Steuerfeld
- @supports bei Regeln im Bereich „Stile“ ansehen und bearbeiten
- Unterstützung gängiger Auswahltools
- Auswahl der Aufnahme anpassen
- Aufnahme umbenennen
- Vorschau von Klassen-/Funktionseigenschaften beim Bewegen des Mauszeigers
- Teilweise angezeigte Frames im Bereich „Leistung“
- Sonstige Highlights
- WebSocket-Anfragen drosseln
- Neuer Bereich „Reporting API“ im Anwendungsbereich
- Support wartet, bis das Element im Steuerfeld des Rekorders sichtbar und anklickbar ist
- Verbessertes Console-Styling, bessere Formatierung und Filterung
- Chrome-Erweiterung mit Quellkartendateien debuggen
- Verbesserte Struktur des Quellordners im Bereich „Quellen“
- Worker-Quelldateien im Bereich „Quellen“ aufrufen
- Änderungen am automatischen dunklen Design in Chrome
- Touchfreundliche Farbauswahl und geteilter Bereich
- Verschiedene Highlights
- Vorschaufunktion: Ganzseitige Baumstruktur für Barrierefreiheit
- Genauere Änderungen auf dem Tab „Änderungen“
- Längeres Zeitlimit für die Aufzeichnung des Nutzerflusses festlegen
- Über den Tab „Back-Forward-Cache“ prüfen, ob Ihre Seiten im Cache gespeichert werden können
- Neuer Filter im Bereich „Properties“
- CSS-Medienfunktion „forced-colors“ emulieren
- Befehl „Lineale anzeigen, wenn der Mauszeiger darauf bewegt wird“
- Unterstützung von
row-reverse
undcolumn-reverse
im Flexbox-Editor - Neue Tastenkürzel zum Wiedergeben von XHR-Anfragen und zum Maximieren aller Suchergebnisse
- Lighthouse 9 im Lighthouse-Steuerfeld
- Verbesserter Bereich „Quellen“
- Verschiedene Highlights
- [Experimentell] Endpunkte im Bereich „Reporting API“
- Vorabversion: Neues Steuerfeld für den Rekorder
- Geräteliste im Gerätemodus aktualisieren
- Automatische Vervollständigung mit „Als HTML bearbeiten“
- Verbessertes Code-Debugging
- DevTools-Einstellungen geräteübergreifend synchronisieren
- Vorabversion: Neuer Bereich „CSS-Übersicht“
- Wiederherstellung und Verbesserung der Bearbeitung und des Kopierens von CSS-Abständen
- CSS-Medienfunktion „prefers-contrast“ emulieren
- Die Funktion „Dunkles Design automatisch“ von Chrome emulieren
- Deklarationen im Bereich „Stile“ als JavaScript kopieren
- Neuer Tab „Nutzlast“ im Bereich „Netzwerk“
- Die Anzeige von Properties im Bereich „Properties“ wurde verbessert.
- Option zum Ausblenden von CORS-Fehlern in der Console
- Richtige Vorschau und Bewertung von
Intl
-Objekten in der Console - Einheitliche asynchrone Stacktraces
- Konsolen-Seitenleiste beibehalten
- Der verworfene Bereich „Application Cache“ im Bereich „Application“
- [Experimentell] Neuer Bereich „Reporting API“ im Bereich „Anwendung“
- Neue CSS-Längen-Authoring-Tools
- Probleme auf dem Tab „Probleme“ ausblenden
- Die Darstellung von Unterkünften wurde verbessert
- Lighthouse 8.4 im Leuchtturm-Steuerfeld
- Snippets im Bereich „Quellen“ sortieren
- Neue Links zu den Übersetzungen der Versionshinweise und Melden eines Übersetzungsfehlers
- Verbesserte Benutzeroberfläche für das DevTools-Befehlsmenü
- DevTools in Ihrer bevorzugten Sprache verwenden
- Neue Nest Hub-Geräte in der Geräteliste
- Ursprungstests in der Detailansicht des Frames
- Neues Symbol für CSS-Containerabfragen
- Neues Kästchen zum Umkehren der Netzwerkfilter
- Einstellung der Seitenleiste der Console
- Roh-
Set-Cookies
-Header auf dem Tab „Probleme“ und im Bereich „Netzwerk“ anzeigen - Konsistente Anzeige nativer Zugriffsfunktionen als eigene Properties in der Console
- Korrekte Fehler-Stacktraces für Inline-Skripts mit #sourceURL
- Farbformat im Bereich „Computed“ ändern
- Benutzerdefinierte Kurzinfos durch native HTML-Kurzinfos ersetzen
- [Experimentell] Probleme auf dem Tab „Probleme“ ausblenden
- Bearbeitbare CSS-Containerabfragen im Bereich „Stile“
- Web-Bundle-Vorschau im Bereich „Netzwerk“
- Fehlerbehebung für die Attribution Reporting API
- Bessere Stringverarbeitung in der Console
- Verbesserte CORS-Fehlerbehebung
- Lighthouse 8.1
- Neue Notiz-URL im Manifestbereich
- Fixierte CSS-Übereinstimmungsselektoren
- Perfekt gedruckte JSON-Antworten im Bereich „Netzwerk“
- CSS-Raster-Editor
- Unterstützung für die erneute Deklaration von
const
in der Console - Viewer für Quellenreihenfolge
- Neue Tastenkombination zum Aufrufen von Frame-Details
- Erweiterte CORS-Debugging-Unterstützung
- XHR-Label in Fetch/XHR umbenennen
- Wasm-Ressourcentyp im Bereich „Netzwerk“ filtern
- User-Agent-Client-Hints für Geräte auf dem Tab „Netzwerkbedingungen“
- Probleme mit dem Quirks-Modus auf dem Tab „Probleme“ melden
- Compute-Überschneidungen in den Bereich „Leistung“ aufnehmen
- Lighthouse 7.5 im Leuchtturm-Steuerfeld
- Das Kontextmenü „Frame neu starten“ im Aufrufstapel wurde eingestellt
- [Experimentell] Protokollmonitor
- [Experimentell] Puppeteer Recorder
- Pop-up mit Web Vitals-Informationen
- Neuer Memory Inspector
- CSS-Scroll-Snap visualisieren
- Neuer Bereich für die Kennzeicheneinstellungen
- Verbesserte Bildvorschau mit Informationen zum Seitenverhältnis
- Neue Schaltfläche für die Netzwerkbedingungen mit Optionen zum Konfigurieren von
Content-Encoding
s - Tastenkombination zum Ansehen des berechneten Werts
accent-color
Keyword- Problemtypen mit Farben und Symbolen kategorisieren
- Vertrauenstokens löschen
- Blockierte Funktionen in der Detailansicht des Frames
- Tests in den Testeinstellungen filtern
- Neue Spalte
Vary Header
im Bereich „Cache-Speicher“ - Unterstützung der JavaScript-Prüfung für private Marken
- Erweiterter Support für die Fehlerbehebung bei Haltestellen
- Unterstützung von Vorschauen beim Bewegen des Mauszeigers mit
[]
-Notation - Verbesserter Überblick über HTML-Dateien
- Richtige Fehler-Stack-Traces für das Wasm-Debugging
- Neue CSS-Flexbox-Debugging-Tools
- Neues Core Web Vitals-Overlay
- Anzahl der Probleme in die Console-Statusleiste verschoben
- Probleme mit vertrauenswürdigen Webaktivitäten melden
- Strings in der Console als (gültige) JavaScript-Stringliterale formatieren
- Neuer Bereich „Trust Tokens“ im Bereich „Anwendung“
- CSS-Funktion „Color-Gamut-Medien“ emulieren
- Verbesserte Tools für progressive Web-Apps
- Neue Spalte
Remote Address Space
im Bereich „Netzwerk“ - Leistungsverbesserungen
- Zulässige und nicht zulässige Funktionen in der Detailansicht des Frames anzeigen
- Neue Spalte
SameParty
im Bereich „Cookies“ - Eingestellte Unterstützung für nicht standardmäßige
fn.displayName
-Formate - Einstellung von
Don't show Chrome Data Saver warning
im Menü „Einstellungen“ - [Experimentell] Automatische Berichte zu Problemen mit niedrigem Kontrast auf dem Tab „Probleme“
- [Experimentell] Vollständige Baumansicht für Barrierefreiheit im Bereich „Elemente“
- Unterstützung bei der Fehlerbehebung bei Verstößen gegen vertrauenswürdige Typen
- Knoten einen Screenshot außerhalb des Darstellungsbereichs aufnehmen
- Neuer Tab „Trust Tokens“ für Netzwerkanfragen
- Lighthouse 7 im Lighthouse-Steuerfeld
- Unterstützung für erzwungenen CSS-Status
:target
- Neue Tastenkombination zum Duplizieren von Elementen
- Farbfelder für benutzerdefinierte CSS-Properties
- Neue Tastenkombinationen zum Kopieren von CSS-Eigenschaften
- Neue Option zum Anzeigen von URL-decodierten Cookies
- Nur sichtbare Cookies löschen
- Neue Option zum Löschen von Drittanbieter-Cookies im Bereich „Speicher“
- User-Agent-Client-Hints für benutzerdefinierte Geräte bearbeiten
- Einstellung „Netzwerkprotokoll aufzeichnen“ beibehalten
- WebTransport-Verbindungen im Bereich „Netzwerk“ ansehen
- „Online“ in „Ohne Drosselung“ umbenannt
- Neue Optionen zum Kopieren in der Console, im Bereich „Quellen“ und im Bereich „Stile“
- Neue Informationen zu Dienst-Workern in der Frame-Detailansicht
- Arbeitsspeicherinformationen in der Frame-Detailansicht messen
- Feedback über den Tab „Probleme“ geben
- Im Bereich „Leistung“ werden keine Frames mehr angezeigt
- Faltbare Geräte und Dual-Screen-Geräte im Gerätemodus emulieren
- [Experimentell] Browsertests mit dem Puppeteer-Rekorder automatisieren
- [Experimentell] Schrifteditor im Bereich „Stile“
- [Experimentell] CSS-Flexbox-Debugging-Tools
- [Experimentell] Neuer Tab „CSP-Verstöße“
- [Experimentell] Neue Berechnung des Farbkontrasts – Advanced Perceptual Contrast Algorithm (APCA)
- Schnelleres Starten der Entwicklertools
- Neue Tools zur Visualisierung von Blickwinkeln auf Preisvergleichsportalen
- Nicht unterstützte Bildtypen emulieren
- Speicherkontingentgröße im Bereich „Speicher“ simulieren
- Neue Web Vitals-Leiste im Bereich „Leistung“
- CORS-Fehler im Bereich „Netzwerk“ melden
- Informationen zur ursprungsübergreifenden Isolierung in der Frame-Detailansicht
- Neue Informationen zu Web Workers in der Frame-Detailansicht
- Details zum Öffnerrahmen für geöffnete Fenster anzeigen
- Netzwerkbereich über den Bereich „Service Workers“ öffnen
- Property-Wert kopieren
- Stacktrace für Netzwerkinitiator kopieren
- Wasm-Variablenwert bei Mausbewegung als Vorschau anzeigen
- Wasm-Variable in der Console auswerten
- Einheitliche Maßeinheiten für Datei-/Speichergrößen
- Pseudoelemente im Elementbereich hervorheben
- [Experimentell] CSS Flexbox-Debugging-Tools
- [Experimentell] Tastenkürzel für Akkorde anpassen
- Neue Tools zum Debuggen von CSS-Rastern
- Neuer Tab „WebAuthn“
- Tools zwischen dem oberen und unteren Steuerfeld verschieben
- Neue Seitenleiste „Berechnet“ im Bereich „Stile“
- CSS-Attribute im Bereich „Computed“ gruppieren
- Lighthouse 6.3 im Lighthouse-Steuerfeld
performance.mark()
-Ereignisse im Bereich „Timings“- Neue
resource-type
- undurl
-Filter im Bereich „Werbenetzwerk“ - Änderungen an der Ansicht der Frame-Details
- Einstellung von
Settings
im Menü „Weitere Tools“ - [Experimentell] Kontrastprobleme im Bereich „CSS-Übersicht“ ansehen und beheben
- [Experimentell] Tastenkürzel in den DevTools anpassen
- Bereich „Neue Medien“
- Screenshots von Knoten mit dem Kontextmenü des Elements-Steuerfelds aufnehmen
- Änderungen am Tab „Probleme“
- Fehlende lokale Schriftarten emulieren
- Inaktive Nutzer emulieren
- Emulate
prefers-reduced-data
- Unterstützung neuer JavaScript-Funktionen
- Lighthouse 6.2 im Lighthouse-Steuerfeld
- Eintrag „andere Ursprünge“ im Bereich „Service Worker“ wird eingestellt
- Abdeckungsübersicht für gefilterte Elemente anzeigen
- Neue Frame-Detailansicht im Anwendungsbereich
- Vorschlag für barrierefreie Farben im Bereich „Stile“
- Bereich Eigenschaften im Bereich „Elemente“ wiederherstellen
- Für Menschen lesbare
X-Client-Data
-Headerwerte im Bereich „Netzwerk“ - Benutzerdefinierte Schriftarten im Bereich „Stile“ automatisch vervollständigen
- Ressourcentyp im Bereich „Netzwerk“ immer anzeigen
- Schaltflächen in den Bereichen „Elemente“ und „Netzwerk“ löschen
- Stilbearbeitung für CSS-in-JS-Frameworks
- Lighthouse 6 im Lighthouse-Steuerfeld
- Einstellung von First Meaningful Paint (FMP)
- Unterstützung neuer JavaScript-Funktionen
- Neue Warnungen zu App-Verknüpfungen im Manifestbereich
- Service Worker-Ereignisse vom Typ
respondWith
auf dem Tab „Timing“ - Konsistentes Anzeigen des Bereichs „Berechnet“
- Bytecode-Offsets für WebAssembly-Dateien
- Zeilenweises Kopieren und Ausschneiden im Bereich „Quellen“
- Änderungen an den Console-Einstellungen
- Änderungen am Bereich „Leistung“
- Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpunkte
- Websiteprobleme mit dem neuen Tab „Probleme“ beheben
- Informationen zur Barrierefreiheit in der Kurzinfo zum Inspektionsmodus aufrufen
- Änderungen am Bereich „Leistung“
- Präzisere Terminologie für Zusagen in der Console
- Änderungen am Steuerfeld „Stile“
- Einstellung des Bereichs Eigenschaften im Bereich „Elemente“
- Unterstützung von App-Verknüpfungen im Manifest-Bereich
- Sehschwäche emulieren
- Sprachen emulieren
- Fehlerbehebung bei COEP-Richtlinien (Cross-Origin Embedder Policy)
- Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpunkte
- Netzwerkanfragen ansehen, die ein bestimmtes Cookie setzen
- Über das Befehlsmenü links andocken
- Die Option „Einstellungen“ im Hauptmenü wurde verschoben
- Das Steuerfeld „Audits“ heißt jetzt „Lighthouse“
- Alle lokalen Überschreibungen in einem Ordner löschen
- Aktualisierte Benutzeroberfläche für lange Aufgaben
- Unterstützung maskierbarer Symbole im Manifestbereich
- Unterstützung für Moto G4 im Gerätemodus
- Änderungen im Zusammenhang mit Cookies
- Genauere Manifest-Symbole für Web-Apps
- Den Mauszeiger auf CSS-
content
-Properties bewegen, um nicht entescapede Werte zu sehen - Source Map-Fehler in der Console
- Einstellung zum Deaktivieren des Scrollens über das Ende einer Datei hinaus
- Unterstützung für die Neudeklaration von
let
undclass
in der Console - Verbessertes WebAssembly-Debugging
- Initiatorenketten auf dem Tab „Initiator“ anfordern
- Ausgewählte Netzwerkanfrage in der Übersicht hervorheben
- URL- und Pfadspalten im Bereich „Netzwerk“
- Aktualisierte User-Agent-Strings
- Neue Konfigurations-UI für den Bereich „Audits“
- Modi für die Codeabdeckung pro Funktion oder pro Block
- Die Codeabdeckung muss jetzt durch ein Seitenaktualisieren gestartet werden.
- Fehler bei der Blockierung von Cookies beheben
- Cookiewerte ansehen
- Unterschiedliche Einstellungen für „prefers-color-scheme“ und „prefers-reduced-motion“ simulieren
- Aktualisierungen der Codeabdeckung
- Herausfinden, warum eine Netzwerkressource angefordert wurde
- In den Bereichen „Console“ und „Quellen“ werden die Einstellungen für Einzüge wieder berücksichtigt
- Neue Tastenkürzel für die Cursornavigation
- Unterstützung mehrerer Kunden im Bereich „Audits“
- Fehlerbehebung für Zahlungsabwickler
- Lighthouse 5.2 im Bereich „Audits“
- Largest Contentful Paint im Bereich „Leistung“
- Probleme mit DevTools-Dateien über das Hauptmenü
- Elementstile kopieren
- Layoutänderungen visualisieren
- Lighthouse 5.1 im Bereich „Audits“
- Synchronisierung des Betriebssystems
- Tastenkombination zum Öffnen des Breakpoints-Editors
- Prefetch-Cache im Bereich „Netzwerk“
- Private Eigenschaften beim Ansehen von Objekten
- Benachrichtigungen und Push-Nachrichten im Bereich „Anwendung“
- Automatische Vervollständigung mit CSS-Werten
- Neue Benutzeroberfläche für Netzwerkeinstellungen
- WebSocket-Nachrichten in HAR-Exporten
- Schaltflächen zum Importieren und Exportieren von HAR-Dateien
- Arbeitsspeichernutzung in Echtzeit
- Portnummern für die Registrierung von Dienst-Workern
- Ereignisse für den Hintergrundabruf und die Hintergrundsynchronisierung prüfen
- Puppeteer für Firefox
- Sinnvolle Voreinstellungen beim automatischen Vervollständigen von CSS-Funktionen
- Websitedaten über das Befehlsmenü löschen
- Alle IndexedDB-Datenbanken ansehen
- Nicht komprimierte Größe einer Ressource beim Bewegen des Mauszeigers anzeigen
- Inline-Haltepunkte im Bereich „Haltepunkte“
- Anzahl der IndexedDB- und Cache-Ressourcen
- Einstellung zum Deaktivieren der detaillierten Kurzinfo „Inspizieren“
- Einstellung für das Wechseln der Tab-Einrückung im Editor
- Alle von der CSS-Property betroffenen Knoten markieren
- Lighthouse v4 im Bereich „Audits“
- WebSocket-Binärnachrichtenanzeige
- Screenshot vom Bereich im Befehlsmenü erstellen
- Service Worker-Filter im Bereich „Netzwerk“
- Änderungen am Bereich „Leistung“
- Lange Aufgaben in Aufzeichnungen im Bereich „Leistung“
- First Paint im Bereich „Timing“
- Bonustipp: Verknüpfung zum Anzeigen der RGB- und HSL-Farbcodes (Video)
- Logpunkte
- Detaillierte Kurzinfos im Prüfmodus
- Daten zur Codeabdeckung exportieren
- Console mit einer Tastatur bedienen
- Linie für das AAA-Kontrastverhältnis in der Farbauswahl
- Benutzerdefinierte Überschreibungen für die Standortbestimmung speichern
- Code Folding
- Tab „Frames“ wurde in Tab „Nachrichten“ umbenannt
- Bonustipp: Filtern nach Property im Netzwerkbereich (Video)
- Leistungsmesswerte im Bereich „Leistung“ visualisieren
- Textknoten in der DOM-Struktur hervorheben
- JS-Pfad in einen DOM-Knoten kopieren
- Aktualisierungen des Bereichs „Audits“, einschließlich einer neuen Prüfung, mit der JS-Bibliotheken erkannt werden, und neuer Keywords für den Zugriff auf den Bereich „Audits“ über das Menü „Befehle“
- Bonustipp: Mediaabfragen mit dem Gerätemodus prüfen (Video)
- Bewegen Sie den Mauszeiger auf das Ergebnis eines Live-Ausdrucks, um einen DOM-Knoten hervorzuheben.
- DOM-Knoten als globale Variablen speichern
- Informationen zum Initiator und zur Priorität sind jetzt in HAR-Importen und ‑Exporten enthalten
- Über das Hauptmenü auf das Befehlsmenü zugreifen
- Haltepunkte für Bild im Bild
- Bonustipp: Mit
monitorEvents()
ausgelöste Ereignisse eines Knotens in der Console protokollieren (Video) - Live-Ausdrücke in der Console
- DOM-Knoten bei der genauen Auswertung hervorheben
- Optimierungen im Leistungssteuerfeld
- Zuverlässigeres Debugging
- Netzwerkdrosselung über das Befehlsmenü aktivieren
- Bedingte Haltepunkte für automatische Vervollständigung
- Unterbrechung bei AudioContext-Ereignissen
- Node.js-Anwendungen mit ndb debuggen
- Bonustipp: Nutzerinteraktionen in der Praxis mit der User Timing API messen
- Eager Evaluation
- Argumenthinweise
- Automatische Vervollständigung von Funktionen
- ES2017 keywords
- Lighthouse 3.0 im Bereich „Audits“
- Unterstützung für BigInt
- Property-Pfade zum Beobachtungsbereich hinzufügen
- „Zeitstempel anzeigen“ wurde in die Einstellungen verschoben
- Bonustipp: Weniger bekannte Konsolenmethoden (Video)
- In allen Netzwerkheadern suchen
- Vorschau für CSS-Variablenwerte
- Als Fetch kopieren
- Neue Prüfungen, Konfigurationsoptionen für Computer und Aufrufspuren
- Endlosschleifen beenden
- Nutzertimings auf den Leistungs-Tabs
- JavaScript-VM-Instanzen werden im Bereich „Speicher“ klar aufgeführt
- Der Tab „Netzwerk“ wurde in „Seite“ umbenannt
- Aktualisierungen für das dunkle Design
- Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“
- Funktionen der Website-Isolierung im Bereich „Leistung“
- Bonustipp: Ebenenbereich + Animations-Inspector (Video)
- Blackbox im Bereich „Netzwerk“
- Zoomen im Gerätemodus automatisch anpassen
- Schönformatierte Ausgabe auf den Tabs „Vorschau“ und „Antwort“
- HTML-Inhalte in der Vorschau ansehen
- Unterstützung lokaler Überschreibungen für Stile in HTML
- Bonustipp: Blackbox-Framework-Scripts, um Event-Listener-Haltepunkte nützlicher zu machen
- Lokale Überschreibungen
- Neue Tools für die Barrierefreiheit
- Tab „Änderungen“
- Neue SEO- und Leistungsaudits
- Mehrere Aufzeichnungen im Bereich „Leistung“
- Zuverlässiges Code-Stepping mit Workern in asynchronem Code
- Bonustipp: DevTools-Aktionen mit Puppeteer automatisieren (Video)
- Leistungsüberwachung
- Console-Seitenleiste
- Ähnliche Konsolenmelden gruppieren
- Bonustipp: Pseudoklassifizierung „hover“ ein- und ausschalten (Video)
- Unterstützung für die Remote-Fehlerbehebung für mehrere Kunden
- Workspaces 2.0
- 4 neue Prüfungen
- Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren
- Hintergrundsynchronisierungsereignisse mit benutzerdefinierten Tags auslösen
- Bonustipp: Event-Listener-Haltepunkte (Video)
- Top-Level-await in der Console
- Neue Workflows für Screenshots
- CSS-Raster hervorheben
- Eine neue Console API zum Abfragen von Objekten
- Neue Konsolenfilter
- HAR-Importe im Bereich „Netzwerk“
- Cache-Ressourcen mit Vorschau
- Bessere Cache-Fehlerbehebung
- Codeabdeckung auf Blockebene
- Simulation der Drosselung von Mobilgeräten
- Speichernutzung ansehen
- Sehen, wann ein Service Worker Antworten im Cache gespeichert hat
- FPS-Messer über das Befehlsmenü aktivieren
- Mausradverhalten zum Zoomen oder Scrollen festlegen
- Unterstützung für das Debuggen von ES6-Modulen
- Neuer Audit-Bereich
- Abzeichen von Drittanbietern
- Neue Geste für „Hier weiter“
- In den asynchronen Modus wechseln
- Aussagekräftigere Objektvorschauen in der Console
- Aussagekräftigere Kontextauswahl in der Console
- Echtzeitaktualisierungen auf dem Tab „Abdeckung“
- Einfachere Optionen für die Netzwerkdrosselung
- Asynchrone Stacks standardmäßig aktiviert
- Abdeckung von CSS- und JS-Code
- Screenshots des ganzen Bildschirms
- Anfragen blockieren
- Über „async await“ springen
- Einheitliches Befehlsmenü