Neu in den Entwicklertools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Netzwerkantwortheader überschreiben

Sie können Antwortheader jetzt im Bereich Netzwerk überschreiben. Bisher benötigte man Zugriff auf den Webserver, um mit HTTP-Antwortheadern zu experimentieren.

Mit Antwortheader-Überschreibungen können Sie lokal Prototypen für Fehlerkorrekturen für verschiedene Header erstellen, darunter:

Wenn Sie einen Header überschreiben möchten, gehen Sie zu Netzwerk > Header > Antwortheader, bewegen Sie den Mauszeiger auf den Wert eines Headers, klicken Sie auf Bearbeiten. und bearbeiten Sie ihn.

CORS-Fehler durch Header-Überschreibung behoben.

Sie können auch benutzerdefinierte Überschriften hinzufügen.

Benutzerdefinierten Header hinzufügen

Wenn Sie alle Überschreibungen an einem Ort bearbeiten möchten, bearbeiten Sie die Datei .headers unter Quellen > Überschreibungen. Dort können Sie auch auf Überschreibungsregel hinzufügen klicken, um mehrere Anfragen mithilfe von Wildcards (*) zu überschreiben.

Alle Überschreibungen bearbeiten

Chromium-Problem: 1288023.

Verbesserungen bei der Fehlerbehebung für Nuxt, Vite und Rollup

Damit Sie Probleme beim Debuggen schneller finden können, werden im erweiterten Stack-Trace jetzt Frames ausgeblendet, die von Quellen stammen, die mit Nuxt 3.3 oder höher generiert wurden. In den Entwicklertools werden solche Frames übersprungen:

  • In Console-Traces unter dem Link N weitere Frames anzeigen.
  • Unter Quellen > Call Stack, Kästchen. Frames in der Ignorierliste anzeigen.

Der Stack-Trace vor und nach der Aktivierung der Ignorierliste für Drittanbieter.

Um diese Verbesserungen zu ermöglichen, haben die Teams von DevTools, Nuxt, Vite und Rollup gemeinsam die x_google_ignoreList-Quellzuordnungserweiterung eingeführt:

Das DevTools-Team möchte den Nuxt-, Vite- und Rollup-Teams danken, dass sie dies möglich gemacht haben. Wir danken Ihnen für Ihre Bemühungen und Ihre Zusammenarbeit, die für den Erfolg dieser Implementierung entscheidend waren. Vielen Dank für Ihre Beiträge!

CSS-Verbesserungen unter „Elemente“ > „Stile“

Ungültige CSS-Properties und ‑Werte

Damit Sie CSS-Probleme schneller diagnostizieren können, werden im Bereich Styles jetzt folgende Elemente durchgestrichen:

  • Eine vollständige CSS-Deklaration (Property und Wert), wenn die CSS-Property ungültig ist.
  • Nur der Wert, wenn die CSS-Property gültig, der Wert aber ungültig ist.

Ungültiger Property-Name und ungültiger Property-Wert.

Das DevTools-Team bedankt sich bei Yisi(一丝) für diese Verbesserung.

Links zu Keyframes in der Kurzschreibweise für Animationen

Die CSS-Eigenschaft animation enthält jetzt Links zu den entsprechenden @keyframes-At-Rules, damit Sie den Bereich Stile schneller aufrufen können.

Verknüpfungen mit Keyframes in der Kurzschreibweise für die Animation.

Chromium-Problem: 1420656

Neue Console-Einstellung: Automatische Vervollständigung bei Drücken der Eingabetaste

Seit der vorherigen Version (112) können Sie die Console in den DevTools so konfigurieren, dass ein Vorschlag für die automatische Vervollständigung angewendet wird, wenn Sie die Taste Enter drücken.

Standardmäßig können Sie einen Vorschlag für die automatische Vervollständigung durch Drücken der Tasten Tab oder Arrow right akzeptieren. Wenn Sie auch mit Enter automatisch Vorschläge erhalten möchten, aktivieren Sie Einstellungen. Einstellungen > Konsole > Kästchen. Autocomplete-Vorschlag bei Eingabetaste akzeptieren.

Das entsprechende Kästchen in den Einstellungen.

Außerdem ist der Text einer anderen Einstellung jetzt nutzerfreundlicher: Kästchen. Codeevaluierung als Nutzeraktion behandeln.

Chromium-Problem: 1276960.

Im Befehlsmenü werden erstellte Dateien hervorgehoben

Im Dialogfeld „Schnell öffnen“ im Befehlsmenü sind die Dateien von Drittanbietern, die auf der Ignorierliste stehen, jetzt ausgegraut, damit die von Ihnen erstellten Dateien besser zur Geltung kommen.

Ein Script auf der Ignorierliste im Dialogfeld „Schnell öffnen“ vor und nach der Änderung

Chromium-Problem: 1424345.

Einstellung des JavaScript-Profilers: Phase 2

Bereits in Chrome 58 plante das DevTools-Team, den JavaScript-Profiler nach und nach einzustellen und Node.js- und Deno-Entwicklern das Steuerfeld Leistung für das Profiling der JavaScript-CPU-Leistung zur Verfügung zu stellen.

Mit DevTools-Version 113 beginnt Phase 2 der vierphasigen Einstellung des JavaScript-Profilers. In dieser Phase können Sie den Bereich zwar noch öffnen, die Benutzeroberfläche ist jedoch nicht mehr verfügbar.

Wenn Sie die CPU-Leistung analysieren möchten, klicken Sie auf Zum Steuerfeld „Leistung“.

Einstellung des JavaScript-Profilers

Chromium-Problem: 1354548.

Sonstige Highlights

Hier sind einige bemerkenswerte Fehlerkorrekturen in dieser Version:

  • Ein Fehler wurde behoben, durch den Variablennamen mit Unicode-Zeichen beim plattformunabhängigen Ausdruck im Bereich Quellen falsch verarbeitet wurden (1425055).
  • Auf dem Tab Probleme wurde eine neue Meldung zu Problemen beim automatischen Ausfüllen aufgrund nicht standardmäßiger HTML-Werte hinzugefügt (1399414).

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, 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.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.