Schnellerer Start der Entwicklertools
Die Entwicklertools starten jetzt ~37% schneller in Bezug auf die JavaScript-Kompilierung (von 6,9 auf 5 Sekunden). 🎉
Das Team führte einige Optimierungen durch, um den Leistungsaufwand bei Serialisierung, Parsen und Deserialisierung während des Start-ups zu reduzieren.
In einem kommenden Engineering-Blogpost wird die Implementierung im Detail erläutert. Mehr dazu demnächst!
Chromium-Problem: 1029427
Neue CSS-Tools zur Winkelvisualisierung
Die Entwicklertools bieten jetzt eine bessere Unterstützung für das CSS-Winkel-Debugging.
Wenn auf ein HTML-Element auf Ihrer Seite ein CSS-Winkel angewendet wird (z.B. background: linear-gradient(angle, color-stop1, color-stop2)
, transform: rotate(angle)
), wird im Bereich „Stile“ neben dem Winkel ein Uhrensymbol angezeigt. Klicke auf das Uhrensymbol, um das Uhr-Overlay umzuschalten. Klicke auf eine beliebige Stelle in der Uhr oder ziehe die Nadel, um den Winkel zu ändern!
Es gibt auch Maus- und Tastenkombinationen zum Ändern des Winkelwerts. Weitere Informationen finden Sie in unserer Dokumentation.
Chromium-Probleme: 1126178, 1138633
Nicht unterstützte Bildtypen emulieren
In den Entwicklertools wurden auf dem Tab „Rendering“ zwei neue Emulationen hinzugefügt, mit denen du die AVIF- und WebP-Bildformate deaktivieren kannst. Diese neuen Emulationen erleichtern es Entwicklern, verschiedene Szenarien beim Laden von Bildern zu testen, ohne den Browser wechseln zu müssen.
Angenommen, wir haben den folgenden HTML-Code, um ein Bild in AVIF und WebP für neuere Browser mit einem PNG-Fallback-Bild für ältere Browser bereitzustellen.
<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="A test image">
</picture>
Öffnen Sie den Tab Rendering, wählen Sie „AVIF-Bildformat deaktivieren“ aus und aktualisieren Sie die Seite. Bewegen Sie den Mauszeiger auf img src
. Die aktuelle Bildquelle (currentSrc
) ist jetzt das WebP-Fallback-Bild.
Chromium-Problem: 1130556
Größe des Speicherkontingents im Bereich „Speicher“ simulieren
Sie können jetzt die Größe des Speicherkontingents im Bereich „Speicher“ überschreiben. Mit diesem Feature können Sie verschiedene Geräte simulieren und das Verhalten Ihrer Anwendungen in Szenarien mit geringer Laufwerksverfügbarkeit testen.
Gehen Sie zu Anwendung > Speicher, aktivieren Sie das Kästchen Benutzerdefiniertes Speicherkontingent simulieren und geben Sie eine gültige Zahl ein, um das Speicherkontingent zu simulieren.
Chromium-Probleme: 945786, 1146985
Neue Web Vitals-Spur in den Aufzeichnungen im Bereich „Leistung“
Bei Leistungsaufzeichnungen können jetzt auch Web Vitals-Daten angezeigt werden.
Nachdem Sie die Ladeleistung erfasst haben, klicken Sie im Bereich „Leistung“ das Kästchen Web Vitals an, um die neue Web Vitals-Spur zu sehen.
Hier werden derzeit Web Vitals-Informationen wie First Contentful Paint (FCP), Largest Contentful Paint (LCP) und Layout Shift (LS) angezeigt.
Unter web.dev/vitals findest du weitere Informationen dazu, wie du die Nutzererfahrung mit den WebVitals-Messwerten optimieren kannst.
Chromium-Problem: –
CORS-Fehler im Steuerfeld „Netzwerk“ melden
In den Entwicklertools wird jetzt ein CORS-Fehler angezeigt, wenn eine Netzwerkanfrage aufgrund von Cross-Origin Resource Sharing (CORS) fehlgeschlagen ist.
Sehen Sie sich im Bereich Netzwerk die fehlgeschlagene CORS-Netzwerkanfrage an. In der Statusspalte wird "CORS_error" angezeigt. Bewegen Sie den Mauszeiger auf den Fehler. In der Kurzinfo wird jetzt der Fehlercode angezeigt. Bisher wurde in den Entwicklertools für CORS-Fehler nur der allgemeine Status (fehlgeschlagen) angezeigt.
Damit legen Sie den Grundstein für unsere nächsten Verbesserungen, die eine detailliertere Beschreibung der CORS-Probleme bieten.
Chromium-Problem: 1141824
Aktualisierungen der Frame-Detailansicht
Informationen zur ursprungsübergreifenden Isolierung in der Frame-Detailansicht
Der Status der ursprungsübergreifenden Isolierung wird jetzt im Abschnitt Sicherheit und Isolierung angezeigt.
Im neuen Bereich API-Verfügbarkeit wird die Verfügbarkeit von SharedArrayBuffer
s (SAB) angezeigt und angegeben, ob sie mit postMessage()
freigegeben werden können.
Es wird eine Einstellungswarnung angezeigt, wenn das SAB und postMessage()
derzeit verfügbar sind. Der Kontext ist jedoch nicht ursprungsübergreifend isoliert. Weitere Informationen zur ursprungsübergreifenden Isolierung und dazu, warum sie für Features wie SharedArrayBuffers
erforderlich ist, finden Sie in diesem Artikel.
Chromium-Problem: 1139899
Informationen zu neuen Web Workern in der Frame-Detailansicht
In den Entwicklertools werden jetzt dedizierte Web-Worker unter dem Frame angezeigt, in dem sie erstellt wurden.
Maximieren Sie im Bereich Anwendung einen Frame mit Web-Workern und wählen Sie dann unter der Worker-Baumstruktur einen Worker aus, um die Details des Web-Workers aufzurufen.
Chromium-Probleme: 1122507, 1051466
Details zum Eröffnungsrahmen für geöffnete Fenster anzeigen
Sie können jetzt die Details dazu anzeigen, welcher Frame zum Öffnen eines weiteren Fensters geführt hat.
Wählen Sie unter der Struktur Frames ein geöffnetes Fenster aus, um die Fensterdetails aufzurufen. Klicken Sie auf den Link Opener Frame, um den Opener-Frame im Bereich „Elements“ einzublenden.
Chromium-Problem: 1107766
Netzwerkbereich über Service Workers-Bereich öffnen
Über den neuen Link Netzwerkanfragen können Sie sich alle Informationen zum Routing von Service Worker-Anfragen (SW) ansehen. Dies bietet Entwicklern zusätzlichen Kontext beim Debugging der Software.
Rufen Sie Application > Service Workers (Anwendung > Service Workers) auf und klicken Sie auf die Network requests (Netzwerkanfragen) eines SW. Im unteren Bereich wird der Bereich Netzwerk geöffnet. Dort sehen Sie alle Service Worker-Anfragen. Die Netzwerkanfragen werden nach "is:service-worker-intercepted" gefiltert.
Chromium-Problem: –
Neue Kopieroptionen im Steuerfeld „Netzwerk“
Property-Wert kopieren
Mit der neuen Option Wert kopieren im Kontextmenü können Sie den Attributwert einer Netzwerkanfrage kopieren.
Klicken Sie im Bereich Netzwerk auf eine Netzwerkanfrage, um den Bereich Headers zu öffnen. Klicken Sie mit der rechten Maustaste auf eine der Eigenschaften im folgenden Abschnitt: Anfrage-Nutzlast (JSON) Formulardaten Abfragestring-Parameter Anfrageheader-Antwortheader
Anschließend können Sie Wert kopieren auswählen, um den Eigenschaftswert in die Zwischenablage zu kopieren.
Chromium-Problem: 1132084
Stacktrace für Netzwerkinitiator kopieren
Klicken Sie mit der rechten Maustaste auf eine Netzwerkanfrage und wählen Sie Stacktrace kopieren aus, um den Stacktrace in die Zwischenablage zu kopieren.
Chromium-Problem: 1139615
Updates zur Wasm-Fehlerbehebung
Vorschau des Wasm-Variablenwerts bei Mouseover anzeigen
Wenn der Mauszeiger in der WebAssembly-(Wasm-)-Auseinandersetzung mit dem Mauszeiger auf eine Variable bewegt wird, während sie an einem Haltepunkt pausiert ist, wird in den Entwicklertools jetzt der aktuelle Wert der Variablen angezeigt.
Öffnen Sie im Bereich Quellen eine Wasm-Datei, setzen Sie einen Haltepunkt und aktualisieren Sie die Seite. Bewegen Sie den Mauszeiger auf eine Variable, um den Wert zu sehen.
Chromium-Probleme: 1058836, 1071432
Wasm-Variable in der Console auswerten
Sie können jetzt die Wasm-Variable in der Console auswerten, während sie an einem Haltepunkt pausiert ist.
In diesem Beispiel setzen wir einen Haltepunkt in die Zeile local.get $input
. Geben Sie beim Debugging $input
in die Console ein. Damit wird der aktuelle Wert der Variablen zurückgegeben – in diesem Fall 4
.
Chromium-Problem: 1127914
Einheitliche Maßeinheiten für Datei-/Arbeitsspeichergrößen
Entwicklertools verwenden jetzt konsistent KB für die Anzeige von Datei-/Arbeitsspeichergrößen. Bisher wurden DevTools gemischt in KB (1.000 Byte) und KiB (1.024 Byte). Im Steuerfeld „Network“ wurden zuvor beispielsweise „kB“-Labels verwendet, aber tatsächlich wurden Berechnungen mit KiB durchgeführt, was zu unnötiger Verwirrung führte.
Chromium-Problem: 1035309
Pseudoelemente im Steuerfeld „Elemente“ hervorheben
In den Entwicklertools wurde der Farbkontrast von Pseudoelementen erhöht, damit du sie besser erkennen kannst.
Chromium-Problem: 1143833
Experimentelle Funktionen
CSS-Flexbox-Debugging-Tools
Flexbox-Debugging-Tools sind bald verfügbar!
Zunächst wird in den Entwicklertools im Bereich „Elemente“ jetzt für Elemente, auf die display: flex
angewendet wurde, das Logo flex
angezeigt.
Darüber hinaus werden in den folgenden Flexbox-Eigenschaften neue Ausrichtungssymbole hinzugefügt:
flex-direction
align-items
align-content
align-self
justify-items
justify-content
Darüber hinaus sind diese Symbole kontextsensitiv. Die Symbolrichtung wird folgendermaßen angepasst:
flex-direction
direction
writing-mode
Diese Symbole sollen Ihnen helfen, das Flexbox-Layout der Seite besser zu visualisieren.
Hier finden Sie das Designdokument der Flexbox-Toolfunktionen. Weitere Funktionen werden demnächst hinzugefügt.
Probieren Sie sie aus und lassen Sie uns wissen, was Sie davon halten!
Chromium-Probleme: 1144090, 1139945
Tastenkombinationen für Akkorde anpassen
Die Entwicklertools haben seit der letzten Version experimentelle Unterstützung für das Anpassen von Tastenkombinationen hinzugefügt.
Du kannst jetzt im Kurzbefehl-Editor Akkorde (auch als Tastenkombinationen bezeichnet) erstellen.
Gehe zu Einstellungen > Tastenkürzel, bewege den Mauszeiger auf einen Befehl und klicke auf die Schaltfläche Bearbeiten (Stiftsymbol), um den Kurzbefehl für Akkorde anzupassen.
Chromium-Problem: 174309
Vorschaukanäle herunterladen
Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.
Chrome-Entwicklertools-Team kontaktieren
Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.
- Sende uns über crbug.com Vorschläge oder Feedback.
- Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen > Hilfe > Probleme mit den Entwicklertools melden.
- Senden Sie einen Tweet an @ChromeDevTools.
- Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.
Neu in den Entwicklertools
Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.
Chrome 126
- Verbesserungen im Bereich „Leistung“
- Tracks mit aktualisiertem Konfigurationsmodus für Tracks verschieben und ausblenden
- Skripte im Flame-Diagramm ignorieren
- CPU 20-mal drosseln
- Der Bereich „Leistungsstatistiken“ wird eingestellt
- Übermäßige Arbeitsspeichernutzung mit neuen Filtern in Heap-Snapshots ermitteln
- Storage-Buckets unter „Anwendung“ > „Speicher“ prüfen
- Selbst-XSS-Warnungen mit einem Befehlszeilen-Flag deaktivieren
- Lighthouse 12.0.0
- Verschiedene Highlights
Chrome 125
- Mit Gemini Fehler und Warnungen in der Console besser verstehen
- Unterstützung für Regeln vom Typ „@position-try“ unter „Elemente > Stile“
- Verbesserungen im Bereich „Quellen“
- Automatisches Erstellen von optimiertem Drucken und schließenden Klammern konfigurieren
- Behandelte abgelehnte Promise wird als gefangen erkannt
- Fehlerursachen in der Console
- Verbesserungen im Bereich „Netzwerk“
- Header für „Early Hints“ prüfen
- Spalte „Abfolge“ ausblenden
- Verbesserungen im Bereich „Leistung“
- Statistiken für CSS-Selektoren erfassen
- Reihenfolge ändern und Tracks ausblenden
- Binder im Bereich „Arbeitsspeicher“ ignorieren
- Lighthouse 11.7.1
- Verschiedene Highlights
Chrome 124
- Neuer Autofill-Bereich
- Erweiterte Netzwerkdrosselung für WebRTC
- Unterstützung von scrollbaren Animationen im Bereich „Animationen“
- Verbesserte Unterstützung für CSS-Verschachtelungen unter „Elemente“ > „Stile“
- Bereich „Erweiterte Leistung“
- Funktionen und ihre 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 unter „Arbeitsspeicher > Heap-Snapshots“
- Anwendung > Speicherupdates
- Für freigegebenen Speicher verwendete Byte
- Web SQL wurde vollständig eingestellt
- Verbesserungen im Bereich der Abdeckung
- Das Steuerfeld „Ebenen“ wurde möglicherweise eingestellt.
- Einstellung des JavaScript Profiler: Phase 4, abgeschlossen
- Verschiedene Highlights
Chrome 123
- Finde das Easter Egg
- Aktualisierungen des Steuerfelds „Elemente“
- Eine Seite im Fokus unter „Elemente“ > „Stile“ nachahmen
- Farbauswahl, Winkeluhr und Easing-Editor in
var()
Fallbacks - Das CSS-Längentool wurde eingestellt
- Pop-over für das ausgewählte Suchergebnis unter „Leistung“ > „Haupt-Track“
- Änderungen beim Steuerfeld für das Netzwerk
- Schaltfläche und Suchfilter unter „Netzwerk“ > Tab „EventStream“
- Tooltips mit Ausnahmegründen für Drittanbieter-Cookies unter „Netzwerk“ > „Cookies“
- 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
Chrome 122
- Die offizielle Sammlung der Rekorder-Erweiterungen ist jetzt verfügbar
- Netzwerkverbesserungen
- Fehlerursache in der Spalte „Status“
- Verbessertes Untermenü „Kopieren“
- Leistungsverbesserungen
- Navigationspfade auf der Zeitachse
- Ereignisinitiatoren im Haupt-Track
- JavaScript-VM-Instanzauswahlmenü für Node.js-Entwicklertools
- Neue Tastenkombination und neuen Befehl in „Quellen“
- Verbesserte Elemente
- Das Pseudoelement „::view-transition“ kann jetzt in „Stile“ bearbeitet werden
- Die Property-Unterstützung „align-content“ für Blockcontainer
- Unterstützung 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
Chrome 121
- Verbesserte Elemente
- Optimierte Filterleiste im Steuerfeld „Netzwerk“
@font-palette-values
-Support- Unterstützter Fall: Benutzerdefinierte Eigenschaft als Fallback einer anderen benutzerdefinierten Eigenschaft
- Bessere Unterstützung von Source Maps
- Verbesserungen im Bereich „Leistung“
- Track „Erweiterte Interaktionen“
- Erweitertes Filtern auf den Tabs „Bottom-up“, „Anrufbaum“ und „Ereignisprotokoll“
- Einzugsmarkierungen im Bereich „Quellen“
- Nützliche Kurzinfos für überschriebene Header und Inhalte im Steuerfeld „Netzwerk“
- Neue Optionen im Befehlsmenü zum Hinzufügen und Entfernen von Anfrageblockierungsmustern
- Der Test für CSP-Verstöße wurde entfernt
- Lighthouse 11.3.0
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
Chrome 120
- Einstellung von Drittanbieter-Cookies
- Cookies Ihrer Website mit dem Privacy Sandbox-Analysetool analysieren
- Erweiterter Ignoriereintrag
- Standard-Ausschlussmuster für node_modules
- Abgefangene Ausnahmen beenden jetzt die Ausführung, wenn sie erkannt oder nicht ignoriert werden.
x_google_ignoreList
in Quellzuordnungen inignoreList
umbenannt- Neue Ein/Aus-Schaltfläche für den Eingabemodus bei der Fehlerbehebung per Fernzugriff
- Im Steuerfeld „Elemente“ werden jetzt URLs für #document-Knoten angezeigt
- Effektive Content Security Policy im Anwendungsbereich
- Verbesserte Fehlerbehebung bei Animationen
- Dialogfeld „Vertrauen Sie diesem Code?“ unter „Quellen“ und „Self-XSS-Warnung“ in der Console
- Event-Listener-Haltepunkte in Web Workern und Worklets
- Das neue Medien-Badge für
<audio>
und<video>
- Vorabladen umbenannt in spekulatives Laden
- Lighthouse 11.2.0
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
Chrome 119
- Verbesserung des Abschnitts „@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 ausfüllen
- Lighthouse 11.1.0
- Verbesserte Bedienungshilfen
- Einstellung von Web SQL
- Prüfen Sie das Seitenverhältnis von Screenshots unter „Anwendung“ > „Manifest“.
- Verschiedene Highlights
Chrome 118
- Neuer Abschnitt für benutzerdefinierte Eigenschaften unter „Elemente > Stile“
- Weitere Verbesserungen bei lokalen Überschreibungen
- Optimierte Suche
- Verbesserter Bereich „Quellen“
- Optimierter Arbeitsbereich im Bereich „Quellen“
- Bereiche im Bereich „Quellen“ neu anordnen
- Syntaxhervorhebung und Optimierung für mehr Skripttypen
- Medienfunktion mit reduzierter Transparenz nachbilden
- Lighthouse 11
- Verbesserte Bedienungshilfen
- Verschiedene Highlights
Chrome 117
- Verbesserungen im Bereich „Netzwerk“
- Webinhalte noch schneller lokal überschreiben
- Inhalt von XHR und Abrufanfragen überschreiben
- Anfragen zu Chrome-Erweiterungen ausblenden
- Für Menschen lesbare HTTP-Statuscodes
Leistung: Änderungen der Abrufpriorität für Netzwerkereignisse ansehen
Standardeinstellungen für Quellen: Code Folding und automatische Dateisichtbarkeit
Verbesserte Fehlerbehebung bei Problemen mit Drittanbieter-Cookies
Die C/C++ WebAssembly-Debugging-Erweiterung für die Entwicklertools ist jetzt Open Source.
(Experimentell) Neue Rendering-Emulation: bevorzugt-reduzierte-Transparenz
Chrome 116
- Verbessertes Debugging für fehlende Stylesheets
- Unterstützung für lineares Timing unter „Elemente“ > „Stile“ > „Easing-Editor“
- Storage-Buckets-Unterstützung und Metadatenansicht
- Lighthouse 10.3.0
- Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader-Funktion
- Verschiedene Highlights
Chrome 115
- Verbesserte Elemente
- Neues CSS-Unterraster
- Selektorspezifität in Kurzinfos
- Werte benutzerdefinierter 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
- Contentscripts standardmäßig ignorieren
- Netzwerk > Verbesserte Antwortoptionen
- Verschiedene Highlights
Chrome 114
- Unterstützung für WebAssembly-Debugging
- Verbessertes Schrittverhalten in Wasm-Apps
- Fehler in Autofill über den Bereich „Elemente“ und den Tab „Probleme beheben“ beheben
- Assertions in der Rekorder App
- Lighthouse 10.1.1
- Leistungsverbesserungen
- „performance.mark()“ zeigt das Timing an, wenn der Mauszeiger auf „Leistung“ > „Timings“ bewegt wird.
- profile() wird unter „Leistung“ > „Hauptseite“
- Warnung bei langsamer Nutzerinteraktion
- Web Vitals-Updates
- Einstellung des JavaScript Profiler: Phase 3
- Verschiedene Highlights
Chrome 113
- Netzwerkantwort-Header überschreiben
- Verbesserungen bei der Fehlerbehebung für Nut, Vite und Rollup
- CSS-Verbesserungen unter „Elemente“ > „Stile“
- Ungültige CSS-Eigenschaften und -Werte
- Links zu Keyframes in der Animations-Kurzschrift
- Neue Konsoleneinstellung: Automatische Vervollständigung bei Eingabe
- Im Befehlstaste-Menü werden erstellte Dateien hervorgehoben.
- Einstellung des JavaScript Profiler: Phase 2
- Verschiedene Highlights
Chrome 112
- Neuerungen bei Rekorder
- Erweiterungen für die Rekorder-Wiedergabe
- Mit Pierce-Selektoren aufzeichnen
- Aufnahmen als Puppeteer-Scripts mit Lighthouse-Analyse exportieren
- Erweiterungen für den Rekorder herunterladen
- Elemente > Stile aktualisieren
- CSS-Dokumentation im Bereich „Styles“
- Unterstützung für Verschachtelung von CSS
- Logpoints und bedingte Haltepunkte in der Console markieren
- Irrelevante Skripts bei der Fehlerbehebung ignorieren
- Einstellung des JavaScript Profiler gestartet
- Weniger Kontrast emulieren
- Lighthouse 10
- Verschiedene Highlights
Chrome 111
- Fehlerbehebung bei HD-Farbe mit dem Bereich „Stile“
- Verbesserte UX für Haltepunkte
- Benutzerdefinierte Tastenkombinationen für den Rekorder
- Bessere Syntaxhervorhebung für Angular
- Caches im Bereich „Anwendung“ neu organisieren
- Verschiedene Highlights
Chrome 110
- Bereich „Leistung“ beim Aktualisieren wird gelöscht
- Neuerungen bei Rekorder
- Code des User Flows in der Rekorder App ansehen und hervorheben
- Auswahltypen einer Aufnahme anpassen
- Nutzerfluss während der Aufzeichnung bearbeiten
- Automatisches In-Place-Posting
- Bessere Syntaxhervorhebung und Inline-Vorschau für Vue, SCSS und mehr
- Ergonomische und konsistente automatische Vervollständigung in der Console
- Verschiedene Highlights
Chrome 109
- Rekorder: Als Optionen für Schritte kopieren, In-Page-Wiedergabe, Kontextmenü des Schritts
- Tatsächliche Funktionsnamen in den Aufzeichnungen der Leistung anzeigen
- Neue Tastenkombinationen im Bereich „Konsole und Quellen“
- Verbessertes JavaScript-Debugging
- Verschiedene Highlights
- [Experimentell] Verbesserte UX für die Verwaltung von Haltepunkten
- [Experimentell] Automatisches Direktdrucken
Chrome 108
- Hinweise für inaktive CSS-Properties
- XPath und Textselektoren im Rekorder-Steuerfeld automatisch erkennen
- Durch Kommas getrennte Ausdrücke
- Verbesserte Einstellung für die Ignorierliste
- Verschiedene Highlights
Chrome 107
- Tastenkombinationen in den Entwicklertools anpassen
- Mit der Tastenkombination kannst du zwischen hellen und dunklen Designs wechseln
- C/C++-Objekte im Memory Inspector hervorheben
- Vollständige Informationen zum Initiator für den HAR-Import bereitstellen
- DOM-Suche nach Drücken von
Enter
starten - Symbole
start
undend
füralign-content
-CSS-Flexbox-Eigenschaften anzeigen - Verschiedene Highlights
Chrome 106
- Dateien im Bereich „Quellen“ nach „Autorisiert / Bereitgestellt“ gruppieren
- Verknüpfte Stacktraces für asynchrone Vorgänge
- Bekannte Drittanbieterskripts automatisch ignorieren
- Verbesserter Aufrufstack bei der Fehlerbehebung
- Quellen auf der Ignorieren-Liste im Bereich „Quellen“ ausblenden
- Dateien auf der Ignorieren-Liste im Befehlsmenü ausblenden
- Neuer Interaktions-Track im Steuerfeld „Leistung“
- Aufschlüsselung der LCP-Zeiten im Bereich „Leistungsstatistiken“
- Im Rekorder-Bereich automatisch einen Standardnamen für Aufnahmen generieren
- Verschiedene Highlights
Chrome 105
- Detaillierte Wiedergabe in der Rekorder App
- Mouseover-Ereignis im Rekorder-Bereich unterstützen
- Largest Contentful Paint (LCP) im Bereich „Leistungsstatistiken“
- Textblitze (FOIT, FOUT) als mögliche Ursachen für Layoutverschiebungen identifizieren
- Protokoll-Handler im Manifestbereich
- Badge „Oberste Ebene“ im Bereich „Elemente“
- Wasm-Debugging-Informationen zur Laufzeit anhängen
- Live-Bearbeitung während der Fehlerbehebung unterstützen
- @scope bei Regeln im Bereich „Stile“ ansehen und bearbeiten
- Verbesserungen der Source Map
- Verschiedene Highlights
Chrome 104
- Frame während der Fehlerbehebung neu starten
- Optionen für langsame Wiedergabe im Rekorder-Bereich
- Erweiterung für den Rekorder-Bereich erstellen
- Dateien im Bereich „Quellen“ nach „Autorisiert / Bereitgestellt“ gruppieren
- Tracking neuer Nutzertimings im Bereich „Leistungsstatistiken“
- Zugewiesene Anzeigenfläche eines Elements anzeigen
- Hardware-Nebenläufigkeit für Leistungsaufzeichnungen simulieren
- Vorschau des nicht farbigen Werts bei der automatischen Vervollständigung von CSS-Variablen
- Blockierende Frames im Bereich „Back-Forward-Cache“ identifizieren
- Verbesserte Vorschläge für die automatische Vervollständigung von JavaScript-Objekten
- Verbesserungen bei Source Maps
- Verschiedene Highlights
Chrome 103
- Doppelklick- und Rechtsklick-Ereignisse im Rekorder-Bereich erfassen
- Neue Zeitspanne und Snapshot-Modus im Lighthouse-Steuerfeld
- Verbesserte Zoomsteuerung im Bereich „Leistungsstatistiken“
- Löschen einer Leistungsaufzeichnung bestätigen
- Bereiche im Steuerfeld „Elemente“ neu anordnen
- 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 bei Source Maps
Chrome 102
- Vorabversion: Neuer Bereich mit Leistungsstatistiken
- Neue Kurzbefehle, um helle und dunkle Designs zu emulieren
- Verbesserte Sicherheit im Tab „Netzwerkvorschau“
- Verbessertes Aktualisieren an Haltepunkt
- Änderungen an der Console
- Aufzeichnung des User Flows zu Beginn abbrechen
- Übernommene Pseudoelemente für Hervorhebungen im Bereich „Stile“ anzeigen
- Verschiedene Highlights
- [Experimentell] CSS-Änderungen kopieren
- [Experimentell] Farbe außerhalb des Browsers auswählen
Chrome Erste Schritte
- Aufgezeichnete Nutzerflüsse als JSON-Datei importieren und exportieren
- Kaskadierende Ebenen im Bereich „Stile“ ansehen
- Unterstützung der Farbfunktion
hwb()
- Verbesserte Anzeige von Privatgrundstücken
- Verschiedene Highlights
- [Experimentell] Neue Zeitspanne und Snapshot-Modus im Lighthouse-Steuerfeld
Chrome 100
- „@supports“-Regeln bei Regeln im Bereich „Stile“ ansehen und bearbeiten
- Unterstützung gängiger Selektoren standardmäßig
- Auswahl der Aufnahme anpassen
- Aufzeichnungen umbenennen
- Klassen-/Funktionsattribute anzeigen, wenn der Mauszeiger darauf bewegt wird
- Teilweise präsentierte Frames im Steuerfeld „Leistung“
- Verschiedene Highlights
Chrome 99
- WebSocket-Anfragen drosseln
- Neuer Bereich „Reporting API“ im Steuerfeld „Anwendung“
- Support warten, bis Element im Rekorder-Steuerfeld sichtbar/anklickbar ist
- Bessere Gestaltung, Formatierung und Filterung in der Konsole
- Fehler in Chrome-Erweiterung mit Quellzuordnungsdateien beheben
- Verbesserte Quellordnerstruktur im Bereich „Quellen“
- Worker-Quelldateien im Bereich „Quellen“ anzeigen
- Updates für das automatische dunkle Design in Chrome
- Touchscreen-Farbauswahl und geteilter Bereich
- Verschiedene Highlights
Chrome 98
- Vorabversion: Ganzseitige Baumstruktur für Bedienungshilfen
- Präzisere Änderungen auf dem Tab „Änderungen“
- Längeres Zeitlimit für die Aufzeichnung des Nutzerflusses festlegen
- Auf dem Tab „Back-Forward-Cache“ prüfen, ob deine Seiten im Cache gespeichert werden können
- Neuer Filter im Bereich „Eigenschaften“
- CSS-Medienfunktion „force-colors“ emulieren
- Lineal einblenden, wenn der Mauszeiger auf einen Befehl bewegt wird
- Unterstützung von
row-reverse
undcolumn-reverse
im Flexbox-Editor - Neue Tastenkombinationen zur Wiedergabe von XHR und zum Maximieren aller Suchergebnisse
- Lighthouse 9 im Bereich „Lighthouse“
- Verbesserter Bereich „Quellen“
- Verschiedene Highlights
- [Experimentell] Endpunkte im Bereich Reporting API
Chrome 97
- Vorabversion: Neuer Rekorder-Bereich
- Geräteliste im Gerätemodus aktualisieren
- Automatische Vervollständigung mit „Als HTML bearbeiten“
- Verbesserte Code-Fehlerbehebung
- Einstellungen der Entwicklertools geräteübergreifend synchronisieren
Chrome 96
- Vorschaufunktion: Neues Steuerfeld „CSS-Übersicht“
- Wiederhergestellte und verbesserte Funktion zum Bearbeiten und Kopieren von CSS-Längen
- Die CSS-Funktion „Medien bevorzugt“ nachbilden
- Das dunkle Design von Chrome nachahmen
- Deklarationen als JavaScript im Bereich „Styles“ kopieren
- Neuer Tab „Nutzlast“ im Steuerfeld „Netzwerk“
- Verbesserte Anzeige von Eigenschaften im Bereich „Eigenschaften“
- Option zum Ausblenden von CORS-Fehlern in der Console
- Vorschau und Bewertung von
Intl
-Objekten in der Console - Konsistente asynchrone Stacktraces
- Seitenleiste der Console beibehalten
- Eingestellter Bereich für den Anwendungscache im Anwendungsbereich
- [Experimentell] Neuer Bereich „Reporting API“ im Steuerfeld „Anwendung“
Chrome 95
- Neue Authoring-Tools für CSS-Längen
- Probleme auf dem Tab „Probleme“ ausblenden
- Verbesserte Anzeige von Unterkünften
- Lighthouse 8.4 im Lighthouse-Bereich
- Snippets im Bereich „Quellen“ sortieren
- Neue Links zu übersetzten Versionshinweisen und Meldung eines Übersetzungsfehlers
- Verbesserte Benutzeroberfläche für das Befehlsmenü der Entwicklertools
Chrome 94
- Entwicklertools in deiner bevorzugten Sprache verwenden
- Neue Nest Hub-Geräte in der Geräteliste
- Ursprungstests in der Frame-Detailansicht
- Neues Logo für CSS-Containerabfragen
- Neues Kästchen zum Umkehren der Netzwerkfilter
- Geplante Einstellung der Seitenleiste der Console
- Unverarbeitete
Set-Cookies
-Header auf dem Tab „Probleme“ und im Bereich „Netzwerk“ anzeigen - Native Zugriffsfunktionen einheitlich als eigene Properties in der Console anzeigen
- Richtige Fehler-Stacktraces für Inline-Skripts mit #sourceURL
- Farbformat im Bereich „Berechnet“ ändern
- Benutzerdefinierte Kurzinfos durch native HTML-Kurzinfos ersetzen
- [Experimentell] Probleme auf dem Tab „Probleme“ ausblenden
Chrome 93
- Bearbeitbare CSS-Containerabfragen im Bereich „Styles“
- Vorschau des Web-Bundles im Bereich „Netzwerk“
- Fehlerbehebung in der Attribution Reporting API
- Bessere Stringbehandlung in der Console
- Verbessertes CORS-Debugging
- Lighthouse 8.1
- Neue Hinweis-URL im Manifestbereich
- Probleme mit CSS-Selektoren behoben
- Pretty-Printing JSON-Antworten im Bereich „Network“
Chrome 92
- CSS-Rastereditor
- Unterstützung für
const
Neudeklaration in der Console - Betrachter von Quellreihenfolgen
- Neue Verknüpfung zum Ansehen von Framedetails
- Erweiterte Unterstützung bei der CORS-Fehlerbehebung
- XHR-Label in Fetch/XHR umbenennen
- Wasm-Ressourcentyp im Bereich „Netzwerk“ filtern
- User-Agent-Client-Hints für Geräte auf dem Tab „Netzwerkbedingungen“
- Probleme mit dem Quirks-Modus auf dem Tab „Probleme“ melden
- „Compute Intersections“ im Bereich „Leistung“ einschließen
- Lighthouse 7.5 im Lighthouse-Steuerfeld
- Verworfenes Kontextmenü „Neustart“ im Aufrufstack
- [Experimentell] Protokollmonitor
- [Experimentell] Puppeteer-Rekorder
Chrome 91
- Pop-up mit Web Vitals-Informationen
- Neuer Arbeitsspeicher-Inspector
- CSS-Scroll-Snap
- Neuer Bereich für Badge-Einstellungen
- Verbesserte Bildvorschau mit Informationen zum Seitenverhältnis
- Neue Schaltfläche für Netzwerkbedingungen mit Optionen zum Konfigurieren von
Content-Encoding
s - Direktzugriff zum Anzeigen des berechneten Werts
accent-color
Keyword- Problemtypen mit Farben und Symbolen kategorisieren
- Trust-Tokens löschen
- Blockierte Funktionen in der Frame-Detailansicht
- Tests in der Einstellung für Tests filtern
- Neue Spalte „
Vary Header
“ im Bereich „Cache-Speicher“ - JavaScript-Überprüfung für private Marken unterstützen
- Erweiterte Unterstützung für das Debugging an Haltepunkten
- Hover-Vorschau mit
[]
-Notation unterstützen - Verbesserter Umriss von HTML-Dateien
- Richtige Fehler-Stacktraces für das Wasm-Debugging
Chrome 90
- Neue CSS-Flexbox-Debugging-Tools
- Neues Core Web Vitals-Overlay
- Die Problemanzahl wurde in die Statusleiste der Console verschoben
- Probleme mit vertrauenswürdigen Webaktivitäten melden
- Strings in der Console als (gültige) JavaScript-Stringliterale formatieren
- Neuer Bereich „Trust Tokens“ im Bereich „Anwendung“
- CSS „Color-Gamut“-Medienfunktion emulieren
- Verbesserte Tools für progressive Web-Apps
- Neue Spalte „
Remote Address Space
“ im Steuerfeld „Netzwerk“ - Leistungsverbesserungen
- Zugelassene und unzulässige Funktionen in der Frame-Detailansicht anzeigen
- Neue Spalte „
SameParty
“ im Bereich „Cookies“ - Nicht standardmäßige Unterstützung für
fn.displayName
eingestellt Don't show Chrome Data Saver warning
im Menü „Einstellungen“ wird eingestellt- [Experimentell] Automatische Berichte zu Problemen mit geringem Kontrast auf dem Tab „Probleme“
- [Experimentell] Vollständige Bedienungshilfen-Baumansicht im Bereich „Elemente“
Chrome 89
- Fehlerbehebung bei der Unterstützung für Verstöße gegen vertrauenswürdige Typen
- Screenshot des Knotens außerhalb des Darstellungsbereichs erstellen
- Neuer Tab „Trust Tokens“ für Netzwerkanfragen
- Lighthouse 7 im Steuerfeld „Lighthouse“
- Unterstützung für das Erzwingen des CSS-Status
:target
- Neue Verknüpfung zum Duplizieren von Elementen
- Farbauswahl für benutzerdefinierte CSS-Eigenschaften
- Neue Tastenkombinationen zum Kopieren von CSS-Eigenschaften
- Neue Option zum Anzeigen von Cookies mit URL-Decodierung
- 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 „Network“ ansehen
- „Online“ umbenannt in „Keine Drosselung“
- Neue Kopieroptionen in der Konsole, im Bereich „Quellen“ und im Bereich „Stile“
- Informationen zu neuen Service Workern in der Frame-Detailansicht
- Informationen zum Arbeitsspeicher in der Frame-Detailansicht messen
- Feedback über den Tab „Probleme“ geben
- Eingefügte Frames im Steuerfeld „Leistung“
- Faltbares Smartphone und Dual Screen im Gerätemodus nachbilden
- [Experimentell] Browsertests mit Puppeteer Recorder automatisieren
- [Experimentell] Schriftarteneditor im Bereich „Stile“
- [Experimentell] CSS-Flexbox-Debugging-Tools
- [Experimentell] Neuer Tab „Verstöße gegen CSP“
- [Experimentell] Neue Berechnung des Farbkontrasts – Advanced Perceptual Contrast Algorithm (APCA)
Chrome 88
- Schnellerer Start der Entwicklertools
- Neue CSS-Tools zur Winkelvisualisierung
- Nicht unterstützte Bildtypen emulieren
- Größe des Speicherkontingents 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 Web Worker-Informationen in der Frame-Detailansicht
- Details zum öffnenden Frame für geöffnete Fenster anzeigen
- Netzwerkbereich über den Bereich Service Workers öffnen
- Property-Wert kopieren
- Stacktrace für Netzwerkinitiator kopieren
- Vorschau des Wasm-Variablenwerts bei Mouseover anzeigen
- Wasm-Variable in der Console auswerten
- Einheitliche Maßeinheiten für Datei-/Arbeitsspeichergrößen
- Pseudoelemente im Bereich „Elemente“ hervorheben
- [Experimentell] CSS-Flexbox-Debugging-Tools
- [Experimentell] Tastenkombinationen für Akkorde anpassen
Chrome 87
- Neue CSS-Grid-Debugging-Tools
- Neuer Tab „WebAuthn“
- Tools zwischen dem oberen und unteren Bereich verschieben
- Neuer Bereich „Berechnete Seitenleiste“ im Bereich „Stile“
- CSS-Eigenschaften im Bereich „Berechnet“ gruppieren
- Lighthouse 6.3 im Lighthouse-Steuerfeld
performance.mark()
Ereignisse im Bereich „Timings“- Neue Filter
resource-type
undurl
im Steuerfeld „Netzwerk“ - Änderungen bei der Frame-Detailansicht
Settings
wird im Menü „Weitere Tools“ eingestellt- [Experimentell] Probleme mit Farbkontrast im Bereich „CSS-Übersicht“ ansehen und beheben
- [Experimentell] Tastenkombinationen in den Entwicklertools anpassen
Chrome 86
- Neues Medienbereich
- Knoten-Screenshots über das Kontextmenü des Steuerfelds „Elemente“ erfassen
- Aktualisierungen des Tabs „Probleme“
- Fehlende lokale Schriftarten nachbilden
- Inaktive Nutzer emulieren
prefers-reduced-data
nachbilden- Unterstützung neuer JavaScript-Funktionen
- Lighthouse 6.2 im Steuerfeld „Lighthouse“
- Einstellung der Liste „Andere Ursprünge“ im Bereich „Service Workers“
- Abdeckungsübersicht für gefilterte Elemente anzeigen
- Neue Frame-Detailansicht im Steuerfeld „Anwendung“
- Barrierefreie Farbvorschläge im Bereich „Stile“
- Bereich Eigenschaften im Steuerfeld „Elemente“ wiederherstellen
- Für Menschen lesbare
X-Client-Data
-Header-Werte im Steuerfeld „Netzwerk“ - Benutzerdefinierte Schriftarten im Bereich „Stile“ automatisch vervollständigen
- Ressourcentyp einheitlich im Bereich „Netzwerk“ anzeigen
- Schaltflächen löschen in den Bereichen „Elemente“ und „Netzwerk“
Chrome 85
- Stilbearbeitung für CSS-in-JS-Frameworks
- Lighthouse 6 im Steuerfeld „Lighthouse“
- Einstellung von First Meaningful Paint (FMP)
- Unterstützung neuer JavaScript-Funktionen
- Warnungen bei neuen App-Verknüpfungen im Manifestbereich
- Service Worker-Ereignisse vom Typ
respondWith
auf dem Tab „Timing“ - Einheitliche Anzeige des Bereichs „Berechnet“
- Bytecode-Offsets für WebAssembly-Dateien
- Zeilenweises Kopieren und Ausschneiden im Bereich „Quellen“
- Änderungen an den Console-Einstellungen
- Neuerungen im Bereich „Leistung“
- Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpoints
Chrome 84
- Probleme mit der Website mit dem neuen Tab „Probleme beheben“ beheben
- Informationen zur Barrierefreiheit in der Kurzinfo zum Prüfmodus ansehen
- Neuerungen im Bereich „Leistung“
- Genauere Promise-Terminologie in der Console
- Aktualisierungen im Bereich „Stile“
- Einstellung des Bereichs Eigenschaften im Bereich „Elemente“
- Unterstützung von App-Verknüpfungen im Manifestbereich
Chrome 83
- Sehschwächen nachbilden
- Sprachen nachbilden
- COEP-Fehlerbehebung (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“ ist jetzt der Bereich „Lighthouse“.
- Alle lokalen Überschreibungen in einem Ordner löschen
- Aktualisierte Benutzeroberfläche für lange Aufgaben
- Unterstützung maskierbarer Symbole im Manifestbereich
Chrome 82
Chrome 81
- Unterstützung für Moto G4 im Gerätemodus
- Aktualisierungen im Zusammenhang mit Cookies
- Präzisere Symbole im Manifest der Web-App
- Bewegen Sie den Mauszeiger auf die CSS-Attribute
content
, um nicht maskierte Werte zu sehen. - Quellzuordnungsfehler in der Console
- Einstellung zum Deaktivieren des Scrollens über das Ende einer Datei hinaus
Chrome 80
- Unterstützung für
let
- undclass
-Neudeklaration in der Console - Verbessertes WebAssembly-Debugging
- Initiatorketten auf dem Tab „Initiator“ anfordern
- Ausgewählte Netzwerkanfrage in der Übersicht hervorheben
- URL- und Pfadspalten im Steuerfeld „Netzwerk“
- Aktualisierte User-Agent-Strings
- Neue Konfigurations-UI für den Audits-Bereich
- Codeabdeckungsmodi pro Funktion oder pro Block
- Die Codeabdeckung muss jetzt durch eine Seitenaktualisierung eingeleitet werden.
Chrome 79
- Fehlerbehebung, warum ein Cookie blockiert wurde
- Cookie-Werte ansehen
- Verschiedene Präferenzen für bevorzugte Farbschemata und Präferenzen bei reduzierten Bewegungen simulieren
- Aktualisierungen der Codeabdeckung
- Fehler beheben, warum eine Netzwerkressource angefordert wurde
- Einzüge der Bereiche „Konsole“ und „Quellen“ werden wieder berücksichtigt
- Neue Tastenkombinationen für die Cursornavigation
Chrome 78
- Mehrfachkundensupport im Bereich „Audits“
- Fehlerbehebung im Zahlungs-Handler
- Lighthouse 5.2 im Bereich „Audits“
- Largest Contentful Paint im Steuerfeld „Leistung“
- Probleme mit den Datei-Entwicklertools über das Hauptmenü
Chrome 77
- Elementstile kopieren
- Layoutverschiebungen visualisieren
- Lighthouse 5.1 im Bereich „Audits“
- Synchronisierung des Betriebssystemdesigns
- Tastenkombination zum Öffnen des Haltepunkt-Editors
- Prefetch-Cache im Bereich „Netzwerk“
- Private Properties beim Ansehen von Objekten
- Benachrichtigungen und Push-Nachrichten im Anwendungsbereich
Chrome 76
- Automatische Vervollständigung mit CSS-Werten
- Neue Benutzeroberfläche für die Netzwerkeinstellungen
- WebSocket-Nachrichten in HAR-Exporten
- Schaltflächen zum Importieren und Exportieren von HAR-Daten
- Echtzeit-Arbeitsspeichernutzung
- Nummern der Service Worker-Registrierungsports
- Ereignisse vom Typ „Hintergrundabruf“ und „Hintergrundsynchronisierung“ prüfen
- Puppeteer für Firefox
Chrome 75
- Sinnvolle Voreinstellungen bei der automatischen Vervollständigung 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 „Haltepunkte“ inline einfügen
- Anzahl von IndexedDB- und Cache-Ressourcen
- Einstellung zum Deaktivieren der detaillierten Kurzinfo „Untersuchen“
- Einstellung für das Wechseln der Tabeinzugung im Editor
Chrome 74
- Alle Knoten hervorheben, die von der CSS-Eigenschaft betroffen sind
- Lighthouse v4 im Bereich „Audits“
- WebSocket-Binärnachrichten-Viewer
- Screenshot eines Bereichs über das Befehlsmenü aufnehmen
- Service Worker-Filter im Steuerfeld "Netzwerk"
- Neuerungen im Bereich „Leistung“
- Lange Aufgaben in Aufzeichnungen im Bereich „Leistung“
- First Paint im Bereich „Timing“
- Bonustipp: Verknüpfung zum Ansehen von RGB- und HSL-Farbcodes (Video)
Chrome 73
- Logpoints
- Detaillierte Kurzinfos im Prüfmodus
- Daten zur Codeabdeckung exportieren
- Bedienung der Console mit der Tastatur
- AAA-Kontrastverhältnislinie im Farbauswahl
- Benutzerdefinierte Überschreibungen der Standortbestimmung speichern
- Code Folding
- Tab „Frames“ wurde in „Nachrichten“ umbenannt
- Bonustipp: Netzwerkbereich nach Property filtern (Video)
Chrome 72
- Leistungsmesswerte im Bereich „Leistung“ visualisieren
- Textknoten in der DOM-Struktur markieren
- Kopieren Sie den JS-Pfad in einen DOM-Knoten.
- Aktualisierungen des Bereichs „Audits“, einschließlich einer neuen Prüfung, die JS-Bibliotheken und neue Schlüsselwörter für den Zugriff auf den Bereich „Audits“ über das Befehlsmenü erkennt
- Bonustipp: Verwenden Sie den Gerätemodus, um Medienabfragen zu prüfen (Video)
Chrome 71
- Bewegen Sie den Mauszeiger auf ein Ergebnis des Live-Ausdrucks, um einen DOM-Knoten hervorzuheben.
- DOM-Knoten als globale Variablen speichern
- Informationen zum Initiator und zur Priorität jetzt in HAR-Importen und -Exporten
- Im Hauptmenü auf das Befehlsmenü zugreifen
- Haltepunkte im Bild im Bild
- Bonustipp: Mit
monitorEvents()
können Sie ausgelöste Knotenereignisse in der Console protokollieren (Video)
Chrome 70
- Liveausdrücke in der Console
- DOM-Knoten bei der Eager-Bewertung hervorheben
- Optimierungen im Leistungsbereich
- Zuverlässigere Fehlerbehebung
- Netzwerkdrosselung über das Befehlsmenü aktivieren
- Bedingte Haltepunkte automatisch vervollständigen
- Pause bei AudioContext-Ereignissen
- Fehler in Node.js-Anwendungen mit ndb beheben
- Bonustipp: Mit der User Timing API reale Nutzerinteraktionen messen
Chrome 68
- Ehrgeizige Bewertung
- Argumenthinweise
- Automatische Vervollständigung von Funktionen
- Keywords für ES2017
- Lighthouse 3.0 im Bereich „Audits“
- BigInt-Unterstützung
- Property-Pfade zum Wiedergabebereich hinzufügen
- „Zeitstempel anzeigen“ wurde in die Einstellungen verschoben
- Bonustipp: Weniger bekannte Konsolenmethoden (Video)
Chrome 67
- In allen Netzwerkheadern suchen
- Vorschau der CSS-Variablenwerte
- Als Abruf kopieren
- Neue Prüfungen, Desktop-Konfigurationsoptionen und Traces ansehen
- Endlosschleifen stoppen
- Nutzertiming auf den Tabs „Leistung“
- JavaScript-VM-Instanzen werden im Bereich „Arbeitsspeicher“ deutlich aufgeführt.
- Tab „Network“ wurde in „Seite“ umbenannt
- Neues beim dunklen Design
- Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“
- Website-Isolierungsfunktionen im Bereich „Leistung“
- Bonustipp: Bereich „Layers“ (Ebenen) und Animations Inspector (Animationen) (Video)
Chrome 66
- Blackboxing im Bereich „Netzwerk“
- Zoomen im Gerätemodus automatisch anpassen
- Bildvorschau auf den Tabs „Vorschau“ und „Antwort“
- HTML-Inhalte auf dem Tab „Vorschau“ anzeigen
- Unterstützung lokaler Überschreibungen für Stile in HTML
- Bonustipp: Blackbox-Framework-Skripts, um Event-Listener-Haltepunkte nützlicher zu machen
Chrome 65
- Lokale Überschreibungen
- Neue Bedienungshilfen
- Tab „Änderungen“
- Neue SEO- und Leistungsüberprüfungen
- Mehrere Aufzeichnungen im Bereich „Leistung“
- Zuverlässige Code-Steppings mit Workern in asynchronem Code
- Bonustipp: Automatisieren von Entwicklertools-Aktionen mit Puppeteer (Video)
Chrome 64
- Leistungsmonitor
- Seitenleiste der Console
- Ähnliche Console-Nachrichten gruppieren
- Bonustipp: Pseudokurs ein-/ausschalten (Video)
Chrome 63
- Unterstützung für Remote-Debugging bei mehreren Clients
- Arbeitsbereiche 2.0
- 4 neue Prüfungen
- Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren
- Ereignisse zur Hintergrundsynchronisierung mit benutzerdefinierten Tags auslösen
- Bonustipp: Haltepunkte des Ereignis-Listeners (Video)
Chrome 62
- Die oberster Ebene in der Console
- Neue Workflows für Screenshots
- CSS-Raster-Hervorhebung
- Neue Console API zum Abfragen von Objekten
- Neue Console-Filter
- HAR-Importe in den Bereich „Network“ (Netzwerk)
- Als Vorschau verfügbare Cache-Ressourcen
- Vorhersehbares Cache-Debugging
- Codeabdeckung auf Blockebene
Chrome 61
- Simulation der Mobilgerätedrosselung
- Speichernutzung ansehen
- Ansehen, wann Antworten von einem Service Worker im Cache gespeichert wurden
- FPS-Messtool über das Befehlsmenü aktivieren
- Mausradverhalten für Zoomen oder Scrollen festlegen
- Unterstützung für Fehlerbehebung für ES6-Module
Chrome 60
- Neuer Bereich „Audits“
- Drittanbieter-Badges
- Neue Touch-Geste für „Weiter zu hier“
- Asynchronisieren
- Informativere Objektvorschauen in der Console
- Informativere Kontextauswahl in der Console
- Echtzeit-Updates auf dem Tab „Abdeckung“
- Einfachere Optionen für die Netzwerkdrosselung
- Asynchrone Stacks standardmäßig aktiviert