Hallo! Hier sind die Neuigkeiten in den Chrome-Entwicklertools in Chrome 76.
Autocomplete mit CSS-Werten
Beim Hinzufügen von Stildeklarationen zu einem DOM-Knoten ist der Deklarationswert manchmal leichter zu merken als der Deklarationsname. Wenn Sie beispielsweise einen <p>
-Knoten fett formatieren, kann sich der Wert bold
leichter merken als der Name font-weight
. Die Benutzeroberfläche für die automatische Vervollständigung im Bereich „Stil“ unterstützt jetzt CSS-Werte. Wenn Sie sich an den gewünschten Keyword-Wert, aber nicht an den Namen der Eigenschaft erinnern können, geben Sie den Wert ein. Die automatische Vervollständigung hilft Ihnen, den gewünschten Namen zu finden.
Abbildung 1: Nachdem Sie bold
eingegeben haben, wird im Bereich „Stile“ automatisch font-weight: bold
ergänzt.
Senden Sie Feedback zu dieser neuen Funktion an Chromium-Problem 931145.
Eine neue Benutzeroberfläche für die Netzwerkeinstellungen
Das Steuerfeld „Netzwerk“ hatte zuvor ein Usability-Problem, bei dem Optionen wie das Menü für die Drosselung nicht erreichbar waren, wenn das DevTools-Fenster schmal war. Um dieses Problem zu beheben und das Netzwerkpanel zu entlasten, wurden einige weniger häufig verwendete Optionen in den neuen Bereich Netzwerkeinstellungen verschoben.
Abbildung 2. Netzwerkeinstellungen.
Die folgenden Optionen wurden in die Netzwerkeinstellungen verschoben: Große Anfragezeilen verwenden, Nach Frame gruppieren, Übersicht anzeigen und Screenshots erstellen. In Abbildung 3 werden die alten Standorte den neuen Standorten zugeordnet.
Abbildung 3: Die alten zu den neuen Standorten zuordnen
Senden Sie Feedback zu dieser Benutzeroberflächenänderung an Chromium-Problem 892969.
WebSocket-Nachrichten in HAR-Exporten
Wenn Sie eine HAR-Datei aus dem Steuerfeld „Netzwerk“ exportieren, um Netzwerkprotokolle für Ihre Kollegen freizugeben, enthält Ihre HAR-Datei jetzt WebSocket-Nachrichten. Die Property _webSocketMessages
beginnt mit einem Unterstrich, um anzugeben, dass es sich um ein benutzerdefiniertes Feld handelt.
...
"_webSocketMessages": [
{
"type": "send",
"time": 1558730482.5071473,
"opcode": 1,
"data": "Hello, WebSockets!"
},
{
"type": "receive",
"time": 1558730482.5883863,
"opcode": 1,
"data": "Hello, WebSockets!"
}
]
...
Senden Sie Feedback zu dieser neuen Funktion an Chromium-Problem 496006.
Schaltflächen für HAR-Import und -Export
Mit den neuen Schaltflächen Alle als HAR-Datei mit Inhalt exportieren und HAR-Datei importieren können Sie Netzwerkprotokolle noch einfacher mit Kollegen teilen. Der Import und Export von HAR-Dateien ist in DevTools schon länger möglich. Die neuen Schaltflächen sind besser auffindbar.
Abbildung 4: Die neuen HAR-Schaltflächen
Senden Sie uns über das Chromium-Problem 904585 Feedback zu dieser Änderung der Benutzeroberfläche.
Gesamte Arbeitsspeichernutzung in Echtzeit
Im Bereich „Speicher“ wird jetzt die Gesamtspeichernutzung in Echtzeit angezeigt.
Abbildung 5: Unten im Bereich „Speicher“ sehen Sie, dass die Seite insgesamt 43,4 MB Arbeitsspeicher belegt. 209 KB/s bedeutet, dass sich die Gesamtnutzung des Arbeitsspeichers um 209 KB pro Sekunde erhöht.
Informationen zum Tracking der Arbeitsspeichernutzung in Echtzeit finden Sie unter Leistungsüberwachung.
Senden Sie uns Feedback zu dieser neuen Funktion über das Chromium-Problem 958177.
Portnummern für die Service Worker-Registrierung
Die Titel im Bereich Dienstworker enthalten jetzt Portnummern, damit Sie leichter nachvollziehen können, für welchen Dienstworker Sie das Debugging durchführen.
Abbildung 6. Service Worker-Ports
Senden Sie Feedback zu dieser Benutzeroberflächenänderung an Chromium-Problem 601286.
Ereignisse für den Hintergrundabruf und die Hintergrundsynchronisierung prüfen
Im Bereich Anwendung finden Sie den neuen Bereich Hintergrunddienste, in dem Sie Abruf im Hintergrund- und Synchronisierung im Hintergrund-Ereignisse überwachen können. Da Hintergrundabruf- und Hintergrundsynchronisierungsereignisse im Hintergrund stattfinden, wäre es nicht sehr nützlich, wenn DevTools nur diese Ereignisse aufzeichnen würde, während DevTools geöffnet ist. Sobald Sie die Aufzeichnung gestartet haben, werden Ereignisse für den Abruf und die Synchronisierung im Hintergrund auch dann erfasst, wenn Sie den Tab oder Chrome schließen.
Gehen Sie zum Bereich Anwendung, öffnen Sie den Tab Hintergrundabruf oder Hintergrundsynchronisierung und klicken Sie dann auf Aufzeichnen , um mit der Protokollierung von Ereignissen zu beginnen. Klicken Sie auf ein Ereignis, um weitere Informationen dazu aufzurufen.
Abbildung 7. Der Bereich „Hintergrundabruf“. Demo von Maxim Salnikov
Abbildung 8. Im Bereich „Hintergrundsynchronisierung“
Senden Sie uns Feedback zu diesen neuen Funktionen über das Chromium-Problem 927726.
Puppeteer für Firefox
Puppeteer for Firefox ist ein neues experimentelles Projekt, mit dem Sie Firefox mit der Puppeteer API automatisieren können. Mit anderen Worten, Sie können jetzt Firefox und Chromium mit derselben Node API automatisieren, wie im folgenden Video gezeigt.
Nachdem Sie node example.js
ausgeführt haben, wird Firefox geöffnet und der Text page
wird in das Suchfeld auf der Dokumentationswebsite von Puppeteer eingefügt. Dann wird dieselbe Aufgabe in Chromium wiederholt.
Sehen Sie sich den Puppeteer-Vortrag von Joel und Andrey von der Google I/O 2019 an, um mehr über Puppeteer und Puppeteer für Firefox zu erfahren. Die Firefox-Ankündigung erfolgt gegen 4:05 Uhr.
Vorschaukanäle herunterladen
Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.
Chrome-Entwicklertools-Team kontaktieren
Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.
- Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
- Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen > Hilfe > Entwicklertools-Problem melden.
- Tweeten Sie an @ChromeDevTools.
- Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.
Neu in DevTools
Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.
- CSS mit Gemini debuggen
- KI-Funktionen auf einem speziellen Tab in den Einstellungen verwalten
- Verbesserungen am Bereich „Leistung“
- Leistungsergebnisse mit Anmerkungen versehen und teilen
- Leistungsstatistiken direkt im Bereich „Leistung“ abrufen
- Übermäßige Layoutänderungen leichter erkennen
- Die nicht zusammengesetzten Animationen erkennen
- Gleichzeitigkeit der Hardware wird auf Sensoren umgestellt
- Anonyme Scripts ignorieren und sich in Stacktraces auf den Code konzentrieren
- Elemente > Stile: Unterstützung von Schreibmodi, die seitwärts* erfolgen, für Raster-Overlays und CSS-weite Keywords
- Lighthouse-Analysen für nicht-HTTP-Seiten im Zeitspannen- und Snapshot-Modus
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserungen am Netzwerkbereich
- Neu gestaltete Netzwerkfilter
- Sensible Daten werden bei HAR-Exporten jetzt standardmäßig ausgeschlossen
- Verbesserungen im Bereich „Elemente“
- Autocomplete-Werte für text-emphasis-*-Properties
- Scroll-Overflows mit einem Symbol gekennzeichnet
- Verbesserungen am Bereich „Leistung“
- Empfehlungen in Live-Messwerten
- Navigationspfade verwenden
- Verbesserungen am Bereich „Speicher“
- Neues Profil „Losgelöste Elemente“
- Verbesserte Benennung von einfachen JS-Objekten
- Dynamische Themen deaktivieren
- Chrome-Test: Prozessfreigabe
- Lighthouse 12.2.1
- Sonstige Highlights
- Der Rekorder unterstützt den Export nach Puppeteer für Firefox
- Verbesserungen am Bereich „Leistung“
- Beobachtungen zu Live-Messwerten
- Suchanfragen im Netzwerk-Track
- Stapelabzüge von „performance.mark“- und „performance.measure“-Aufrufen ansehen
- Testadressendaten im Autofill-Steuerfeld verwenden
- Verbesserungen im Bereich „Elemente“
- Weitere Status für bestimmte Elemente erzwingen
- Unter „Elemente“ > „Stile“ werden jetzt mehr Rastereigenschaften automatisch vervollständigt
- Lighthouse 12.2.0
- Sonstige Highlights
- Console Insights von Gemini wird in den meisten europäischen Ländern eingeführt
- Änderungen am Bereich „Leistung“
- Erweiterte Netzwerkeinstellungen
- Leistungsdaten mit der Extensibility API anpassen
- Details zum Track „Timings“
- Alle aufgeführten Anfragen im Bereich „Netzwerk“ kopieren
- Schnellere Heap-Snapshots mit benannten HTML-Tags und weniger Unordnung
- Animationsbereich öffnen, um Animationen aufzunehmen und @keyframes live zu bearbeiten
- Lighthouse 12.1.0
- Verbesserte Bedienungshilfen
- Sonstige Highlights
- CSS-Ankern im Bereich „Elemente“ prüfen
- Verbesserungen im Bereich „Quellen“
- Verbesserte Funktion „Hier nie pausieren“
- Neue Listener für Scroll-Snap-Ereignisse
- Verbesserungen am Netzwerkbereich
- Aktualisierte Voreinstellungen für die Netzwerkdrosselung
- Informationen zu Dienst-Workern in benutzerdefinierten Feldern des HAR-Formats
- WebSocket-Ereignisse im Bereich „Leistung“ senden und empfangen
- Sonstige Highlights
- Verbesserungen am Bereich „Leistung“
- Tracks mit dem aktualisierten Konfigurationsmodus für Tracks verschieben und ausblenden
- Scripts im Flammendiagramm ignorieren
- CPU um das 20-fache drosseln
- Der Bereich „Leistungsstatistiken“ wird eingestellt
- Übermäßige Arbeitsspeichernutzung mit neuen Filtern in Heap-Snapshots ermitteln
- Storage-Buckets unter „Anwendung“ > „Speicher“ prüfen
- Selbst-XSS-Warnungen mit einem Befehlszeilen-Flag deaktivieren
- Lighthouse 12.0.0
- Sonstige Highlights
- Fehler und Warnungen in der Console mit Gemini besser nachvollziehen
- Unterstützung für @position-try-Regeln unter „Elemente“ > „Stile“
- Verbesserungen im Bereich „Quellen“
- Automatisches Drucken von Klammern und Schließen von Klammern konfigurieren
- Abgelehnte Versprechen werden als nicht gefangen erkannt
- Fehlerursachen in der Console
- Verbesserungen am Netzwerkbereich
- Header für frühzeitige Hinweise prüfen
- Wasserfall-Spalte ausblenden
- Verbesserungen am Bereich „Leistung“
- Statistiken für CSS-Selektoren erfassen
- Reihenfolge ändern und Titel ausblenden
- Speicherplatzhalter im Bereich „Speicher“ ignorieren
- Lighthouse 11.7.1
- Sonstige Highlights
- Neues Autofill-Steuerfeld
- Erweiterte Netzwerkdrosselung für WebRTC
- Unterstützung für scrollbasierte Animationen im Bereich „Animationen“
- Verbesserte Unterstützung für CSS-Verschachtelungen unter „Elemente“ > „Stile“
- Bereich „Erweiterte Leistung“
- Funktionen und ihre untergeordneten Elemente im Flammendiagramm ausblenden
- Pfeile von ausgewählten Initiatoren zu von ihnen initiierten Ereignissen
- Lighthouse 11.6.0
- Kurzinfos für spezielle Kategorien unter „Arbeitsspeicher“ > „Heap-Snapshots“
- Anwendung > Speicherupdates
- Für den freigegebenen Speicherplatz verwendete Bytes
- Web SQL wird vollständig eingestellt
- Verbesserungen am Steuerfeld für die Abdeckung
- Das Steuerfeld „Ebenen“ wird möglicherweise eingestellt
- Einstellung des JavaScript-Profilers: Phase 4, finale Phase
- Sonstige Highlights
- Finde das Easter Egg
- Änderungen am Bereich „Elemente“
- Fokussierte Seite unter „Elemente“ > „Stile“ emulieren
- Farbauswahl, Winkeluhr und Easing-Editor in
var()
-Fallbacks - Das CSS-Tool für Längen ist eingestellt
- Pop-over für das ausgewählte Suchergebnis unter „Leistung“ > „Haupt-Track“
- Änderungen am Bereich „Netzwerk“
- Schaltfläche „Löschen“ und Suchfilter auf dem Tab „Netzwerk“ > „EventStream“
- Tooltips mit Gründen für Ausnahmen für Drittanbieter-Cookies unter „Netzwerk“ > „Cookies“
- Alle Haltepunkte unter „Quellen“ aktivieren und deaktivieren
- Geladene Skripts in den Entwicklertools für Node.js ansehen
- Lighthouse 11.5.0
- Verbesserungen bei der Barrierefreiheit
- Verschiedene Highlights
- Die offizielle Sammlung von Rekorder-Erweiterungen ist online
- Netzwerkverbesserungen
- Fehlergrund in der Spalte „Status“
- Verbessertes Untermenü „Kopieren“
- Leistungsverbesserungen
- Navigationspfade in der Zeitachse
- Ereignisauslöser im Hauptpfad
- Menü zur Auswahl einer JavaScript-VM-Instanz für Node.js DevTools
- Neuer Befehl und neuer Kurzbefehl unter „Quellen“
- Verbesserungen bei Elementen
- Das Pseudo-Element ::view-transition kann jetzt in „Styles“ bearbeitet werden
- Unterstützung der Property „Align-content“ für Blockcontainer
- Unterstützung für die Position von emulierten faltbaren Geräten
- Dynamische Themen
- Warnungen zur Einstellung von Drittanbieter-Cookies im Bereich „Netzwerk“ und „Anwendung“
- Lighthouse 11.4.0
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserungen bei Elementen
- Optimierte Filterleiste im Bereich „Netzwerk“
@font-palette-values
-Support- Unterstützter Fall: Benutzerdefinierte Eigenschaft als Fallback einer anderen benutzerdefinierten Eigenschaft
- Verbesserte Unterstützung von Quellzuordnungen
- Verbesserungen am Bereich „Leistung“
- Track „Erweiterte Interaktionen“
- Erweiterte Filterung auf den Tabs „Bottom-Up“, „Anrufbaum“ und „Ereignisprotokoll“
- Einzugshinweise im Bereich „Quellen“
- Hilfreiche Kurzinfos zu überschriebenen Überschriften und Inhalten im Bereich „Netzwerk“
- Neue Optionen im Befehlsmenü zum Hinzufügen und Entfernen von Blockierungsmustern für Anfragen
- Der Test zu CSP-Verstößen wird entfernt
- Lighthouse 11.3.0
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Einstellung von Drittanbieter-Cookies
- Cookies Ihrer Website mit dem Privacy Sandbox Analysis Tool analysieren
- Erweiterte Funktion zum Ignorieren von Einträgen
- Standard-Ausschlussmuster für node_modules
- Wenn eine Ausnahme abgefangen wird oder nicht ignorierten Code passiert, wird die Ausführung jetzt beendet.
x_google_ignoreList
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
- Gültige Content Security Policy im Bereich „Anwendung“
- Verbesserte Fehlerbehebung bei Animationen
- Dialogfeld „Ist dieser Code vertrauenswürdig?“ in „Quellen“ und Warnung vor Self-XSS in der Console
- Event-Listener-Haltepunkte in Webworkern und Worklets
- Das neue Mediensymbol für
<audio>
und<video>
- Vorabladen in „Spekulatives Laden“ umbenannt
- Lighthouse 11.2.0
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserter @property-Bereich unter „Elements“ > „Stile“
- Bearbeitbare @property-Regel
- Probleme mit ungültigen @property-Regeln werden gemeldet
- Aktualisierte Liste der zu emulierenden Geräte
- Pretty Print-Inline-JSON in Script-Tags unter „Quellen“
- Private Felder in der Console automatisch vervollständigen
- Lighthouse 11.1.0
- Verbesserungen bei der Barrierefreiheit
- Einstellung von Web SQL
- Validierung des Seitenverhältnisses von Screenshots unter „Anwendung“ > „Manifest“
- Sonstige Highlights
- Neuer Bereich für benutzerdefinierte Eigenschaften unter „Elemente“ > „Stile“
- Weitere Verbesserungen bei lokalen Überschreibungen
- Erweiterte Suche
- Verbesserter Bereich „Quellen“
- Optimierter Arbeitsbereich im Bereich „Quellen“
- Bereiche in „Quellen“ neu anordnen
- Syntaxhervorhebung und übersichtliche Darstellung für weitere Scripttypen
- Medienfunktion „prefers-reduced-transparency“ emulieren
- Leuchtturm 11
- Verbesserungen bei der Barrierefreiheit
- Sonstige Highlights
- Verbesserungen im Netzwerkbereich
- Webinhalte noch schneller lokal überschreiben
- Inhalte von XHR- und Abrufanfragen überschreiben
- Chrome-Erweiterungsanfragen ausblenden
- Lesbare HTTP-Statuscodes
Leistung: Änderungen an der Abrufpriorität für Netzwerkereignisse ansehen
- Standardmäßig aktivierte Quelleneinstellungen: Code-Einklappen und automatische Dateienthüllung
- Verbesserte Fehlerbehebung bei Problemen mit Drittanbieter-Cookies
- Neue Farben
- Lighthouse 10.4.0
- Vorabladen im Bereich „Anwendung“ debuggen
- Die C/C++-WebAssembly-Debugging-Erweiterung für die 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 lineare Zeitachse unter „Elemente“ > „Stile“ > „Editor für Übergänge“
- Unterstützung von Storage-Buckets und Metadatenansicht
- Lighthouse 10.3.0
- Bedienungshilfen: Tastaturbefehle und verbesserte Screenreader-Funktionen
- Sonstige Highlights
- Verbesserungen bei Elementen
- Neues CSS-Logo für das CSS-Subgrid
- Auswahlspezifität in Kurzinfos
- Werte von benutzerdefinierten CSS-Eigenschaften in Kurzinfos
- Verbesserungen bei Quellen
- CSS-Syntax-Hervorhebung
- Tastenkürzel zum Festlegen bedingter Haltepunkte
- Anwendung > Eindämmung von Bounce-Tracking
- Lighthouse 10.2.0
- Inhaltsscripts standardmäßig ignorieren
- Netzwerk > Antwortverbesserungen
- Verschiedene Highlights
- Unterstützung für WebAssembly-Debugging
- Verbessertes Schrittverhalten in Wasm-Apps
- Fehlerbehebung bei Autofill mithilfe des Steuerfelds „Elemente“ und des Tabs „Probleme“
- Assertions in der Rekorder App
- Lighthouse 10.1.1
- Leistungsverbesserungen
- Mit „performance.mark()“ wird das Timing beim Hovern unter „Leistung“ > „Timings“ angezeigt.
- profile() unter „Leistung“ > „Hauptseite“
- Warnung bei langsamen Nutzerinteraktionen
- Web Vitals-Updates
- Einstellung des JavaScript-Profilers: Phase 3
- Sonstige Highlights
- Netzwerkantwortheader überschreiben
- Verbesserungen beim Debuggen von Nuxt, Vite und Rollup
- Verbesserungen bei CSS unter „Elemente“ > „Stile“
- Ungültige CSS-Eigenschaften und ‑Werte
- Links zu Keyframes in der Kurzschreibweise für Animationen
- Neue Console-Einstellung: Autocomplete on Enter
- Im Befehlsmenü werden erstellte Dateien hervorgehoben
- Einstellung des JavaScript-Profilers: Phase 2
- Sonstige Highlights
- Updates für Rekorder
- Erweiterungen für die Wiedergabe von Aufzeichnungen
- Datensatz mit Pierce-Selektoren erstellen
- Aufzeichnungen als Puppeteer-Scripts mit Lighthouse-Analyse exportieren
- Erweiterungen für Rekorder herunterladen
- Elemente > Updates für Stile
- CSS-Dokumentation im Bereich „Styles“
- Unterstützung für verschachtelte Preisvergleichsportale
- Logpoints und bedingte Haltepunkte in der Console markieren
- Irrelevante Scripts beim Debuggen ignorieren
- Einstellung von JavaScript Profiler gestartet
- Weniger Kontrast emulieren
- Lighthouse 10
- Sonstige Highlights
- Fehlerbehebung bei HD-Farben mit dem Bereich „Stile“
- Verbesserte UX für Unterbrechungen
- Benutzerdefinierte Tastenkürzel für den Rekorder
- Verbesserte Syntaxhervorhebung für Angular
- Caches im Bereich „Anwendung“ neu anordnen
- Sonstige Highlights
- Leistungsbereich beim Aktualisieren löschen
- Updates für Rekorder
- Code des User Flows im Recorder ansehen und hervorheben
- Auswahltypen einer Aufnahme anpassen
- User Flow während der Aufzeichnung bearbeiten
- Automatischer Direktdruck
- Verbesserte Syntaxhervorhebung und Inline-Vorschau für Vue, SCSS und mehr
- Ergonomische und einheitliche automatische Vervollständigung in der Console
- Verschiedene Highlights
- Aufzeichnung: Optionen zum Kopieren von Schritten, Wiedergabe auf der Seite, Kontextmenü des Schritts
- Tatsächliche Funktionsnamen in den Aufzeichnungen der Leistung anzeigen
- Neue Tastenkürzel im Bereich „Konsole und Quellen“
- Verbesserte JavaScript-Fehlerbehebung
- Sonstige Highlights
- [Experimentell] Verbesserte Nutzerfreundlichkeit beim Verwalten von Wendepunkten
- [Experimentell] Automatische In-Place-Optimierung
- Tipps zu inaktiven CSS-Properties
- XPath- und Text-Selectors im Bereich „Rekorder“ automatisch erkennen
- Komma getrennte Ausdrücke durchgehen
- Verbesserte Einstellung der Ignorieren-Liste
- Sonstige Highlights
- Tastenkombinationen in den Entwicklertools anpassen
- Zwischen hellem und dunklem Design mit Tastenkombination wechseln
- C/C++-Objekte im Speicherprüftool hervorheben
- Vollständige Initiatorinformationen für den HAR-Import unterstützen
- DOM-Suche nach Drücken der Taste
Enter
starten start
- undend
-Symbole füralign-content
-CSS-Flexbox-Eigenschaften anzeigen- Sonstige Highlights
- Dateien im Bereich „Quellen“ nach „Erstellt“/„Bereitgestellt“ gruppieren
- Verknüpfte Stacktraces für asynchrone Vorgänge
- Bekannte Drittanbieter-Scripts automatisch ignorieren
- Verbesserter Aufrufstapel während der Fehlerbehebung
- Quellen auf der Ignorieren-Liste im Bereich „Quellen“ ausblenden
- Dateien, die auf der Ignorierliste aufgeführt sind, im Befehlsmenü ausblenden
- Neuer Messwert „Interaktionen“ im Bereich „Leistung“
- Aufschlüsselung der LCP-Zeiten im Bereich „Leistungsstatistiken“
- Standardnamen für Aufnahmen im Rekorderbereich automatisch generieren
- Sonstige Highlights
- Schritt-für-Schritt-Anleitung zum Abspielen im Rekorder
- Unterstützung von Mauszeiger-Ereignissen im Rekorder-Steuerfeld
- Largest Contentful Paint (LCP) im Bereich „Leistungsstatistiken“
- Flirten im Text (FOIT, FOUT) als mögliche Ursachen für Layout Shifts identifizieren
- Protokoll-Handler im Manifestbereich
- Symbol für die oberste Ebene im Elementbereich
- Wasm-Debugging-Informationen zur Laufzeit anhängen
- Unterstützung für Live-Bearbeitung während der Fehlerbehebung
- @Scope at-Regeln im Bereich „Styles“ ansehen und bearbeiten
- Verbesserungen an der Quellkarte
- Sonstige Highlights
- Frame während der Fehlerbehebung neu starten
- Optionen für die Zeitlupenwiedergabe im Steuerfeld für die Rekorder App
- 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 für nicht farbliche Werte beim automatischen Vervollständigen von CSS-Variablen anzeigen
- Blockierende Frames im Bereich „Back-Forward-Cache“ identifizieren
- Verbesserte Vorschläge für die automatische Vervollständigung von JavaScript-Objekten
- Verbesserungen bei Quellkarten
- Sonstige Highlights
- Doppelklick- und Rechtsklickereignisse im Bereich „Rekorder“ erfassen
- Neuer 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 Vorschau von Inline-Werten beim Debuggen
- Unterstützung großer Blobs für virtuelle Authenticatoren
- Neue Tastenkombinationen im Bereich „Quellen“
- Verbesserungen bei Quellkarten
- Vorabversion: Neues Steuerfeld für Leistungsstatistiken
- Neue Tastenkombinationen, um helle und dunkle Designs zu emulieren
- Verbesserte Sicherheit auf dem Tab „Netzwerkvorschau“
- Verbessertes Neuladen am Haltepunkt
- Änderungen an der Console
- Aufzeichnung des User Flows am Anfang abbrechen
- Übernommene Pseudoelemente zum Hervorheben im Bereich „Stile“ anzeigen
- Sonstige Highlights
- [Experimentell] CSS-Änderungen kopieren
- [Experimentell] Farbe außerhalb des Browsers auswählen
- Aufgezeichnete Nutzerflüsse als JSON-Datei importieren und exportieren
- Kaskadenebenen im Bereich „Stile“ ansehen
- Unterstützung der Farbfunktion
hwb()
- Verbesserte Darstellung von Privatgrundstücken
- Sonstige Highlights
- [Experimentell] Neuer Zeitspanne- und Snapshot-Modus im Lighthouse-Steuerfeld
- @supports bei Regeln im Bereich „Stile“ ansehen und bearbeiten
- Unterstützung gängiger Auswahltools
- Auswahl für die Aufzeichnung anpassen
- Aufnahme umbenennen
- Vorschau von Klassen-/Funktionseigenschaften beim Bewegen des Mauszeigers
- Teilweise angezeigte Frames im Bereich „Leistung“
- Sonstige Highlights
- WebSocket-Anfragen drosseln
- Neuer Bereich „Reporting API“ im Bereich „Anwendung“
- Warten, bis das Element im Rekorder-Bereich sichtbar/anklickbar ist
- Verbessertes Console-Styling, bessere Formatierung und Filterung
- Chrome-Erweiterung mit Quellkartendateien debuggen
- Verbesserte Struktur des Quellordners im Bereich „Quellen“
- Quelldateien von Workern im Bereich „Quellen“ anzeigen
- Änderungen am automatischen dunklen Design in Chrome
- Touchfreundliche Farbauswahl und geteilter Bereich
- Verschiedene Highlights
- Vorabversion: Vollbild-Baumansicht für Barrierefreiheit
- Detailliertere Änderungen auf dem Tab „Änderungen“
- Längere Zeitüberschreitung für die Aufzeichnung des User Flows festlegen
- Über den Tab „Back-Forward-Cache“ prüfen, ob Ihre Seiten im Cache gespeichert werden können
- 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 Tastenkürzel zum Wiedergeben von XHR-Anfragen und zum Maximieren aller Suchergebnisse
- Lighthouse 9 im Lighthouse-Steuerfeld
- Verbesserter Bereich „Quellen“
- Sonstige Highlights
- [Experimentell] Endpunkte im Bereich „Reporting API“
- Vorschaufunktion: Neuer Rekorder-Bereich
- Geräteliste im Gerätemodus aktualisieren
- Automatische Vervollständigung mit „Als HTML bearbeiten“
- Verbessertes Debuggen von Code
- Entwicklertools-Einstellungen geräteübergreifend synchronisieren
- Vorabversion: Neuer Bereich „CSS-Übersicht“
- Wiederherstellung und Verbesserung der Bearbeitung und des Kopierens von CSS-Abständen
- Funktion „Kontrast-Kontrast“ in CSS emulieren
- Die Funktion „Dunkles Design automatisch“ 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
- Richtige Vorschau und Bewertung von
Intl
-Objekten in der Console - Konsistente Async-Stacktraces
- Konsolen-Seitenleiste beibehalten
- Der verworfene Bereich „Application Cache“ im Bereich „Application“
- [Experimentell] Neuer Bereich „Reporting API“ im Bereich „Anwendungen“
- Neue Authoring-Tools für die CSS-Länge
- Probleme auf dem Tab „Probleme“ ausblenden
- Anzeige von Unterkünften verbessert
- Lighthouse 8.4 im Leuchtturm-Steuerfeld
- Snippets im Bereich „Quellen“ sortieren
- Neue Links zu den Übersetzungen der Versionshinweise und Melden eines Übersetzungsfehlers
- Verbesserte Benutzeroberfläche für das DevTools-Befehlsmenü
- DevTools in Ihrer bevorzugten Sprache verwenden
- Neue Nest Hub-Geräte in der Geräteliste
- Ursprungstests in der Detailansicht des Frames
- Neues Symbol für CSS-Containerabfragen
- Neues Kästchen zum Umkehren der Netzwerkfilter
- Einstellung der Seitenleiste der Console
- Roh-
Set-Cookies
-Header auf dem Tab „Probleme“ und im Bereich „Netzwerk“ anzeigen - Native Zugriffe einheitlich als eigene Properties in der Console anzeigen
- Richtige Fehler-Stack-Traces für Inline-Scripts mit #sourceURL
- Farbformat im Bereich „Berechnet“ ändern
- Benutzerdefinierte Kurzinfos durch native HTML-Kurzinfos ersetzen
- [Experimentell] Probleme auf dem Tab „Probleme“ ausblenden
- Bearbeitbare CSS-Containerabfragen im Bereich „Stile“
- Web-Bundle-Vorschau im Bereich „Netzwerk“
- Fehlerbehebung für die Attribution Reporting API
- Bessere Stringverarbeitung in der Console
- Verbesserte CORS-Fehlerbehebung
- Lighthouse 8.1
- URL für neue Notiz im Manifest-Bereich
- Fixierte CSS-Übereinstimmungsselektoren
- JSON-Antworten im Bereich „Netzwerk“ im benutzerfreundlichen Format anzeigen
- CSS-Raster-Editor
- Unterstützung für die erneute Deklaration von
const
in der Console - Viewer für Quellenreihenfolge
- Neue Tastenkombination zum Aufrufen von Frame-Details
- Erweiterte CORS-Debugging-Unterstützung
- XHR-Label in Fetch/XHR umbenennen
- Wasm-Ressourcentyp im Bereich „Netzwerk“ filtern
- User-Agent-Clienthinweise für Geräte im Tab „Netzwerkbedingungen“
- Probleme im Quirks-Modus auf dem Tab „Probleme“ melden
- Kreuzungen im Bereich „Leistung“ in das Steuerfeld „Leistung“ aufnehmen
- Lighthouse 7.5 im Leuchtturm-Steuerfeld
- Das Kontextmenü „Frame neu starten“ im Aufrufstapel wurde eingestellt
- [Experimentell] Protokollmonitor
- [Experimentell] Puppeteer Recorder
- Pop-up mit Informationen zu Web Vitals
- Neuer Memory Inspector
- CSS-Scroll-Snap visualisieren
- Neuer Bereich für die Kennzeicheneinstellungen
- Verbesserte Bildvorschau mit Informationen zum Seitenverhältnis
- Neue Schaltfläche für Netzwerkbedingungen mit Optionen zum Konfigurieren von
Content-Encoding
s - Tastenkombination zum Ansehen 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 der JavaScript-Prüfung für private Marken
- Erweiterter Support für die Fehlerbehebung bei Haltestellen
- Unterstützung von Vorschauen beim Bewegen des Mauszeigers mit
[]
-Notation - Verbesserte Gliederung von HTML-Dateien
- Richtige Fehler-Stack-Traces für das Wasm-Debugging
- Neue CSS-Flexbox-Debugging-Tools
- Neues Core Web Vitals-Overlay
- Anzahl der Probleme in die Console-Statusleiste verschoben
- Probleme mit vertrauenswürdigen Webaktivitäten melden
- Strings in der Console als (gültige) JavaScript-Stringliterale formatieren
- Neuer Bereich „Trust Tokens“ im Bereich „Anwendung“
- CSS-Medienfunktion „color-gamut“ emulieren
- Verbesserte Tools für progressive Web-Apps
- Neue Spalte
Remote Address Space
im Bereich „Netzwerk“ - Leistungsverbesserungen
- Zulässige und nicht zulässige Funktionen in der Detailansicht des Frames anzeigen
- Neue Spalte
SameParty
im Bereich „Cookies“ - Eingestellte Unterstützung für nicht standardmäßige
fn.displayName
-Formate - Einstellung von
Don't show Chrome Data Saver warning
im Menü „Einstellungen“ - [Experimentell] Automatische Berichte zu Problemen mit niedrigem Kontrast auf dem Tab „Probleme“
- [Experimentell] Vollständige Baumansicht für Barrierefreiheit im Bereich „Elemente“
- Unterstützung bei der Fehlerbehebung bei Verstößen gegen vertrauenswürdige Typen
- Knoten einen Screenshot außerhalb des Darstellungsbereichs aufnehmen
- Neuer Tab „Trust Tokens“ für Netzwerkanfragen
- Lighthouse 7 im Lighthouse-Steuerfeld
- Unterstützung für erzwungenen CSS-Status
:target
- Neue Verknüpfung zum Duplizieren eines Elements
- Farbfelder für benutzerdefinierte CSS-Properties
- Neue Tastenkürzel zum Kopieren von CSS-Eigenschaften
- Neue Option zum Anzeigen von URL-decodierten Cookies
- Nur sichtbare Cookies löschen
- Neue Option zum Löschen von Drittanbieter-Cookies im Bereich „Speicher“
- User-Agent-Client-Hints für benutzerdefinierte Geräte bearbeiten
- Einstellung „Netzwerkprotokoll aufzeichnen“ beibehalten
- WebTransport-Verbindungen im Bereich „Netzwerk“ ansehen
- „Online“ in „Ohne Drosselung“ umbenannt
- Neue Optionen zum Kopieren in der Console, im Bereich „Quellen“ und im Bereich „Stile“
- Neue Informationen zu Dienst-Workern in der Frame-Detailansicht
- Speicherinformationen in der Ansicht „Frame-Details“ messen
- Feedback über den Tab „Probleme“ geben
- Im Bereich „Leistung“ abgelegte Frames
- Faltbare Geräte und Dual-Screen-Geräte im Gerätemodus emulieren
- [Experimentell] Browsertests mit Puppeteer Recorder automatisieren
- [Experimentell] Schrifteditor im Bereich „Stile“
- [Experimentell] Debugging-Tools in der CSS-Flexbox
- [Experimentell] Neuer Tab „CSP-Verstöße“
- [Experimentell] Neue Berechnung des Farbkontrasts – Advanced Perceptual Contrast Algorithm (APCA)
- Schnelleres Starten der Entwicklertools
- Neue CSS-Tools zur Visualisierung von Winkeln
- Nicht unterstützte Bildtypen emulieren
- Speicherkontingentgröße im Bereich „Speicher“ simulieren
- Neue Web Vitals-Leiste im Bereich „Leistung“
- CORS-Fehler im Bereich „Netzwerk“ melden
- Informationen zur ursprungsübergreifenden Isolierung in der Frame-Detailansicht
- Neue Informationen zu Web Workers in der Frame-Detailansicht
- Details zum Anfangs-Frame für geöffnete Fenster anzeigen
- Netzwerkbereich über den Bereich „Service Workers“ öffnen
- Property-Wert kopieren
- Stacktrace für Netzwerkinitiator kopieren
- Wasm-Variablenwert bei Mausbewegung als Vorschau anzeigen
- Wasm-Variable in der Console auswerten
- Einheitliche Maßeinheiten für Datei-/Speichergrößen
- Pseudoelemente im Elementbereich hervorheben
- [Experimentell] CSS Flexbox-Debugging-Tools
- [Experimentell] Tastenkürzel für Akkorde anpassen
- Neue Tools zum Debuggen von CSS-Rastern
- Neuer WebAuthn-Tab
- Tools in das obere und untere Steuerfeld verschieben
- Neue Seitenleiste „Berechnet“ im Bereich „Stile“
- CSS-Attribute im Bereich „Computed“ gruppieren
- Lighthouse 6.3 im Lighthouse-Steuerfeld
performance.mark()
-Ereignisse im Bereich „Timings“- Neue
resource-type
- undurl
-Filter im Bereich „Werbenetzwerk“ - Änderungen an der Ansicht der Frame-Details
- Einstellung von
Settings
im Menü „Weitere Tools“ - [Experimentell] Probleme mit dem Farbkontrast im Bereich „CSS-Übersicht“ ansehen und beheben
- [Experimentell] Tastenkürzel in den DevTools anpassen
- Bereich „Neue Medien“
- Knoten-Screenshots über das Kontextmenü des Steuerfelds „Elemente“ aufnehmen
- Änderungen am Tab „Probleme“
- Fehlende lokale Schriftarten emulieren
- Inaktive Nutzer emulieren
- Emulate
prefers-reduced-data
- Unterstützung neuer JavaScript-Funktionen
- Lighthouse 6.2 im Leuchtturm-Steuerfeld
- Eintrag „andere Ursprünge“ im Bereich „Service Worker“ wird eingestellt
- Zusammenfassung der Abdeckung für gefilterte Elemente einblenden
- Neue Ansicht für Frame-Details im Bereich „Anwendung“
- Vorschlag für barrierefreie Farben im Bereich „Stile“
- Bereich Eigenschaften im Bereich „Elemente“ wiederherstellen
- Lesbare
X-Client-Data
-Headerwerte im Bereich „Netzwerk“ - Benutzerdefinierte Schriftarten im Bereich „Stile“ automatisch vervollständigen
- Ressourcentyp immer im Bereich „Netzwerk“ anzeigen
- Schaltflächen in den Bereichen „Elemente“ und „Netzwerk“ löschen
- Stilbearbeitung für CSS-in-JS-Frameworks
- Lighthouse 6 im Lighthouse-Steuerfeld
- Einstellung von First Meaningful Paint (FMP)
- Unterstützung neuer JavaScript-Funktionen
- Neue Warnungen zu App-Verknüpfungen im Manifest-Bereich
- Service Worker-Ereignisse vom Typ
respondWith
auf dem Tab „Timing“ - Konsistentes Anzeigen des Bereichs „Berechnet“
- Bytecode-Offsets für WebAssembly-Dateien
- Zeilenweises Kopieren und Ausschneiden im Bereich „Quellen“
- Änderungen an den Console-Einstellungen
- Änderungen am Bereich „Leistung“
- Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpunkte
- Websiteprobleme mit dem neuen Tab „Probleme“ beheben
- Informationen zur Barrierefreiheit in der Kurzinfo zum Inspektionsmodus aufrufen
- Änderungen am Bereich „Leistung“
- Präzisere Terminologie für Zusagen in der Console
- Änderungen am Steuerfeld „Stile“
- Einstellung des Bereichs Eigenschaften im Bereich „Elemente“
- Unterstützung von App-Verknüpfungen im Manifest-Bereich
- Sehschwächen emulieren
- Sprachen emulieren
- Debugging der Cross-Origin-Embedder-Richtlinie (COEP)
- Neue Symbole für Haltepunkte, bedingte Haltepunkte und Logpunkte
- Netzwerkanfragen ansehen, die ein bestimmtes Cookie setzen
- Über das Befehlsmenü links andocken
- Die Option „Einstellungen“ im Hauptmenü wurde verschoben
- Das Steuerfeld „Audits“ heißt jetzt „Lighthouse“
- Alle lokalen Überschreibungen in einem Ordner löschen
- Aktualisierte Benutzeroberfläche für lange Aufgaben
- Unterstützung für maskierbare Symbole im Manifestbereich
- Unterstützung für Moto G4 im Gerätemodus
- Änderungen im Zusammenhang mit Cookies
- Genauere Symbole für Web-App-Manifeste
- Den Mauszeiger auf CSS-
content
-Properties bewegen, um nicht entescapede Werte zu sehen - Source Map-Fehler in der Console
- Einstellung zum Deaktivieren des Scrollens über das Ende einer Datei hinaus
- Unterstützung für die Neudeklaration von
let
undclass
in der Console - Verbessertes WebAssembly-Debugging
- Initiator-Ketten auf dem Tab „Initiator“ anfordern
- Ausgewählte Netzwerkanfrage in der Übersicht hervorheben
- 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
- Cookie-Werte ansehen
- Unterschiedliche Einstellungen für „prefers-color-scheme“ und „prefers-reduced-motion“ simulieren
- Aktualisierungen der Codeabdeckung
- Herausfinden, warum eine Netzwerkressource angefordert wurde
- In den Bereichen „Console“ und „Quellen“ werden die Einstellungen für Einzüge wieder berücksichtigt
- Neue 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“
- DevTools-Probleme über das Hauptmenü melden
- Elementstile kopieren
- Layoutänderungen visualisieren
- Lighthouse 5.1 im Bereich „Audits“
- Synchronisierung des Betriebssystems
- Tastenkombination zum Öffnen des Breakpoints-Editors
- Prefetch-Cache im Bereich „Netzwerk“
- Private Properties beim Ansehen von Objekten
- Benachrichtigungen und Push-Nachrichten im Bereich „Anwendung“
- Automatische Vervollständigung mit CSS-Werten
- Neue Benutzeroberfläche für Netzwerkeinstellungen
- WebSocket-Nachrichten in HAR-Exporten
- Schaltflächen für den HAR-Import und -Export
- Arbeitsspeichernutzung in Echtzeit
- Portnummern für die Registrierung von Dienst-Workern
- Ereignisse für den Hintergrundabruf und die Hintergrundsynchronisierung prüfen
- Puppeteer für Firefox
- Sinnvolle Voreinstellungen beim automatischen Vervollständigen von CSS-Funktionen
- Websitedaten über das Befehlsmenü löschen
- Alle IndexedDB-Datenbanken ansehen
- Nicht komprimierte Größe einer Ressource beim Bewegen des Mauszeigers anzeigen
- Inline-Haltepunkte im Bereich „Haltepunkte“
- Anzahl der IndexedDB- und Cache-Ressourcen
- Einstellung zum Deaktivieren der detaillierten Kurzinfo „Inspizieren“
- Einstellung zum Ein- und Ausblenden von Tabulatorabständen im Editor
- Alle Knoten hervorheben, die von der CSS-Eigenschaft betroffen sind
- Lighthouse v4 im Bereich „Audits“
- WebSocket-Binärnachrichtenanzeige
- Screenshot des Bereichs im Befehlsmenü aufnehmen
- Service Worker-Filter im Bereich „Netzwerk“
- Aktualisierungen des Leistungssteuerfelds
- Lange Aufgaben in Aufzeichnungen im Bereich „Leistung“
- First Paint im Bereich „Timing“
- Bonustipp: Tastenkombination zum Aufrufen von RGB- und HSL-Farbcodes (Video)
- Logpunkte
- Detaillierte Kurzinfos im Inspektionsmodus
- Daten zur Codeabdeckung exportieren
- Console mit einer Tastatur bedienen
- Linie für das AAA-Kontrastverhältnis in der Farbauswahl
- Benutzerdefinierte Überschreibungen für die Standortbestimmung speichern
- Code Folding
- Der Tab „Frames“ wurde in „Nachrichten“ umbenannt.
- Bonustipp: Filtern nach Property im Netzwerkbereich (Video)
- Leistungsmesswerte im Bereich „Leistung“ visualisieren
- Textknoten im DOM-Baum markieren
- JS-Pfad in einen DOM-Knoten kopieren
- Aktualisierungen des Auditbereichs, einschließlich einer neuen Prüfung, die JS-Bibliotheken und neue Keywords für den Zugriff auf den Bereich „Audits“ über das Befehlsmenü erkennt
- Bonustipp: Mediaabfragen mit dem Gerätemodus prüfen (Video)
- Bewegen Sie den Mauszeiger auf das Ergebnis eines Live-Ausdrucks, um einen DOM-Knoten hervorzuheben.
- DOM-Knoten als globale Variablen speichern
- Informationen zum Initiator und zur Priorität sind jetzt in HAR-Importen und ‑Exporten enthalten
- Über das Hauptmenü auf das Befehlsmenü zugreifen
- Haltepunkte für Bild im Bild
- Bonustipp: Mit
monitorEvents()
ausgelöste Ereignisse eines Knotens in der Console protokollieren (Video) - Live-Ausdrücke in der Console
- DOM-Knoten bei der genauen Auswertung hervorheben
- Optimierungen für den Bereich „Leistung“
- Zuverlässigeres Debugging
- Netzwerkdrosselung über das Befehlsmenü aktivieren
- Bedingte Unterbrechungen automatisch vervollständigen
- Bei AudioContext-Ereignissen pausieren
- Node.js-Anwendungen mit ndb debuggen
- Bonustipp: Messen Sie Interaktionen von Nutzern in der realen Welt mit der User Timing API.
- Eager Evaluation
- Argumenthinweise
- Automatische Vervollständigung von Funktionen
- ES2017 keywords
- Lighthouse 3.0 im Bereich „Audits“
- BigInt-Unterstützung
- Property-Pfade zum Bereich „Watch“ hinzufügen
- „Zeitstempel anzeigen“ wurde in die Einstellungen verschoben
- Bonustipp: Weniger bekannte Konsolenmethoden (Video)
- In allen Netzwerkheadern suchen
- Vorschau der Werte von CSS-Variablen
- Als Fetch kopieren
- Neue Prüfungen, Konfigurationsoptionen für Computer und Aufrufspuren
- Endlosschleifen beenden
- Nutzertimings auf den Leistungs-Tabs
- JavaScript-VM-Instanzen sind im Bereich „Arbeitsspeicher“ übersichtlich aufgeführt
- Tab „Network“ wurde in Tab „Page“ (Seite) umbenannt
- Aktualisierungen für das dunkle Design
- Informationen zur Zertifikatstransparenz im Bereich „Sicherheit“
- Funktionen zur Website-Isolierung im Bereich „Leistung“
- Bonustipp: Ebenenbereich + Animations-Inspector (Video)
- Blackboxing im Bereich „Netzwerk“
- Zoom im Gerätemodus automatisch anpassen
- Schönformatierte Ausgabe auf den Tabs „Vorschau“ und „Antwort“
- HTML-Inhalte auf dem Tab „Vorschau“ in der Vorschau ansehen
- Unterstützung lokaler Überschreibungen für Stile in HTML
- Bonustipp: Blackbox-Framework-Scripts, um Event-Listener-Haltepunkte nützlicher zu machen
- Lokale Überschreibungen
- Neue Tools für die Barrierefreiheit
- Tab „Änderungen“
- Neue SEO- und Leistungsaudits
- Mehrere Aufzeichnungen im Bereich „Leistung“
- Zuverlässiges Code-Stepping mit Workern in asynchronem Code
- Bonustipp: DevTools-Aktionen mit Puppeteer automatisieren (Video)
- Leistungsüberwachung
- Console-Seitenleiste
- Ähnliche Konsolennachrichten gruppieren
- Bonustipp: Pseudoklassifizierung „hover“ ein- und ausschalten (Video)
- Fehlerbehebung per Fernzugriff für mehrere Clients
- Workspaces 2.0
- 4 neue Audits
- Push-Benachrichtigungen mit benutzerdefinierten Daten simulieren
- Hintergrundsynchronisierungsereignisse mit benutzerdefinierten Tags auslösen
- Bonustipp: Event-Listener-Haltepunkte (Video)
- Top-Level-await in der Console
- Neue Workflows für Screenshots
- CSS-Raster hervorheben
- Eine neue Console API zum Abfragen von Objekten
- Neue Konsolenfilter
- HAR-Importe im Bereich „Netzwerk“
- Cache-Ressourcen in der Vorschau
- Bessere Cache-Fehlerbehebung
- Codeabdeckung auf Blockebene
- Simulation der Drosselung von Mobilgeräten
- Speichernutzung ansehen
- Sehen, wann ein Service Worker Antworten im Cache gespeichert hat
- FPS-Messer über das Befehlsmenü aktivieren
- Verhalten des Mausrads für Zoomen oder Scrollen festlegen
- Unterstützung für das Debuggen von ES6-Modulen
- Neuer Bereich „Audits“
- Abzeichen von Drittanbietern
- Eine neue Touch-Geste für „Weiter bis hier“
- Asynchrones JavaScript kennenlernen
- Aussagekräftigere Objektvorschauen in der Console
- Aussagekräftigere Kontextauswahl in der Console
- Echtzeitaktualisierungen auf dem Tab „Abdeckung“
- Einfachere Optionen für die Netzwerkdrosselung
- Asynchrone Stacks standardmäßig aktiviert
- Abdeckung von CSS- und JS-Code
- Screenshots des ganzen Bildschirms
- Anfragen blockieren
- Über „async await“ springen
- Einheitliches Befehlsmenü