Sofia Emelianova
Verbesserungen am Netzwerkbereich
Webinhalte noch schneller lokal überschreiben
Die Funktion für lokale Überschreibungen wurde optimiert. Sie können jetzt ganz einfach Antwortheader und Webinhalte von Remote-Ressourcen über das Steuerfeld Netzwerk simulieren, ohne darauf zugreifen zu müssen.
Wenn Sie Webinhalte überschreiben möchten, öffnen Sie den Bereich Netzwerk, klicken Sie mit der rechten Maustaste auf eine Anfrage und wählen Sie Inhalt überschreiben aus.
Wenn Sie lokale Überschreibungen eingerichtet, aber deaktiviert haben, werden sie in DevTools aktiviert. Falls Sie sie noch nicht eingerichtet haben, werden Sie von den Entwicklertools oben in der Aktionsleiste aufgefordert. Wählen Sie einen Ordner aus, in dem die Überschreibungen gespeichert werden sollen, und gewähren Sie den Entwicklertools Zugriff darauf.
Nachdem die Überschreibungen eingerichtet wurden, können Sie in den DevTools unter Quellen > Überschreibungen > Editor Webinhalte überschreiben.
Die überschriebenen Ressourcen sind im Bereich Netzwerk mit 
gekennzeichnet. Bewegen Sie den Mauszeiger auf das Symbol, um zu sehen, was überschrieben wird.
Chromium-Probleme: 1465785, 1470532, 1469359.
Inhalt von XHR- und Abrufanfragen überschreiben
Sie können jetzt den Inhalt von XHR überschreiben und Anfragen zusätzlich zu ihren Antwortheadern abrufen. Mit solchen Überschreibungen können Sie die API-Antworten simulieren, um Ihre Webseite zu debuggen, auch wenn Ihr Backend und Ihre API noch nicht bereit sind.
In DevTools werden derzeit Inhaltsüberschreibungen für die folgenden Anfragetypen unterstützt: Bilder (z. B. avif, png), Schriftarten, Fetch und XHR, Scripts (CSS und JS) und Dokumente (HTML). In den DevTools ist die Option Inhalt überschreiben für nicht unterstützte Typen jetzt ausgegraut.
Chromium-Probleme: 792101, 1469776
Chrome-Erweiterungsanfragen ausblenden
Damit Sie sich auf den von Ihnen erstellten Code konzentrieren und irrelevante Anfragen von Erweiterungen herausfiltern können, die Sie in Chrome installiert haben, gibt es im Bereich Netzwerk einen neuen Filter.
Wenn Sie alle Anfragen herausfiltern möchten, die an chrome-extension://-URLs gesendet werden, setzen Sie ein Häkchen bei 
Erweiterungs-URLs ausblenden.
Chromium-Probleme: 1257885, 1458803.
Lesbare HTTP-Statuscodes
Im Statuscode im Header der Anfrage wird jetzt neben den HTTP-Statuscodes visuell lesbarer Text angezeigt, damit Sie schneller herausfinden können, was mit der Anfrage passiert ist.
Sie können auch den Mauszeiger auf den Statuscode in der Anfragetabelle bewegen, um denselben Text zu sehen.
Chromium-Problem: 1153956.
Optimierte Darstellung von Antworten für JSON-Untertypen
Auf dem Tab Antwort einer Anfrage mit einem application/[subtype]+json-MIME-Untertyp (z. B. ld+json, hal+json usw.) wird die Antwort jetzt korrekt geparst und kann formatiert werden.
Chromium-Problem: 406900
Leistung: Änderungen der Abrufpriorität für Netzwerkereignisse ansehen
Im Bereich Leistung werden in der Zusammenfassung eines Ereignisses im Netzwerk-Track jetzt zwei Prioritätsfelder angezeigt: Anfangspriorität und (finale) Priorität, anstatt nur die einzelne Priorität. Mit diesem zusätzlichen Feld können Sie jetzt sehen, ob sich die Abrufpriorität des Ereignisses ändert, und die Reihenfolge der Downloads optimieren. Weitere Informationen finden Sie unter Ressourcenladevorgang mit der Fetch Priority API optimieren.
Dieselben Informationen finden Sie auch im Bereich Netzwerk in der Spalte Priorität, wenn die Einstellung 
Zeilen mit großen Anfragen aktiviert ist.
Chromium-Probleme: 1463901, 1380964.
Standardmäßig aktivierte Einstellungen für Quellen: Code-Folding und automatische Dateienthüllung
Die Option 
Settings > Preferences > 
Code Folding ist jetzt standardmäßig aktiviert. Mit dieser Option können Sie Codeblöcke minimieren.
Bewegen Sie zum Falten eines Codeblocks den Mauszeiger auf die Zeilennummer neben dem Anfang des Blocks und klicken Sie auf das Symbol zum Minimieren 
. Klicken Sie auf {...}, um den Block wieder zu maximieren.
Außerdem ist die Option 
Einstellungen > Einstellungen > 
Dateien automatisch in der Seitenleiste anzeigen jetzt standardmäßig aktiviert.
Diese Einstellung bewirkt, dass die Dateistruktur unter Quellen > Seite die aktuell geöffnete Datei im Editor auswählt, wenn Sie den Tab wechseln.
Chromium-Probleme: 1459193, 1336599.
Verbesserte Fehlerbehebung bei Problemen mit Drittanbieter-Cookies
Im Rahmen der Initiative Privacy Sandbox von Chrome möchten wir dazu beitragen, ein datenschutzfreundlicheres Web zu schaffen. Parallel dazu werden auch Updates von anderen Browsern eingeführt. Diese Initiative verbessert den Datenschutz im Web grundlegend und kann ein werbeunterstütztes Web ermöglichen, bei dem vollständig auf Cookies von Drittanbietern verzichtet werden kann. Die Privacy Sandbox wird stufenweise eingestellt, damit Sie sich problemlos auf die Änderungen vorbereiten können.
Sie können das Verhalten von Chrome bereits nach der Einstellung von Drittanbieter-Cookies testen. Führen Sie dazu Chrome über die Befehlszeile mit dem Flag --test-third-party-cookies-phaseout aus. Informationen zur Funktion dieses Flags finden Sie unter Debugging-Cookies.
Unabhängig davon, wie Sie Chrome ausführen (mit oder ohne Flag), ist auf dem Tab Probleme jetzt das Kästchen 
Probleme mit Drittanbieter-Cookies berücksichtigen für alle neuen Chrome-Nutzer standardmäßig aktiviert. Daher werden folgende Probleme gemeldet:
- Warnung zu funktionsgefährdenden Änderungen zur bevorstehenden Einstellung.
- Probleme im Zusammenhang mit Drittanbieter-Cookies
Wenn Sie als Chrome-Nutzer Cookie-Warnungen zur bevorstehenden Einstellung sehen möchten, setzen Sie ein Häkchen in dieses Kästchen.
Um dies zu testen, können Sie sich auf dieser Demoseite die Cookies ansehen.
Außerdem wurde der Filter 
Blockierte Antwort-Cookies im Bereich Netzwerk umformuliert, damit klar ist, dass nur die blockierten Antwort-Cookies angezeigt werden.
Chromium-Probleme: 1458839, 1462693, 1466310.
Vorab-Laden im Bereich „Anwendung“ debuggen
Das Chrome-Team führt das vollständige Prerendering zukünftiger Seiten wieder ein, zu denen ein Nutzer wahrscheinlich wechseln wird. Zur Fehlerbehebung wird in den DevTools der Bereich Vorabladen zum Bereich Anwendung hinzugefügt. Beim neuen Vorabruf und Pre-Rendering (zusammenfassend als „Navigations-Vorabladen“ bezeichnet) wird die Speculation Rules API anstelle der linkbasierten Ressourcenhinweise verwendet.
Auf dieser Demoseite können Sie im Bereich Anwendung > Vorabladen Folgendes prüfen:
- Spekulationsregeln, die alle auf der aktuellen Seite gefundenen Regelsätze auflisten.
- Preloads, in denen alle vorab abgerufenen und vorab gerenderten URLs aus den Regelsätzen aufgeführt sind.
- Diese Seite, auf der der vorab gerenderte Status der aktuellen Seite aufgeführt ist.
Weitere Informationen finden Sie im entsprechenden Beitrag zum Debuggen von Spekulationsregeln.
Chromium-Problem: 1410709.
Neue Farben
Vielleicht haben Sie schon bemerkt, dass die Entwicklertools jetzt ein neues Design haben, das besser zu Chrome passt. Ein Faktor dafür ist das neue Farbschema.
Diese Version (117) enthält mehr UX-Verbesserungen für die Entwicklertools, die bereits erwähnt und weiter aufgeführt wurden, einschließlich einer Reihe von verbesserten UI-Texten.
Chromium-Problem: 1456677.
Lighthouse 10.4.0
Im Bereich Lighthouse wird jetzt Lighthouse 10.4.0 ausgeführt. In dieser Version werden vor allem neue Prüfungen zur Barrierefreiheit für Folgendes hinzugefügt:
Beispiel:
Weitere Informationen finden Sie in der vollständigen Liste der Änderungen. Informationen zu den Grundlagen der Verwendung des Lighthouse-Steuerfelds in den DevTools finden Sie unter Lighthouse: Websitegeschwindigkeit optimieren.
Chromium-Problem: 772558
Die C/C++ WebAssembly-Debugging-Erweiterung für DevTools ist jetzt Open Source
Die C/C++ WebAssembly-Debugging-Erweiterung für DevTools ist jetzt Open Source und befindet sich im DevTools-Frontend-Repository. Diese Erweiterung aktiviert Debugging-Funktionen in den Entwicklertools für C++-Programme, die in WebAssembly kompiliert wurden. Weitere Informationen finden Sie unter C/C++ WebAssembly debuggen.
Hier erfahren Sie, wie Sie die Erweiterung erstellen, ausführen und testen. Sie können auch einen Beitrag leisten.
Chromium-Problem: 1410709
Sonstige Highlights
Im Folgenden sind einige bemerkenswerte Fehlerbehebungen und Verbesserungen in dieser Version aufgeführt:
- CSS-Verschachtelung: Im Bereich Elemente wird jetzt die gesamte Selektorkette für verschachtelte untergeordnete Elemente angezeigt (1172985).
- Unter Anwendung > Manifest gibt es jetzt den Bereich Fenstersteuerungs-Overlay. Dort wird geprüft, ob im Manifest ein
display_override-Wert vorhanden ist. Außerdem finden Sie dort Links zu relevanter Dokumentation. - Der Baum unter Quellen > Seite sieht jetzt unter anderem Folgendes aus (1442863):
- Ordner werden ausgegraut, wenn alle Inhalte auf der Ignorieren-Liste stehen.
- Ordner werden orange eingefärbt, wenn ihr gesamter Inhalt aus einer Quellkarte stammt.
- Leistung: Die Aufnahmeeinstellungen werden jetzt automatisch ausgeblendet, wenn Sie die Aufnahme starten (1455498).
- Unter Quellen > Editor wurde das Verhalten von Strg + Pfeil (Windows) und Opt + Pfeil (macOS) wiederhergestellt (1468208).
- Die Option Animationen > Alle pausieren behält jetzt ihren Status bei Seitenladevorgängen (1446046).
- Anwendung > Speicher > Cache-Speicher wurde in den Bereich Anwendung > Speicher > Cache (1462622) verschoben.
- Einige UI-Texte und Kurzinfos wurden verbessert: Hardware-Parallelität – Kurzinfo, Netzwerkfiltertexte und eine Hauptmenüoption, Großschreibung in der Anwendungsstrukturansicht, Texte unter „Netzwerk“ > „Header“, Texte unter „Quellen“ > „Überschreibungen“ und „Dateisystem“.
Neue experimentelle Funktionen
Neue Rendering-Emulation: prefers-reduced-transparency
Ihre Websitenutzer können damit beginnen, die neue experimentelle CSS-Medienfunktion prefers-reduced-transparency auf ihren Geräten zu aktivieren, um anzugeben, dass sie transparente Effekte reduzieren möchten. Das sollten Sie berücksichtigen, um die Barrierefreiheit Ihrer Website zu verbessern. Auf dem Tab Rendering können Sie die Einstellung prefers-reduced-transparency: reduce jetzt emulieren, um einen Prototyp einer Lösung zu erstellen und zu testen, wie sich Ihre Website in diesem Fall verhält.
Wenn Sie diese Funktion in Chrome testen möchten, aktivieren Sie in chrome://flags die experimentellen Funktionen der Webplattform.
Chromium-Problem: 1424879.
Erweiterter Protokollmonitor
Die Chrome-Entwicklertools verwenden das Chrome DevTools Protocol (CDP), um Chrome-Browser zu instrumentieren, zu untersuchen, zu debuggen und Profile zu erstellen. Wenn Sie Chromium- oder DevTools-Entwickler sind, können Sie mit dem Protokoll-Monitor alle CDP-Anfragen und ‑Antworten von DevTools aufrufen und CDP-Befehle senden.
Der Protokollmonitor erhält eine neue Schnittstelle, über die Sie CDP-Befehle einfacher erstellen und senden können. Sie müssen Befehle und ihre Parameter nicht mehr in der Dokumentation nachschlagen, sondern werden in den DevTools Vorschläge dazu erhalten.
Klicken Sie rechts unten im Tab Protokollmonitor auf 
CDP-Befehlseditor anzeigen, wählen Sie ein Ziel aus, geben Sie einen Befehl ein, wählen Sie einen der Vorschläge aus, geben Sie bei Bedarf Parameterwerte an und klicken Sie auf 
Befehl senden (Strg/Befehlstaste + Eingabetaste).
Chromium-Problem: 1469345.
Vorschaukanäle herunterladen
Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer dies tun.
Chrome-Entwicklertools-Team kontaktieren
Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.
- 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 DevTools
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 Layoutänderungen 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
- Verschiedene 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-*-Properties
- 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-Experiment: Prozessfreigabe
- Lighthouse 12.2.1
- Sonstige Highlights
- Rekorder unterstützt den Export nach Puppeteer für Firefox
- Verbesserungen im Bereich „Leistung“
- Beobachtungen zu Live-Messwerten
- Suchanfragen im Netzwerk-Track
- Stapelabzüge von „performance.mark“- und „performance.measure“-Aufrufen ansehen
- Testadressdaten im Autofill-Bereich verwenden
- Verbesserungen im Bereich „Elemente“
- Weitere Status für bestimmte Elemente erzwingen
- Unter „Elemente“ > „Stile“ werden jetzt mehr Rastereigenschaften automatisch vervollständigt
- Lighthouse 12.2.0
- Sonstige Highlights
- Console-Statistiken von Gemini sind jetzt in den meisten europäischen Ländern verfügbar
- Änderungen am Bereich „Leistung“
- Erweiterter Netzwerk-Track
- Leistungsdaten mit der Extensible API anpassen
- Details zum Track „Timings“
- Alle aufgeführten Anfragen im Netzwerkbereich kopieren
- Schnellere Heap-Snapshots mit benannten HTML-Tags und weniger Unordnung
- Animationsbereich öffnen, um Animationen aufzunehmen 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“
- Verbesserte Funktion „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
- Sonstige Highlights
- Verbesserungen im 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 Console mit Gemini besser nachvollziehen
- 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 werden als nicht gefangen erkannt
- Fehlerursachen in der Console
- Verbesserungen am Netzwerkbereich
- Header „Early Hints“ prüfen
- Wasserfall-Spalte ausblenden
- Verbesserungen am Bereich „Leistung“
- CSS-Selektorstatistiken erfassen
- Reihenfolge ändern und Titel ausblenden
- Retainer im Bereich „Arbeitsspeicher“ ignorieren
- Lighthouse 11.7.1
- Sonstige 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 die zugehörigen untergeordneten Elemente im Flame-Diagramm ausblenden
- Pfeile von ausgewählten Initiatoren zu von ihnen initiierten Ereignissen
- Lighthouse 11.6.0
- Tooltips für spezielle Kategorien unter „Speicher“ > „Heap-Snapshots“
- Anwendung > Speicherupdates
- Für den freigegebenen Speicherplatz verwendete Bytes
- 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 Easing-Editor in
var()-Fallbacks - Das CSS-Tool für Längen ist eingestellt
- Pop-over für das ausgewählte Suchergebnis unter „Leistung“ > „Haupt-Track“
- Änderungen am Bereich „Netzwerk“
- Schaltfläche „Löschen“ und Suchfilter unter „Netzwerk“ > Tab „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
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Die offizielle Sammlung von Rekorder-Erweiterungen ist online
- Netzwerkverbesserungen
- Fehlergrund in der Spalte „Status“
- Verbessertes Untermenü „Kopieren“
- Leistungsverbesserungen
- Navigationspfade in der Zeitachse
- Ereignisauslöser im Hauptpfad
- Menü zur Auswahl von JavaScript-VM-Instanzen für Node.js-Entwicklertools
- Neuer Befehl und neuer Kurzbefehl unter „Quellen“
- Verbesserungen der Elemente
- Das Pseudo-Element ::view-transition kann jetzt in „Styles“ bearbeitet werden
- Unterstützung der Property „Align-content“ für Blockcontainer
- Unterstützung des Sicherheitsstatus für emulierte faltbare Geräte
- Dynamisches Design
- Warnungen zur Einstellung von Drittanbieter-Cookies in den Bereichen „Netzwerk“ und „Anwendung“
- Lighthouse 11.4.0
- Verbesserte Bedienungshilfen
- Sonstige Highlights
- Verbesserungen der Elemente
- 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 im Bereich „Leistung“
- Erweiterte Interaktionen erfassen
- Erweiterte Filterung auf den Tabs „Bottom-Up“, „Anrufbaum“ und „Ereignisprotokoll“
- Einzugsmarkierungen im Bereich „Quellen“
- Hilfreiche Kurzinfos zu überschriebenen Überschriften und Inhalten im Bereich „Netzwerk“
- Neue Optionen im Befehlsmenü zum Hinzufügen und Entfernen von Anfrageblockierungsmustern
- Der Test zu CSP-Verstößen wird entfernt
- Lighthouse 11.3.0
- Verbesserungen bei der Barrierefreiheit
- Sonstige 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_ignoreListin Quellzuordnungen inignoreListumbenannt- Neuer Schalter für den Eingabemodus beim Remote-Debugging
- Im Bereich „Elemente“ werden jetzt URLs für #document-Knoten angezeigt.
- Effektive Content Security Policy im Anwendungsbereich
- Verbessertes Debugging für 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 Medien-Badge 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
- Pretty Print-Inline-JSON in Script-Tags unter „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 auf Screenshots unter „Anwendung“ > „Manifest“
- Sonstige Highlights
- Neuer Bereich für benutzerdefinierte Properties unter „Elemente“ > „Stile“
- Weitere Verbesserungen bei lokalen Ü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
- Leuchtturm 11
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserungen am Netzwerkbereich
- Webinhalte noch schneller lokal überschreiben
- Inhalt von XHR und Abrufanfragen überschreiben
- Anfragen von Chrome-Erweiterungen ausblenden
- 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
- Fehler beim Vorabladen im Anwendungsbereich beheben
- Die C/C++ WebAssembly-Debugging-Erweiterung für Entwicklertools ist jetzt Open Source
- Sonstige Highlights
- (Experimentell) Neue Rendering-Emulation: „prefers-reduced-transparency“
- (Experimentell) Erweiterte Protokollüberwachung
- Verbesserte Fehlerbehebung bei fehlenden Stylesheets
- Unterstützung für lineares Timing unter „Elements“ > „Stile“ > „Easing-Editor“
- Unterstützung von Speicher-Buckets und Metadatenansicht
- Lighthouse 10.3.0
- Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader-Funktionen
- Sonstige Highlights
- Verbesserungen bei Elementen
- Neues Preisvergleichsportal-Badge
- Spezifizität der Auswahl 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
- Inhaltsscripts standardmäßig ignorieren
- Netzwerk > Antwortverbesserungen
- Verschiedene Highlights
- Unterstützung für WebAssembly-Debugging
- Verbessertes Schrittverhalten in Wasm-Apps
- Fehlerbehebung bei Autofill mithilfe des Steuerfelds „Elemente“ und des Tabs „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 beim Debuggen von Nuxt, Vite und Rollup
- Verbesserungen bei CSS unter „Elemente“ > „Stile“
- Ungültige CSS-Eigenschaften und ‑Werte
- Links zu Keyframes in der Kurzschreibweise für Animationen
- Neue Konsoleneinstellung: Automatische Vervollständigung bei Eingabetaste
- Im Befehlsmenü werden erstellte Dateien hervorgehoben
- Einstellung des JavaScript-Profilers: Phase 2
- Sonstige Highlights
- Updates für Rekorder
- Erweiterungen für die Wiedergabe von Aufzeichnungen
- Datensatz mit Pierce-Selektoren erstellen
- 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
- Bessere Syntaxhervorhebung für Angular
- Caches im Anwendungsbereich neu organisieren
- Sonstige Highlights
- Leistungsbereich beim Aktualisieren löschen
- Updates für Rekorder
- Code Ihres User Flows in der Rekorder App ansehen und hervorheben
- Auswahltypen für Aufzeichnungen anpassen
- User Flow während der Aufzeichnung bearbeiten
- Automatische In-Place-Lesbarkeitsoptimierung
- Bessere Syntaxhervorhebung und Inline-Vorschau für Vue, SCSS und mehr
- Ergonomische und konsistente automatische Vervollständigung in der Console
- Verschiedene Highlights
- Aufzeichnung: Optionen zum Kopieren von Schritten, Wiedergabe auf der Seite, Kontextmenü des Schritts
- Tatsächliche Funktionsnamen in den Aufzeichnungen der Leistung anzeigen
- Neue Tastenkürzel im Bereich „Konsole und 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
- Tastenkombinationen in den Entwicklertools anpassen
- Über Tastenkombination zwischen helles und dunkles Design wechseln
- C/C++-Objekte im Speicherprüftool hervorheben
- Vollständige Initiatorinformationen für den HAR-Import unterstützen
- DOM-Suche nach Drücken von
Enterstarten start- undend-Symbole 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, die auf der Ignorierliste aufgeführt sind, im Befehlsmenü ausblenden
- Neuer Interaktions-Track 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 Mauszeiger-Ereignissen im Rekorder-Steuerfeld
- Largest Contentful Paint (LCP) im Bereich „Leistungsstatistiken“
- Textblitze (FOIT, FOUT) als mögliche Grundursachen für Layoutänderungen identifizieren
- Protokoll-Handler im Manifestbereich
- Symbol für die oberste Ebene im Elementbereich
- 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
- Sonstige Highlights
- Frame während der Fehlerbehebung neu starten
- Optionen für die langsame Wiedergabe im Rekorder-Bereich
- 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
- Verschiedene Highlights
- Doppelklick- und Rechtsklickereignisse im Bereich „Aufzeichnung“ erfassen
- Neuer Zeitraum und Snapshot-Modus im Lighthouse-Steuerfeld
- Verbesserte Zoomsteuerung im Bereich „Leistungsstatistiken“
- Löschen einer Leistungsaufzeichnung bestätigen
- Bereiche im Elementbereich neu anordnen
- Eine Farbe außerhalb des Browsers auswählen
- Verbesserte Inline-Wertvorschau während der Fehlerbehebung
- 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
- Änderungen an der 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
- Sonstige 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 für die Aufzeichnung anpassen
- Aufzeichnungen 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 Bereich „Anwendung“
- Warten, bis das Element im Rekorder-Bereich sichtbar/anklickbar ist
- Bessere Gestaltung, Formatierung und Filterung von Konsolen
- Chrome-Erweiterung mit Quellkartendateien debuggen
- Verbesserte Struktur des Quellordners im Bereich „Quellen“
- Quelldateien von Workern im Bereich „Quellen“ anzeigen
- Änderungen am automatischen dunklen Design in Chrome
- Touchfreundliche Farbauswahl und geteilter Bereich
- Sonstige Highlights
- Vorabversion: Vollbild-Baumansicht für Barrierefreiheit
- Detailliertere Änderungen auf dem Tab „Änderungen“
- Längeres Zeitlimit für die Aufzeichnung des Nutzerflusses festlegen
- Seiten müssen über den Tab „Back-Forward-Cache“ im Cache gespeichert werden
- Neuer Filter im Bereich „Properties“
- CSS-Medienfunktion „forced-colors“ emulieren
- Befehl „Lineale anzeigen, wenn der Mauszeiger darauf bewegt wird“
- Unterstützung von
row-reverseundcolumn-reverseim 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
- Mit „Als HTML bearbeiten“ automatisch vervollständigen
- Verbessertes Debuggen von Code
- 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“
- Verbesserte Anzeige der Eigenschaften im Bereich „Eigenschaften“
- Option zum Ausblenden von CORS-Fehlern in der Console
- Richtige Vorschau und Bewertung von
Intl-Objekten in der Console - Konsistente Async-Stacktraces
- Seitenleiste der Console 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
- Anzeige von Unterkünften verbessert
- Lighthouse 8.4 im Lighthouse-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ü
- Entwicklertools in deiner bevorzugten Sprache verwenden
- Neue Nest Hub-Geräte in der Geräteliste
- Ursprungstests in der Frame-Detailansicht
- Neues Symbol für CSS-Containerabfragen
- Neues Kästchen zum Umkehren der Netzwerkfilter
- Geplante Einstellung der Console-Seitenleiste
- Roh-
Set-Cookies-Header auf dem Tab „Probleme“ und im Bereich „Netzwerk“ anzeigen - Konsistente Anzeige nativer Zugriffsfunktionen als eigene Properties in der Console
- Richtige Fehler-Stack-Traces für Inline-Scripts mit #sourceURL
- Farbformat im Bereich „Berechnet“ ä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 bei der Attribution Reporting API
- Verbesserte Stringbehandlung in der Console
- Verbesserte CORS-Fehlerbehebung
- Lighthouse 8.1
- URL für neue Notiz im Manifest-Bereich
- Fixierte CSS-Übereinstimmungsselektoren
- Perfekt gedruckte JSON-Antworten im Bereich „Netzwerk“
- CSS-Rastereditor
- Unterstützung für
const-Erneute Deklarationen in der Console - Quellauftrags-Viewer
- 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-Clienthinweise für Geräte im Tab „Netzwerkbedingungen“
- Probleme im 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 Informationen zu Web Vitals
- 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-Encodings - Tastenkombination zum Ansehen des berechneten Werts
accent-colorKeyword- Problemtypen mit Farben und Symbolen kategorisieren
- Vertrauenstokens löschen
- Blockierte Funktionen in der Detailansicht des Frames
- Tests in der Einstellung „Tests“ filtern
- Neue Spalte
Vary Headerim Bereich „Cache-Speicher“ - Unterstützung der JavaScript-Prüfung für private Marken
- Erweiterte Unterstützung für das Debugging von Haltepunkten
- Vorschau beim Bewegen des Mauszeigers mit der Notation
[]unterstützen - 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 Konsole 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 Spaceim Bereich „Netzwerk“ - Leistungsverbesserungen
- Zulässige und nicht zulässige Funktionen in der Detailansicht des Frames anzeigen
- Neue Spalte
SamePartyim Bereich „Cookies“ - Eingestellter nicht standardmäßiger
fn.displayName-Support - Einstellung von
Don't show Chrome Data Saver warningim Menü „Einstellungen“ - [Experimentell] Automatische Meldung von Problemen mit geringem Kontrast auf dem Tab „Probleme“
- [Experimentell] Baumansicht mit vollständiger 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 Bereich „Leuchtturm“
- Unterstützung beim Erzwingen des Preisvergleichsportal-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
- Speicherinformationen in der Ansicht „Frame-Details“ 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 Puppeteer Recorder automatisieren
- [Experimentell] Schrifteditor im Bereich „Stile“
- [Experimentell] Debugging-Tools in der CSS-Flexbox
- [Experimentell] Neuer Tab „CSP-Verstöße“
- [Experimentell] 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-Spur 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
- Bereich „Netzwerk“ im Bereich „Service Workers“ öffnen
- Property-Wert kopieren
- Stacktrace für Netzwerkinitiator kopieren
- Vorschau der Wasm-Variablenwert bei Mouseover
- Wasm-Variable in der Console auswerten
- Einheitliche Maßeinheiten für Datei-/Speichergrößen
- Pseudoelemente im Elementbereich hervorheben
- [Experimentell] CSS Flexbox-Debugging-Tools
- [Experimentell] Tastenkombinationen 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-Eigenschaften im Bereich „Berechnet“ gruppieren
- Lighthouse 6.3 im Lighthouse-Steuerfeld
performance.mark()-Ereignisse im Bereich „Timings“- Neue
resource-type- undurl-Filter im Bereich „Werbenetzwerk“ - Aktualisierungen der Framedetailansicht
- Einstellung von
Settingsim Menü „Weitere Tools“ - [Experimentell] Probleme mit dem Farbkontrast im Bereich „CSS-Übersicht“ ansehen und beheben
- [Experimentell] Tastenkombinationen in den Entwicklertools anpassen
- Bereich „Neue Medien“
- Knoten-Screenshots über das Kontextmenü des Steuerfelds „Elemente“ aufnehmen
- Änderungen am Tab „Probleme“
- Fehlende lokale Schriftarten emulieren
- Inaktive Nutzer emulieren
prefers-reduced-dataemulieren- Unterstützung neuer JavaScript-Funktionen
- Lighthouse 6.2 im Leuchtturm-Steuerfeld
- Eintrag „andere Ursprünge“ im Bereich „Service Worker“ wird eingestellt
- Abdeckungsübersicht für gefilterte Elemente anzeigen
- Neue Ansicht für Frame-Details im Bereich „Anwendung“
- Vorschlag für barrierefreie Farben im Bereich „Stile“
- Bereich Eigenschaften im Bereich „Elemente“ wiederherstellen
- Lesbare
X-Client-Data-Headerwerte im Bereich „Netzwerk“ - Benutzerdefinierte Schriftarten im Bereich „Stile“ automatisch vervollständigen
- Ressourcentyp immer im Bereich „Netzwerk“ 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 Manifest-Bereich
- Service Worker-Ereignisse vom Typ
respondWithauf dem Tab „Timing“ - Konsistentes Anzeigen des Bereichs „Berechnet“
- Bytecode-Abweichungen 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 Manifestbereich
- Sehschwächen emulieren
- Sprachen emulieren
- Debugging der Cross-Origin-Embedder-Richtlinie (COEP)
- Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpoints
- Netzwerkanfragen ansehen, die ein bestimmtes Cookie setzen
- Über das Befehlsmenü links andocken
- Die Option „Einstellungen“ im Hauptmenü wurde verschoben
- Der Bereich „Audits“ heißt jetzt Lighthouse
- Alle lokalen Überschreibungen in einem Ordner löschen
- Aktualisierte Benutzeroberfläche für lange Aufgaben
- Unterstützung für maskierbare Symbole im Manifestbereich
- Unterstützung von Moto G4 im Gerätemodus
- Änderungen im Zusammenhang mit Cookies
- Genauere Symbole für Web-App-Manifeste
- Bewegen Sie den Mauszeiger auf die CSS-Eigenschaften
content, um nicht maskierte 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
letundclassin 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 eine Seitenaktualisierung initiiert werden
- Herausfinden, warum ein Cookie blockiert wurde
- Cookie-Werte ansehen
- Simulieren Sie verschiedene bevorzugte Farbschemata und bevorzugte Bewegungspräferenzen.
- 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
- Mehrfachkundenunterstützung im Audit-Bereich
- Fehlerbehebung im Zahlungs-Handler
- Lighthouse 5.2 im Bereich „Audits“
- Largest Contentful Paint im Bereich „Leistung“
- DevTools-Probleme über das Hauptmenü melden
- Elementstile kopieren
- Layoutänderungen visualisieren
- Lighthouse 5.1 im Bereich „Audits“
- Synchronisierung des Betriebssystem-Designs
- Tastenkombination zum Öffnen des Breakpoint-Editors
- Prefetch-Cache im Bereich „Netzwerk“
- Private Properties 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 zum Ein- und Ausblenden von Tabulatorabständen im Editor
- Alle von der CSS-Property betroffenen Knoten markieren
- Lighthouse v4 im Bereich „Analysen“
- WebSocket-Binärnachrichtenanzeige
- Screenshot des Bereichs im Befehlsmenü aufnehmen
- Service Worker-Filter im Bereich „Netzwerk“
- Änderungen am Bereich „Leistung“
- Lange Aufgaben in Aufzeichnungen im Bereich „Leistung“
- First Paint im Bereich „Timing“
- Bonustipp: Tastenkombination zum Aufrufen von RGB- und HSL-Farbcodes (Video)
- Logpunkte
- Detaillierte Kurzinfos im Inspektionsmodus
- Daten zur Codeabdeckung exportieren
- Konsole mit einer Tastatur verwenden
- Linie für das AAA-Kontrastverhältnis in der Farbauswahl
- Benutzerdefinierte Überschreibungen für die Standortermittlung speichern
- Code Folding
- Der Tab „Frames“ wurde in „Nachrichten“ umbenannt.
- Bonustipp: Filtern nach Property im Netzwerkbereich (Video)
- Leistungsmesswerte im Bereich „Leistung“ visualisieren
- Textknoten im DOM-Baum markieren
- 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
- Initiator und Prioritätsinformationen jetzt in HAR-Importen und -Exporten
- Über das Hauptmenü auf das Befehlsmenü zugreifen
- Bild-im-Bild-Pausen
- 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 für den Bereich „Leistung“
- Zuverlässigeres Debugging
- Netzwerkdrosselung über das Befehlsmenü aktivieren
- Bedingte Unterbrechungen automatisch vervollständigen
- Bei AudioContext-Ereignissen pausieren
- Node.js-Anwendungen mit ndb debuggen
- Bonustipp: Messen Sie Interaktionen von Nutzern in der realen Welt mit der User Timing API.
- 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
- Die Option „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 sind im Bereich „Arbeitsspeicher“ übersichtlich 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)
- Blackboxing im Bereich „Netzwerk“
- Zoom 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-Skripts, um Event-Listener-Breakpoints nützlicher zu machen
- Lokale Überschreibungen
- Neue Bedienungshilfen
- 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)
- Leistungsmonitor
- Console-Seitenleiste
- Ähnliche Konsolennachrichten gruppieren
- Bonustipp: Pseudoklassifizierung „hover“ ein- und ausschalten (Video)
- Fehlerbehebung per Fernzugriff für mehrere Clients
- Workspaces 2.0
- 4 neue Audits
- 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 Console-Filter
- 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
- Verhalten des Mausrads für Zoomen oder Scrollen festlegen
- Unterstützung der Fehlerbehebung für ES6-Module
- Neuer Bereich „Audits“
- Drittanbieterlogos
- Eine neue Touch-Geste für „Weiter bis hier“
- Asynchrones JavaScript kennenlernen
- 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ü