Unterstützung bei Verstößen gegen die vertrauenswürdigen Typen beheben
Breakpoint bei Verstößen gegen den vertrauenswürdigen Typ
Sie können jetzt in Quellen Haltepunkte für Verstöße gegen vertrauenswürdige Typen festlegen und Ausnahmen abfangen. .
Mit der Trusted Typen API können Sie DOM-basierte Cross-Site-Scripting-Sicherheitslücken verhindern. Weitere Informationen zum Schreiben, Prüfen und Warten von Anwendungen ohne DOM-XSS-Schwachstellen mit vertrauenswürdigen Typen hier.
Öffnen Sie im Bereich Quellen die Seitenleiste Debugger. Maximieren Sie den Bereich CSP-Verstoß Haltepunkte und aktivieren Sie das Kästchen Verstöße gegen vertrauenswürdige Typen, um das Pausieren auf der Ausnahmen. Probieren Sie es mit dieser Demoseite selbst aus.
Chromium-Problem: 1142804
Problem im Bereich „Quellen“ mit dem Tab „Probleme“ verknüpfen
Im Bereich Quellen wird jetzt neben der Zeile, die gegen den vertrauenswürdigen Typ verstößt, ein Warnsymbol angezeigt. Mauszeiger auf um eine Vorschau der Ausnahme anzuzeigen. Klicke darauf, um den Tab Probleme zu maximieren. Dort findest du weitere Informationen zu die Ausnahmen und Hinweise zur Behebung.
Chromium-Problem: 1150883
Knoten-Screenshot jenseits des Darstellungsbereichs aufnehmen
Sie können jetzt Knoten-Screenshots für einen vollständigen Knoten aufnehmen, einschließlich des Contents „below the fold“ (mit Scrollen sichtbar). Bisher Der Screenshot wurde aufgrund von Inhalten abgeschnitten, die im Darstellungsbereich nicht sichtbar waren. Die ganzseitigen Screenshots jetzt auch präzise.
Klicken Sie im Bereich Elemente mit der rechten Maustaste auf ein Element und wählen Sie Screenshot des Knotens aufnehmen aus.
Chromium-Problem: 1003629
Neuer Tab „Trust Tokens“ für Netzwerkanfragen
Prüfen Sie die Trust Token-Netzwerkanfragen mit dem neuen Tab Trust Tokens (Trust Tokens).
Trust Token ist eine neue API zur Bekämpfung von Betrug und zur Unterscheidung zwischen Bots und echten Menschen. Verfolgung. Weitere Informationen zu den ersten Schritten mit Trust Tokens
Weitere Unterstützung bei der Fehlerbehebung wird in den nächsten Versionen bereitgestellt.
Chromium-Problem: 1126824
Lighthouse 7 im Lighthouse-Steuerfeld
Im Steuerfeld Lighthouse wird jetzt Lighthouse 7 ausgeführt. In den Versionshinweisen finden Sie die vollständige Liste der Änderungen.
Neue Prüfungen in Lighthouse 7:
- LCP-Bild (Largest Contentful Paint) vorab laden. Prüft, ob das vom LCP-Element verwendete Bild um die LCP-Zeit zu verbessern.
- Im
Issues
-Bereich protokollierte Probleme: Weist auf eine Liste nicht behobener Probleme imIssues
hin. . - Progressive Web-Apps (PWA): Die PWA-Kategorie hat sich erheblich geändert.
Die Gruppe Installable (Installierbar) wird jetzt vollständig durch Funktionsprüfungen betrieben, die die Kriterien zu installieren. Dieselben Signale, die Sie im Manifestbereich sehen
- Das Dialogfeld „Registrierung eines Service Workers ...“ wird die Prüfung in die Gruppe PWA-optimiert verschoben. HTTPS" Prüfung ist jetzt Teil der wichtigsten Anforderungen an die Installierbarkeit Prüfung.
- Die Gruppe Schnell und zuverlässig wird entfernt. Da die überarbeiteten „Anforderungen an die Installierbarkeit“ Prüfung die Prüfung auf Offline-Funktionalität umfasst, antworten die Antwort "current page" und "start_url" mit 200, wenn offline" Prüfung wurde entfernt. Die Meldung „Die Seite wird über das Mobilfunknetz schnell genug geladen“ Prüfung wurde entfernt .
Chromium-Problem: 772558
Aktualisierungen des Steuerfelds „Elemente“
Unterstützung beim Erzwingen des CSS-Status :target
Du kannst jetzt die Entwicklertools verwenden, um den CSS-Status :target
zu erzwingen und zu prüfen.
Wählen Sie im Steuerfeld Elemente ein Element aus und wechseln Sie den Elementstatus. :target
aktivieren
um die Stile zu erzwingen und zu überprüfen.
Verwenden Sie die Pseudoklasse :target
zum Gestalten eines Elements, wenn der Hash in der URL und die ID eines Elements vorhanden ist.
sind identisch. Sehen Sie sich diese Demo an, um es selbst auszuprobieren. Mit dieser neuen Entwicklertools-Funktion
ohne ständig die URL manuell ändern zu müssen.
Chromium-Problem: 1156628
Neue Verknüpfung zum Duplizieren eines Elements
Mit der neuen Tastenkombination Element duplizieren können Sie Elemente sofort klonen.
Klicken Sie im Steuerfeld Elemente mit der rechten Maustaste auf ein Element und wählen Sie Element duplizieren aus. Ein neues Element wird darunter erstellt werden kann.
Alternativ können Sie ein Element auch mit Tastenkombinationen duplizieren:
- Mac:
Shift
+Option
+⬇️
- Fenster/ Linux:
Shift
+Alt
+⬇️
Chromium-Probleme: 1150797, 1150797
Farbauswahl für benutzerdefinierte CSS-Eigenschaften
Im Bereich Styles wird jetzt eine Farbauswahl für benutzerdefinierte CSS-Eigenschaften angezeigt.
Außerdem kannst du die Taste Shift
gedrückt halten und auf die Farbauswahl klicken, um RGBA, HSLA,
und Hex-Darstellungen
des Farbwerts.
Chromium-Problem: 1147016
Neue Tastenkombinationen zum Kopieren von CSS-Eigenschaften
Mit einigen neuen Tastenkombinationen lassen sich CSS-Eigenschaften jetzt schneller kopieren.
Wählen Sie im Steuerfeld Elemente ein Element aus. Klicken Sie dann mit der rechten Maustaste auf eine CSS-Klasse oder eine CSS-Eigenschaft in den Bereich Styles, um den Wert zu kopieren.
Kopieroptionen für CSS-Klasse:
- Selektor kopieren: Kopieren Sie den aktuellen Selektornamen.
- Regel kopieren: Kopiert die Regel der aktuellen Auswahl.
- Alle Deklarationen kopieren: Hiermit werden alle Deklarationen der aktuellen Regel kopiert, einschließlich ungültiger und mit Präfix.
Kopieroptionen für CSS-Property:
- Deklaration kopieren: Kopieren Sie die Deklaration der aktuellen Zeile.
- Property kopieren: Kopieren Sie die Eigenschaft der aktuellen Zeile.
- Wert kopieren: Der Wert der aktuellen Zeile wird kopiert.
Chromium-Problem: 1152391
Cookie-Updates
Neue Option zum Anzeigen von URL-decodierten Cookies
Sie können jetzt den Wert für Cookies mit URL-Decodierung im Bereich Cookies anzeigen lassen.
Gehen Sie zum Bereich Anwendung und wählen Sie den Bereich Cookies aus. Wählen Sie ein beliebiges Cookie in der Liste aus. Klicken Sie das neue Kästchen Decodierte URL anzeigen an, um das decodierte Cookie zu sehen.
Chromium-Problem: 997625
Nur sichtbare Cookies löschen
Die Schaltfläche Alle Cookies löschen im Bereich „Cookies“ wurde durch Gefilterte Cookies löschen ersetzt. Schaltfläche.
Im Bereich Anwendung > Cookies – geben Sie Text in das Textfeld ein, um die Cookies zu filtern. In In unserem Beispiel filtern wir die Liste nach „PREF“. Klicken Sie auf die Schaltfläche Gefilterte Cookies löschen, die sichtbaren Cookies löschen. Wenn Sie den Filtertext löschen, werden die anderen Cookies weiterhin im Liste. Bisher konnten Sie alle Cookies löschen.
Chromium-Problem: 978059
Neue Option zum Löschen von Drittanbieter-Cookies im Bereich „Speicher“
Beim Löschen der Websitedaten im Bereich Speicher werden in den Entwicklertools jetzt nur eigene Cookies gelöscht. Standardeinstellung. Aktivieren Sie die Option Drittanbieter-Cookies einschließen, um auch die Cookies von Drittanbietern zu löschen.
Chromium-Problem: 1012337
User-Agent-Client-Hints für benutzerdefinierte Geräte bearbeiten
Sie können jetzt User-Agent-Client-Hints für benutzerdefinierte Geräte bearbeiten.
Gehen Sie zu Einstellungen > Geräte und klicken Sie auf Benutzerdefiniertes Gerät hinzufügen.... Maximieren Sie den Bereich User-Agent , um die Clienthinweise zu bearbeiten.
User-Agent-Client-Hints sind eine Alternative zum User-Agent-String, mit der Entwickler auf Informationen über den Browser eines Nutzers auf datenschutzfreundliche und ergonomische Weise. Weitere Informationen zu User-Agent-Client-Hints in web.dev/user-agent-client-hints/
Chromium-Problem: 1073909
Updates des Netzwerkbereichs
„Netzwerkprotokoll aufzeichnen“ beibehalten Einstellung
Die Entwicklertools enthalten jetzt das Protokoll „Netzwerkprotokoll aufzeichnen“ Einstellung. Bisher wurde die Auswahl des Nutzers in den Entwicklertools zurückgesetzt wenn eine Seite neu geladen wird.
Chromium-Problem: 1122580
WebTransport-Verbindungen im Netzwerkbereich ansehen
Im Netzwerkbereich werden jetzt WebTransport-Verbindungen angezeigt.
WebTransport ist eine neue API, die bidirektionale Client-Server-Messaging mit niedriger Latenz bietet. Weitere Informationen und wie Sie Feedback zur Zukunft der Implementierung in web.dev/webtransport/.
Chromium-Problem: 1152290
„Online“ umbenannt in „Keine Drosselung“
Die Netzwerkemulationsoption „Online“ in „No Throttling“ (Keine Drosselung) umbenannt.
Chromium-Problem: 1028078
Neue Kopieroptionen in der Konsole, im Bereich „Quellen“ und im Bereich „Stile“
Neue Verknüpfungen zum Kopieren von Objekten in der Konsole und im Bereich „Quellen“
Mit den neuen Verknüpfungen in der Konsole und im Bereich „Quellen“ können Sie jetzt Objektwerte kopieren. Dies ist praktisch, wenn Sie ein großes Objekt (z.B. ein langes Array) kopieren möchten.
Chromium-Probleme: 1149859, 1148353
Neue Tastenkombinationen zum Kopieren von Dateinamen im Bereich „Quellen“ und im Bereich „Stile“
Sie können jetzt den Dateinamen kopieren, indem Sie mit der rechten Maustaste auf Folgendes klicken:
- eine Datei im Bereich Quellen oder
- den Dateinamen im Bereich Stile des Steuerfelds Elemente
Wählen Sie im Kontextmenü Dateiname kopieren aus, um den Dateinamen zu kopieren.
Chromium-Problem: 1155120
Aktualisierungen der Frame-Detailansicht
Informationen zu neuen Service Workern in der Frame-Detailansicht
In den Entwicklertools werden dedizierte Service Worker unter dem Frame angezeigt, durch den sie erstellt werden.
Maximieren Sie im Bereich Anwendung einen Frame mit Service Workern und wählen Sie dann einen Service Worker aus in der Baumstruktur Service Workers, um die Details aufzurufen.
Chromium-Problem: 1122507
Arbeitsspeicherinformationen in der Frame-Detailansicht messen
Der API-Status von performance.measureMemory()
wird jetzt unter API-Verfügbarkeit angezeigt.
.
Die neue performance.measureMemory()
API schätzt die Arbeitsspeichernutzung der gesamten Webseite. Weitere Informationen
Wie Sie die gesamte Arbeitsspeichernutzung Ihrer Webseite mit dieser neuen API überwachen, erfahren Sie in diesem Artikel.
Chromium-Problem: 1139899
Feedback über den Tab „Probleme“ geben
Wenn Sie eine Problemmeldung verbessern möchten, rufen Sie in der Console den Tab Issues (Probleme) auf oder Weitere Einstellungen > Weitere Tools > Probleme > um den Tab Probleme zu öffnen. Problem maximieren Klicken Sie dann auf Ist die Fehlermeldung für Sie hilfreich?. das Pop-up-Fenster öffnen.
Verworfene Frames im Bereich „Leistung“
Wenn Sie die Ladeleistung im Steuerfeld „Leistung“ analysieren, werden im Bereich Frames Frames rot markiert. Bewege den Mauszeiger darauf, um die Framerate zu sehen.
Chromium-Problem: 1075865
Im Gerätemodus faltbare Geräte und Dual-Screen emulieren
In den Entwicklertools kannst du jetzt Dual Screen- und faltbare Geräte emulieren.
Wählen Sie nach dem Aktivieren der Gerätesymbolleiste eines der folgenden Geräte aus: Surface Duo oder Samsung Galaxy Fold
Klicken Sie auf das Symbol für die neue Spanne, um zwischen Einzelbildschirm oder geklappt und Dual Screen bzw. aufgeklappt zu wechseln. Körperhaltungen.
Sie können auch die Funktionen der experimentellen Webplattform aktivieren, um auf die neuen CSS-Medien zuzugreifen.
screen-spanning
-Funktion und JavaScript getWindowSegments
API. Das Symbol „Experimentell“ zeigt die
Experimental Web Platform features (Experimentelle Webplattform-Funktionen) ein. Das Symbol wird hervorgehoben, wenn die Flagge
aktiviert ist. Rufen Sie chrome://flags
auf und wechseln Sie das Flag.
Chromium-Problem: 1054281
Experimentelle Funktionen
Browsertests mit Puppeteer Recorder automatisieren
Die Entwicklertools können jetzt Puppeteer-Skripte auf der Grundlage Ihrer Interaktion mit dem Browser generieren, können Sie Browsertests leichter automatisieren. Puppeteer ist eine Node.js-Bibliothek, die eine High-Level-API zur Steuerung von Chrome oder Chromium über das DevTools-Protokoll.
Rufen Sie diese Demoseite auf. Öffnen Sie in den Entwicklertools den Bereich Quellen. Wählen Sie den Tab Aufzeichnung auf im linken Bereich. Fügen Sie eine neue Aufzeichnung hinzu und geben Sie der Datei einen Namen, z.B. test01.js.
Klicken Sie unten auf die Schaltfläche Aufzeichnen, um die Interaktion zu starten. Versuchen Sie, Bildschirmformulars zu öffnen. Beachten Sie, dass die Puppeteer-Befehle entsprechend an die Datei angehängt werden. Klicken Sie auf das Klicken Sie noch einmal auf die Schaltfläche Aufzeichnen, um die Aufzeichnung zu beenden.
Folgen Sie dem Startleitfaden auf der offiziellen Website von Puppeteer, um das Skript auszuführen.
Bitte beachte, dass es sich um ein Experiment in der Anfangsphase handelt. Wir arbeiten daran, den Rekorder weiter zu verbessern im Laufe der Zeit.
Chromium-Problem: 1144127
Schriftarteditor im Bereich „Stile“
Der neue Schriftarteditor ist ein Pop-over-Editor, der im Bereich „Stile“ mit den schriftbezogenen Eigenschaften verfügbar ist. um die perfekte Typografie für Ihre Webseite zu finden.
Das Popover bietet eine übersichtliche Benutzeroberfläche zur dynamischen Änderung der Typografie mit einer Reihe intuitiver Eingabetypen.
Chromium-Problem: 1093229
CSS-Flexbox-Debugging-Tools
Die Entwicklertools haben experimentelle Unterstützung für das Flexbox-Debugging seit dem letzten Release hinzugefügt.
In den Entwicklertools wird jetzt eine Führungslinie gezeichnet, damit du die CSS-Eigenschaft align-items
besser visualisieren kannst. Die
CSS-Property gap
wird ebenfalls unterstützt. In unserem Beispiel verwenden wir den CSS-Code gap: 12px;
. Beachten Sie die
Schlüpfmuster für jede Lücke.
Chromium-Problem: 1139949
Neuer Tab „CSP-Verstöße“
Auf dem neuen Tab CSP-Verstöße finden Sie alle Verstöße gegen die Content Security Policy (CSP) auf einen Blick. Dieser neue Tab ist ein Test, der die Arbeit mit Webseiten mit vielen von Verstößen gegen die CSP und vertrauenswürdigen Typen.
Chromium-Problem: 1137837
Neue Berechnung des Farbkontrasts – Advanced Perceptual Contrast Algorithm (APCA)
Der Advanced Perceptual Contrast Algorithm (APCA) ersetzt die AA/AAA. Richtlinien Kontrastverhältnis in der Farbauswahl.
APCA ist eine neue Methode zur Berechnung von Kontrasten, basierend auf der modernen Forschung zur Farbwahrnehmung. Verglichen mit AA/AAA-Richtlinien ist der APCA eher kontextabhängig. Der Kontrast wird basierend auf der räumliche Eigenschaften (Schriftstärke und -größe), Farbe (wahrgenommene Helligkeitsunterschiede zwischen Text und Hintergrund) und Kontext (Umgebungslicht, Umgebung, beabsichtigter Zweck des Textes) enthalten.
Im Beispiel liegt der APCA-Grenzwert bei 38%. Das Kontrastverhältnis muss mindestens dem angegebenen Wert entsprechen. Dieser Wert wird anhand der Schriftstärke und -größe unter Zuhilfenahme dieser APCA-Suchtabelle berechnet.
Chromium-Problem: 1121900
Vorschaukanäle herunterladen
Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Ü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 es tun.
Kontaktaufnahme mit dem Team für Chrome-Entwicklertools
Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.
- Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
- Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
- Twittern Sie unter @ChromeDevTools.
- Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.
Neu in den Entwicklertools
Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools
- Rekorder unterstützt den Export nach Puppeteer für Firefox
- Verbesserungen im Bereich „Leistung“
- Live-Messwerte beobachten
- Suchanfragen im Netzwerk-Track
- Stacktraces von „performance.mark“- und „performance.measure“-Aufrufe ansehen
- Testadressdaten im Autofill-Steuerfeld verwenden
- Verbesserungen im Bereich „Elemente“
- Weitere Status für bestimmte Elemente erzwingen
- Elemente > Mit Stilen werden jetzt mehr Rastereigenschaften automatisch vervollständigt
- Lighthouse 12.2.0
- Verschiedene Highlights
- Console-Statistiken von Gemini sind jetzt in den meisten europäischen Ländern verfügbar
- Aktualisierungen des Leistungssteuerfelds
- Erweiterte Netzwerkeinstellungen
- Leistungsdaten mit der Erweiterbarkeits-API anpassen
- Details zum Track „Timings“
- 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
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
- CSS-Ankerposition im Steuerfeld „Elemente“ prüfen
- Verbesserungen im Bereich „Quellen“
- Erweiterte Option „Hier nie pausieren“
- Neue Listener für Scroll-Snap-Ereignisse
- Verbesserungen im 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 im Bereich „Leistung“
- Tracks mit dem aktualisierten Track-Konfigurationsmodus 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 erkennen
- Storage-Buckets prüfen unter „Anwendung“ > Speicher
- Selbst-XSS-Warnungen mit einem Befehlszeilen-Flag deaktivieren
- Lighthouse 12.0.0
- Verschiedene Highlights
- Fehler und Warnungen in der Console mit Gemini besser verstehen
- Unterstützung von@position-try-Regeln in Elementen > Stile
- Verbesserungen im Bereich „Quellen“
- Automatisches Ansprechen des Drucks und Schließen von Klammern konfigurieren
- Abgelehnte Versprechen werden als nicht gefangen erkannt
- Fehlerursachen in der Konsole
- Verbesserungen im Netzwerkbereich
- Header „Early Hints“ prüfen
- Spalte „Wasserfall“ ausblenden
- Verbesserungen im Bereich „Leistung“
- Statistiken für CSS-Selektoren erfassen
- Reihenfolge ändern und Tracks ausblenden
- Retainer im Bereich „Arbeitsspeicher“ ignorieren
- Lighthouse 11.7.1
- Verschiedene Highlights
- Neues Autofill-Steuerfeld
- Verbesserte Netzwerkdrosselung für WebRTC
- Unterstützung für scrollbare Animationen im Bereich „Animationen“
- Verbesserte Unterstützung für CSS-Verschachtelungen 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
- Kurzinfos für spezielle Kategorien in Memory > Heap-Snapshots
- Anwendung > Speicherplatzupdates
- Für freigegebenen Speicher verwendete Byte
- Web SQL wurde vollständig eingestellt
- Verbesserungen des Abdeckungsbereichs
- Das Steuerfeld „Ebenen“ wird möglicherweise nicht mehr unterstützt
- Einstellung von JavaScript Profiler: Phase 4, letzte
- Verschiedene Highlights
- Finde das Easter Egg
- Aktualisierungen im Bereich „Elemente“
- Eine fokussierte Seite unter „Elemente“ emulieren > Stile
- Farbauswahl, Winkeluhr und Easing-Editor in
var()
-Fallbacks - Tool „CSS-Länge“ wurde eingestellt
- Popover für das ausgewählte Suchergebnis im Bereich „Leistung“ > Hauptstrecke
- Updates für das Netzwerk-Panel
- Schaltfläche „Löschen“ und Suchfilter unter „Netzwerk“ > Tab „EventStream“
- Kurzinfos mit Ausnahmegründen für Drittanbieter-Cookies unter Netzwerk > Kekse
- Alle Haltepunkte unter „Quellen“ aktivieren und deaktivieren
- Geladene Skripts in den Entwicklertools für Node.js ansehen
- Lighthouse 11.5.0
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
- Die offizielle Sammlung von Rekorder-Erweiterungen ist jetzt verfügbar
- Netzwerkverbesserungen
- Fehlerursache in der Spalte „Status“
- Verbessertes Untermenü „Kopieren“
- Leistungsverbesserungen
- Navigationspfade auf der Zeitachse
- Initiatoren von Ereignissen im Haupt-Track
- JavaScript-VM-Instanzauswahlmenü für Node.js-Entwicklertools
- Neue Tastenkombination und neuer Befehl unter „Quellen“
- Verbesserungen der Elemente
- Das Pseudoelement „::view-transition“ kann jetzt in „Stile“ 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 im Bereich „Netzwerk“ und „Anwendung“
- Lighthouse 11.4.0
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
- Verbesserungen der Elemente
- Optimierte Filterleiste im Bereich „Netzwerk“
- Support für
@font-palette-values
- Unterstützter Fall: Benutzerdefinierte Eigenschaft als Fallback einer anderen benutzerdefinierten Eigenschaft
- Verbesserte Unterstützung von Source Maps
- Verbesserungen im Bereich „Leistung“
- Track „Erweiterte Interaktionen“
- Erweiterte Filter auf den Tabs „Bottom-up“, „Aufrufstruktur“ und „Ereignisprotokoll“
- Einzugsmarkierungen im Bereich „Quellen“
- Hilfreiche Kurzinfos zu überschriebenen Headern und Inhalten im Steuerfeld „Netzwerk“
- Neue Optionen im Befehlsmenü zum Hinzufügen und Entfernen von Anfrageblockierungsmustern
- Der Test für CSP-Verstöße wird entfernt
- Lighthouse 11.3.0
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
- Einstellung von Drittanbieter-Cookies
- Cookies Ihrer Website mit dem Privacy Sandbox Analysis Tool analysieren
- Erweitertes Ignorieren von Listen
- Standardausschlussmuster für node_modules
- Abgefangene Ausnahmen beenden jetzt die Ausführung, wenn sie erkannt oder nicht ignoriert werden
x_google_ignoreList
wurde in Quellzuordnungen inignoreList
umbenannt- Neue Ein/Aus-Schaltfläche für den Eingabemodus beim Remote-Debugging
- Im Steuerfeld „Elemente“ werden jetzt URLs für #documentknoten angezeigt
- Effektive Content Security Policy im Anwendungsbereich
- Verbessertes Debugging für Animationen
- "Ist dieser Code vertrauenswürdig?" Dialogfeld in „Quellen und Selbst-XSS-Warnung“ in der Console
- Event-Listener-Haltepunkte in Web Workern und Worklets
- Das neue Medien-Badge für
<audio>
und<video>
- Vorabladen wurde in „Spekulatives Laden“ umbenannt
- Lighthouse 11.2.0
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
- Verbesserter @property-Bereich unter „Elements“ > Stile
- Bearbeitbare @property-Regel
- Probleme mit ungültigen @property-Regeln werden gemeldet
- Liste der zu emulierenden Geräte aktualisiert
- Pretty Print Inline-JSON in Script-Tags unter „Quellen“
- Private Felder in der Console automatisch vervollständigen
- Lighthouse 11.1.0
- Verbesserte Bedienungshilfen
- Einstellung von Web SQL
- Validierung des Seitenverhältnisses für Screenshots unter „Anwendung“ > Manifest
- Verschiedene Highlights
- Neuer Bereich für benutzerdefinierte Eigenschaften 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 optimierte Darstellung für weitere Skripttypen
- Medienfunktion „Bevorzugt-reduzierte-Transparenz“ emulieren
- Leuchtturm 11
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
- Verbesserungen im Netzwerkbereich
- Webinhalte noch schneller lokal überschreiben
- Inhalt von XHR und Abrufanfragen überschreiben
- Chrome-Erweiterungsanfragen ausblenden
- Für Menschen lesbare HTTP-Statuscodes
Leistung: Änderungen der Abrufpriorität für Netzwerkereignisse ansehen
- Standardeinstellungen für Quellen: Code Folding und automatische Dateianzeige
- 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
- Verschiedene 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 Storage-Buckets und Metadatenansicht
- Lighthouse 10.3.0
- Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader-Funktion
- Verschiedene Highlights
- Verbesserungen der Elemente
- Neues Preisvergleichsportal-Badge
- Auswahlspezifität in Kurzinfos
- Werte von benutzerdefinierten CSS-Eigenschaften in Kurzinfos
- Verbesserungen bei Quellen
- CSS-Syntaxhervorhebung
- Verknüpfung zum Festlegen bedingter Haltepunkte
- Anwendung > Eindämmung von Bounce-Tracking
- Lighthouse 10.2.0
- Content-Skripts standardmäßig ignorieren
- Netzwerk > Verbesserte Reaktionen
- Verschiedene Highlights
- Unterstützung für WebAssembly-Debugging
- Verbessertes Schrittverhalten in Wasm-Apps
- Fehlerbehebung bei Autofill mithilfe des Steuerfelds „Elemente“ und des Tabs „Probleme“
- Assertions in der Rekorder App
- Lighthouse 10.1.1
- Leistungsverbesserungen
- performance.mark() zeigt den Zeitpunkt an, wenn der Mauszeiger auf „Leistung“ > Zeitplan
- profile() füllt Leistung > Hauptnummer
- Warnung bei langsamen Nutzerinteraktionen
- Web Vitals-Updates
- Einstellung von JavaScript Profiler: Phase 3
- Verschiedene Highlights
- Netzwerkantwortheader überschreiben
- Verbesserungen bei der Fehlerbehebung für Nuxt, Vite und Rollup
- CSS-Verbesserungen unter „Elemente“ > Stile
- Ungültige CSS-Eigenschaften und -Werte
- Links zu wichtigen Frames in der Kurzform-Eigenschaft für Animationen
- Neue Konsoleneinstellung: Automatische Vervollständigung bei Eingabetaste
- Im Befehlsmenü werden erstellte Dateien hervorgehoben
- Einstellung von JavaScript Profiler: Phase 2
- Verschiedene Highlights
- Updates für Rekorder
- Rekorder-Replay-Erweiterungen
- Datensatz mit Pierce-Selektoren erstellen
- Mit Lighthouse-Analyse Aufnahmen als Puppeteer-Scripts exportieren
- Erweiterungen für Rekorder herunterladen
- Elemente > Stiländerungen
- CSS-Dokumentation im Bereich „Stile“
- Unterstützung für verschachtelte Preisvergleichsportale
- Logpoints und bedingte Haltepunkte in der Console markieren
- Irrelevante Skripts bei der Fehlerbehebung ignorieren
- Einstellung von JavaScript Profiler gestartet
- Weniger Kontrast emulieren
- Leuchtturm 10
- Verschiedene Highlights
- Fehlerbehebung bei HD-Farben mit dem Bereich „Stile“
- Verbesserte Haltepunkt-UX
- Anpassbare Tastenkombinationen für die Rekorder App
- Bessere Syntaxhervorhebung für Angular
- Caches im Anwendungsbereich neu organisieren
- Verschiedene Highlights
- Bereich „Leistung“ beim Aktualisieren löschen
- Updates für Rekorder
- Code Ihres User Flows in der Rekorder App ansehen und hervorheben
- Auswahltypen für Aufzeichnungen anpassen
- Nutzerfluss während der Aufzeichnung bearbeiten
- Automatischer Direktdruck
- Bessere Syntaxhervorhebung und Inline-Vorschau für Vue, SCSS und mehr
- Ergonomische und konsistente automatische Vervollständigung in der Console
- Verschiedene Highlights
- Rekorder: Kopieren als Optionen für Schritte, In-Page-Wiedergabe, Kontextmenü des Schritts
- Tatsächliche Funktionsnamen in Aufzeichnungen der Aufführung anzeigen
- Neue Tastenkombinationen in der Console und Bereich „Quellen“
- Verbesserte JavaScript-Fehlerbehebung
- Verschiedene Highlights
- [Experimentell] Verbesserte UX beim Verwalten von Haltepunkten
- [Experimentell] Automatischer Direktdruck
- Hinweise für inaktive CSS-Eigenschaften
- XPath und Textauswahlen im Rekorder-Bereich automatisch erkennen
- Durch Kommas getrennte Ausdrücke ausführen
- Verbesserte Einstellung der Ignorieren-Liste
- Verschiedene Highlights
- Tastenkombinationen in den Entwicklertools anpassen
- Über Tastenkombination zwischen helles und dunkles Design wechseln
- C/C++ Objekte im Memory Inspector hervorheben
- Vollständige Initiatorinformationen für den HAR-Import unterstützen
- DOM-Suche nach Drücken von
Enter
starten - Symbole
start
undend
füralign-content
CSS-Flexbox-Eigenschaften anzeigen - Verschiedene Highlights
- Dateien im Bereich „Quellen“ nach „Erstellt“/„Bereitgestellt“ gruppieren
- Verknüpfte Stacktraces für asynchrone Vorgänge
- Bekannte Drittanbieterskripts automatisch ignorieren
- Verbesserter Aufrufstack 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-Timings im Bereich „Leistungsstatistiken“
- Im Rekorder-Bereich automatisch Standardnamen für Aufnahmen generieren
- Verschiedene Highlights
- Detaillierte Wiedergabe in der Rekorder App
- Unterstützung von Mouseover-Ereignissen im Rekorder-Bereich
- Largest Contentful Paint (LCP) im Bereich „Leistungsstatistiken“
- Flirten im Text (FOIT, FOUT) als mögliche Ursachen für Layout Shifts identifizieren
- Protokoll-Handler im Bereich „Manifest“
- Badge der obersten Ebene im Steuerfeld „Elemente“
- Wasm-Debugging-Informationen zur Laufzeit anhängen
- Livebearbeitung während der Fehlerbehebung unterstützen
- @Scope at-Regeln im Bereich „Styles“ ansehen und bearbeiten
- Verbesserungen an der Quellkarte
- Verschiedene Highlights
- Frame während der Fehlerbehebung neu starten
- Optionen für die langsame Wiedergabe im Rekorder-Bereich
- Erweiterung für das Rekorder-Steuerfeld erstellen
- Dateien im Bereich „Quellen“ nach „Erstellt“/„Bereitgestellt“ gruppieren
- Neuer Bericht „Nutzertimings“ im Bereich „Leistungsstatistiken“
- Zugewiesene Anzeigenfläche eines Elements anzeigen
- Nebenläufigkeit der Hardware für Performance-Aufzeichnungen simulieren
- Vorschau des Nicht-Farbwerts beim automatischen Vervollständigen von CSS-Variablen
- blockierende Frames im Bereich „Back-Forward-Cache“ identifizieren
- Verbesserte Vorschläge für die automatische Vervollständigung von JavaScript-Objekten
- Verbesserungen an Quellkarten
- Verschiedene Highlights
- Doppelklick- und Rechtsklickereignisse im Bereich „Rekorder“ erfassen
- Neuer Zeitraum und Snapshot-Modus im Lighthouse-Steuerfeld
- Verbesserte Zoomsteuerung im Bereich „Leistungsstatistiken“
- Löschen einer Leistungsaufzeichnung bestätigen
- Bereiche im Steuerfeld „Elemente“ 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 Authenticatoren
- Neue Tastenkombinationen im Bereich „Quellen“
- Verbesserungen an Quellkarten
- Vorschaufunktion: Neuer Bereich „Leistungsstatistiken“
- Neue Tastenkombinationen, um helle und dunkle Designs zu emulieren
- Verbesserte Sicherheit auf dem Tab „Netzwerkvorschau“
- Verbessertes Neuladen an Haltepunkten
- Updates für die Console
- Nutzerfluss-Aufzeichnung zu Beginn abbrechen
- Übernommene Pseudoelemente zum Hervorheben im Bereich „Stile“ anzeigen
- Verschiedene Highlights
- [Experimentell] CSS-Änderungen kopieren
- [Experimentell] Farbe außerhalb des Browsers auswählen
- Erfasste Nutzerflüsse als JSON-Datei importieren und exportieren
- Kaskadenebenen im Bereich „Stile“ ansehen
- Unterstützung der Farbfunktion
hwb()
- Verbesserte Darstellung von Privatgrundstücken
- Verschiedene Highlights
- [Experimentell] Neuer Zeitraum und Snapshot-Modus im Lighthouse-Steuerfeld
- @supports bei Regeln im Bereich „Stile“ ansehen und bearbeiten
- Standardmäßig gängige Selektoren unterstützen
- Auswahl der Aufnahme anpassen
- Aufzeichnungen umbenennen
- Vorschau von Klassen-/Funktionseigenschaften, wenn der Mauszeiger darauf bewegt wird
- Teilweise präsentierte Frames im Bereich „Leistung“
- Verschiedene Highlights
- WebSocket-Anfragen drosseln
- Neuer Bereich „Reporting API“ im Anwendungsbereich
- Warten, bis das Element im Rekorder-Bereich sichtbar/anklickbar ist
- Bessere Gestaltung, Formatierung und Filterung von Konsolen
- Fehler in Chrome-Erweiterung mit Quellzuordnungsdateien beheben
- Verbesserte Struktur des Quellordners im Bereich „Quellen“
- Worker-Quelldateien im Bereich „Quellen“ aufrufen
- Updates für das automatische dunkle Design in Chrome
- Touchbedienungsfreundliche Farbauswahl und Teilfenster
- Verschiedene Highlights
- Vorschaufunktion: Ganzseitige Baumstruktur für Barrierefreiheit
- Genauere Ä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 „Eigenschaften“
- CSS-Medienfunktion „forced-colors“ emulieren
- Lineal einblenden, wenn der Mauszeiger darauf bewegt wird
- Unterstützung von
row-reverse
undcolumn-reverse
im Flexbox-Editor - Neue Tastenkombinationen zur Wiedergabe von XHR und Erweitern aller Suchergebnisse
- Lighthouse 9 im Bereich „Leuchtturm“
- Verbesserter Bereich „Quellen“
- Verschiedene Highlights
- [Experimentell] Endpunkte im Bereich „Reporting API“
- Vorschaufunktion: Neuer Rekorder-Bereich
- Geräteliste im Gerätemodus aktualisieren
- Mit „Als HTML bearbeiten“ automatisch vervollständigen
- Verbessertes Code-Debugging
- Entwicklertools-Einstellungen geräteübergreifend synchronisieren
- Vorschaufunktion: Neues Bereich „CSS-Übersicht“
- Verbessertes Bearbeiten und Kopieren von CSS-Längen
- Funktion „Kontrast-Kontrast“ in CSS emulieren
- Funktion „Automatisches dunkles Design“ von Chrome emulieren
- Im Bereich „Stile“ Deklarationen als JavaScript kopieren
- Neuer Nutzlast-Tab im Bereich „Network“ (Netzwerk)
- Verbesserte Anzeige der Eigenschaften im Bereich „Eigenschaften“
- Option zum Ausblenden von CORS-Fehlern in der Console
- Korrekte Vorschau und Auswertung von
Intl
-Objekten in der Console - Einheitliche asynchrone Stacktraces
- Konsolen-Seitenleiste beibehalten
- Bereich „Verworfener Anwendungs-Cache“ im Bereich „Anwendung“
- [Experimentell] Neuer Bereich „Reporting API“ im Bereich „Anwendungen“
- 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 übersetzten Versionshinweisen und Meldung eines Übersetzungsfehlers
- Verbesserte Benutzeroberfläche für das Befehlsmenü der Entwicklertools
- Entwicklertools in deiner bevorzugten Sprache verwenden
- Neue Nest Hub-Geräte in der Geräteliste
- Ursprungstests in der Frame-Detailansicht
- Logo für neue Preisvergleichsportal-Containerabfragen
- Neues Kästchen zum Umkehren der Netzwerkfilter
- Geplante Einstellung der Console-Seitenleiste
- Auf dem Tab „Probleme“ und im Bereich „Netzwerk“ können Sie unformatierte
Set-Cookies
-Header 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“
- Webset-Vorschau im Bereich „Netzwerk“
- Fehlerbehebung für die Attribution Reporting API
- Bessere Stringverarbeitung in der Console
- Verbessertes CORS-Debugging
- Lighthouse 8.1
- Neue Notiz-URL im Manifestbereich
- Feste CSS-Abgleichselektoren
- Perfekt gedruckte JSON-Antworten im Bereich „Netzwerk“
- CSS-Rastereditor
- Unterstützung für
const
-Erneute Deklarationen in der Console - Quellauftrags-Viewer
- Neue Verknüpfung zum Anzeigen von Framedetails
- Erweiterte Unterstützung für CORS-Debugging
- XHR-Label in Fetch/XHR umbenennen
- Wasm-Ressourcentyp im Bereich „Netzwerk“ filtern
- User-Agent-Clienthinweise für Geräte im Tab „Netzwerkbedingungen“
- Probleme mit dem Quirks-Modus auf dem Tab „Probleme“ melden
- Kreuzungen im Bereich „Leistung“ in das Steuerfeld „Leistung“ aufnehmen
- Lighthouse 7.5 im Lighthouse-Steuerfeld
- Einstellung "Frame neu starten" Kontextmenü im Aufrufstack
- [Experimentell] Protokollmonitor
- [Experimentell] Puppeteer-Rekorder
- Pop-up mit Web Vitals-Informationen
- Neues Arbeitsspeicher-Prüftool
- CSS-Scroll-Snap visualisieren
- Neuer Bereich „Logoeinstellungen“
- Verbesserte Bildvorschau mit Informationen zum Seitenverhältnis
- Neue Schaltfläche für Netzwerkbedingungen mit Optionen zum Konfigurieren von
Content-Encoding
s - Verknüpfung zum Aufrufen des berechneten Werts
accent-color
Keyword- Problemtypen mit Farben und Symbolen kategorisieren
- Trust-Tokens löschen
- Blockierte Funktionen in der Detailansicht des Frames
- Tests in der Einstellung „Tests“ filtern
- Neue Spalte
Vary Header
im Bereich „Cache-Speicher“ - Unterstützung privater JavaScript-Markenprüfungen
- Erweiterte Unterstützung für das Debugging von Haltepunkten
- Vorschau beim Bewegen des Mauszeigers mit der Notation
[]
unterstützen - Verbesserte Gliederung von HTML-Dateien
- Korrekte Fehler-Stacktraces für das Wasm-Debugging
- Neue CSS-Flexbox-Debugging-Tools
- Neues Core Web Vitals-Overlay
- Problemanzahl wurde in die Statusleiste der Console verschoben
- Probleme mit vertrauenswürdigen Webaktivitäten melden
- Strings in der Konsole als (gültige) JavaScript-Stringliterale formatieren
- Neuer Bereich „Trust Tokens“ im Anwendungsbereich
- CSS-Funktion „Color-Gamut-Medien“ emulieren
- Verbesserte Tools für progressive Web-Apps
- Neue Spalte
Remote Address Space
im Steuerfeld „Netzwerk“ - Leistungsverbesserungen
- Zulässige/nicht zulässige Funktionen in der Frame-Detailansicht anzeigen
- Neue Spalte
SameParty
im Bereich „Cookies“ - Eingestellter nicht standardmäßiger
fn.displayName
-Support - 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] Baumansicht mit vollständiger Barrierefreiheit im Bereich „Elemente“
- Fehlerbehebung bei der Unterstützung von Verstößen gegen vertrauenswürdige Typen
- Knoten-Screenshot über den Darstellungsbereich hinaus aufnehmen
- Neuer Tab „Trust Tokens“ für Netzwerkanfragen
- Lighthouse 7 im Bereich „Leuchtturm“
- Unterstützung beim Erzwingen des Preisvergleichsportal-Status
:target
- Neue Verknüpfung zum Duplizieren eines Elements
- Farbauswahl für benutzerdefinierte CSS-Eigenschaften
- 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
- "Netzwerkprotokoll aufzeichnen" beibehalten Einstellung
- WebTransport-Verbindungen im Bereich „Netzwerk“ ansehen
- „Online“ in „Keine Drosselung“ umbenannt.
- Neue Kopieroptionen in der Konsole, im Bereich „Quellen“ und im Bereich „Stile“
- Informationen zu neuen Service Workern in der Frame-Detailansicht
- Arbeitsspeicherinformationen in der Frame-Detailansicht messen
- Feedback über den Tab „Probleme“ geben
- Im Bereich „Leistung“ abgelegte Frames
- Faltbare Geräte und Dual-Display im Gerätemodus emulieren
- [Experimentell] Browsertests mit dem Puppeteer-Rekorder automatisieren
- [Experimentell] Schriftarteditor 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)
- Schnellerer Start der Entwicklertools
- Neue CSS-Tools zur Visualisierung von Winkeln
- 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 Ansicht „Frame-Details“
- Informationen zu neuen Web Workern in der Frame-Detailansicht
- Details zum Start-Frame 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 Debugging-Tools für CSS Grid
- Neuer Tab „WebAuthn“
- Tools in das obere und untere Steuerfeld verschieben
- Neuer Bereich „Berechnete Seitenleiste“ 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 „Netzwerk“ - Aktualisierungen der Framedetailansicht
Settings
im Menü „Weitere Tools“ wird eingestellt- [Experimentell] Kontrastprobleme 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
- Neuerungen beim Tab „Probleme“
- Fehlende lokale Schriftarten emulieren
- Inaktive Nutzer emulieren
prefers-reduced-data
emulieren- Unterstützung neuer JavaScript-Funktionen
- Lighthouse 6.2 im Lighthouse-Steuerfeld
- „Andere Ursprünge“ werden eingestellt im Bereich „Service Workers“
- Zusammenfassung der Abdeckung für gefilterte Elemente einblenden
- Neue Frame-Detailansicht im Anwendungsbereich
- Barrierefreie Farbvorschläge im Bereich „Stile“
- Bereich Eigenschaften im Bereich „Elemente“ wieder aktivieren
- Für Menschen 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-Bereich
- Einstellung von First Meaningful Paint (FMP)
- Unterstützung neuer JavaScript-Funktionen
- Neue Warnungen zu App-Verknüpfungen im Manifestbereich
- Service Worker-
respondWith
-Ereignisse auf dem Tab „Timing“ - Konsistente Anzeige des berechneten Bereichs
- Bytecode-Offsets für WebAssembly-Dateien
- Zeilenweises Kopieren und Ausschneiden im Bereich „Quellen“
- Änderungen an den Einstellungen in der Konsole
- Aktualisierungen des Leistungssteuerfelds
- Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpoints
- Websiteprobleme mit dem neuen Tab „Probleme“ beheben
- Kurzinfo zum Prüfmodus: Informationen zur Barrierefreiheit ansehen
- Aktualisierungen des Leistungssteuerfelds
- Genauere Promise-Terminologie in der Console
- Aktualisierungen des Stilbereichs
- Der Bereich Eigenschaften im Elementbereich wird eingestellt
- Unterstützung von App-Verknüpfungen im Manifestbereich
- Sehschwäche emulieren
- Gebietsschemata emulieren
- Fehlerbehebung bei COEP-Richtlinien (Cross-Origin Embedder Policy)
- 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 maskierbarer Symbole im Manifestbereich
- Unterstützung für Moto G4 im Gerätemodus
- Aktualisierungen in Bezug auf Cookies
- Genauere Manifest-Symbole für Web-Apps
- 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
let
- undclass
-Erneute Deklarationen in der Console - Verbessertes WebAssembly-Debugging
- Initiator-Ketten auf dem Tab „Initiator“ anfordern
- Ausgewählte Netzwerkanfrage in der Übersicht markieren
- Spalten für URL und Pfad im Steuerfeld „Netzwerk“
- Aktualisierte User-Agent-Strings
- Neue Konfigurations-UI für den Bereich „Audits“
- Codeabdeckungsmodi pro Funktion oder pro Block
- Die Codeabdeckung muss jetzt durch eine Seitenaktualisierung initiiert werden
- Fehler bei der Blockierung von Cookies beheben
- Cookiewerte ansehen
- Simulieren Sie verschiedene bevorzugte Farbschemata und bevorzugte Bewegungspräferenzen.
- Aktualisierungen der Codeabdeckung
- Fehlerbehebung, wenn eine Netzwerkressource angefordert wurde
- In den Bereichen „Konsole“ und „Quellen“ werden die Einstellungen für die Einrückung wieder berücksichtigt.
- Neue Tastenkombinationen 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“
- Probleme mit DevTools-Dateien über das Hauptmenü
- Unterelementstile kopieren
- Layout Shifts visualisieren
- Lighthouse 5.1 im Bereich „Audits“
- Synchronisierung des Betriebssystems
- Tastenkombination zum Öffnen des Breakpoint-Editors
- Prefetch-Cache im Bereich „Netzwerk“
- Private Properties beim Ansehen von Objekten
- Benachrichtigungen und Push-Nachrichten im Anwendungsbereich
- Automatische Vervollständigung mit CSS-Werten
- Neue Benutzeroberfläche für Netzwerkeinstellungen
- WebSocket-Nachrichten in HAR-Exporten
- Schaltflächen für den HAR-Import und -Export
- Arbeitsspeichernutzung in Echtzeit
- Portnummern für die Service Worker-Registrierung
- Hintergrundabruf- und Hintergrundsynchronisierungsereignisse 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
- Unkomprimierte Größe einer Ressource ansehen, wenn der Mauszeiger darauf bewegt wird
- Haltepunkte im Bereich „Breakpoints“ inline anzeigen
- Anzahl der indexierten Datenbanken und Cache-Ressourcen
- Einstellung zum Deaktivieren der detaillierten Kurzinfo „Prüfen“
- 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 des Bereichs im Befehlsmenü aufnehmen
- Service Worker-Filter im Bereich „Network“
- Aktualisierungen des Leistungssteuerfelds
- Lange Aufgaben bei Aufzeichnungen im Bereich „Leistung“
- First Paint im Bereich „Timing“
- Bonustipp: Verknüpfung zum Anzeigen der RGB- und HSL-Farbcodes (Video)
- Logpoints
- Detaillierte Kurzinfos im Prüfmodus
- Codeabdeckungsdaten exportieren
- Konsole mit einer Tastatur verwenden
- Linie für AAA-Kontrastverhältnis in der Farbauswahl
- Benutzerdefinierte Überschreibungen für die Standortbestimmung speichern
- Code Folding
- Tab „Frames“ wurde in Tab „Nachrichten“ umbenannt
- Bonustipp: Im Steuerfeld "Netzwerk" nach Property filtern (Video)
- Im Bereich „Leistung“ Leistungsmesswerte visualisieren
- Textknoten in der DOM-Struktur hervorheben
- JS-Pfad in einen DOM-Knoten kopieren
- Aktualisierungen des Audit-Bereichs, einschließlich einer neuen Prüfung erkennt JS-Bibliotheken und neue Suchbegriffe für den Zugriff auf das Audit-Steuerfeld über das Befehlsmenü.
- Bonustipp: Medienabfragen 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
- Haltepunkte für Bild im Bild
- Bonustipp: Mit
monitorEvents()
können Sie die ausgelösten Ereignisse eines Knotens im Console (Video) - Live-Ausdrücke in der Console
- DOM-Knoten während der Eager Evaluation hervorheben
- Optimierungen im Leistungssteuerfeld
- Zuverlässigere Fehlerbehebung
- Netzwerkdrosselung über das Befehlsmenü aktivieren
- Bedingte Haltepunkte für automatische Vervollständigung
- Unterbrechung bei AudioContext-Ereignissen
- Fehler in Node.js-Anwendungen mit ndb beheben
- Bonustipp: Messen Sie Interaktionen von Nutzern in der realen Welt mit der User Timing API.
- Eifrig evaluiert
- Argumenthinweise
- Automatische Vervollständigung von Funktionen
- ES2017-Keywords
- Lighthouse 3.0 im Bereich „Audits“
- BigInt-Unterstützung
- Property-Pfade zum Beobachtungsbereich hinzufügen
- „Zeitstempel anzeigen“ in die Einstellungen verschoben
- Bonustipp: Weniger bekannte Konsolenmethoden (Video)
- In allen Netzwerkheadern suchen
- Vorschau der Werte von CSS-Variablen
- Als Abruf kopieren
- Neue Audits, Desktop-Konfigurationsoptionen und Traces ansehen
- Endlosschleifen beenden
- Nutzertiming auf den Tabs „Leistung“
- JavaScript-VM-Instanzen sind im Bereich „Arbeitsspeicher“ übersichtlich aufgeführt
- Tab „Network“ wurde in Tab „Page“ (Seite) umbenannt
- Änderungen am dunklen Design
- Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“
- Funktionen der Website-Isolierung im Bereich „Leistung“
- Bonustipp: Bedienfeld „Layers“ + Animations Inspector (Video)
- Blackboxing im Bereich „Netzwerk“
- Zoomen im Gerätemodus automatisch anpassen
- Perfekter Druck auf den Tabs „Vorschau“ und „Antwort“
- HTML-Inhalte auf dem Tab „Vorschau“ 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 Leistungsprüfungen
- Mehrere Aufzeichnungen im Bereich „Leistung“
- Zuverlässiges Code-Stepping mit Workern in asynchronem Code
- Zusatztipp: Automatisieren Sie Entwicklertools-Aktionen mit Puppeteer (Video)
- Leistungsüberwachung
- Seitenleiste der Console
- Ähnliche Konsolennachrichten gruppieren
- Bonustipp: Pseudoklasse für Hover ein-/ausschalten (Video)
- Fehlerbehebung per Fernzugriff für mehrere Clients
- Arbeitsbereiche 2.0
- 4 neue Prüfungen
- Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren
- Synchronisierungsereignisse im Hintergrund mit benutzerdefinierten Tags auslösen
- Bonustipp: Event-Listener-Haltepunkte (Video)
- Das Wichtigste in der Console
- Neue Workflows für Screenshots
- Hervorhebung des CSS-Rasters
- Neue Console API zum Abfragen von Objekten
- Neue Konsolenfilter
- HAR-Importe im Bereich „Netzwerk“
- Cache-Ressourcen in der Vorschau
- Vorhersagbarere Cache-Fehlerbehebung
- Codeabdeckung auf Blockebene
- Simulation der Drosselung von Mobilgeräten
- Speichernutzung ansehen
- Ansehen, wenn ein Service Worker Antworten im Cache gespeichert hat
- FPS-Messtool über das Befehlsmenü aktivieren
- Mausradverhalten zum Zoomen oder Scrollen festlegen
- Unterstützung der Fehlerbehebung für ES6-Module
- Neuer Audit-Bereich
- Drittanbieterlogos
- Eine neue Touch-Geste für „Weiter bis hier“
- In den asynchronen Modus wechseln
- Aussagekräftigere Objektvorschauen in der Console
- Aussagekräftigere Kontextauswahl in der Console
- Echtzeitaktualisierungen auf dem Tab „Abdeckung“
- Einfachere Optionen zur Netzwerkdrosselung
- Asynchrone Stacks standardmäßig aktiviert
- Abdeckung von CSS- und JS-Code
- Ganzseitige Screenshots
- Anfragen blockieren
- Schritt zu „Await“
- Einheitliches Befehlsmenü