Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in den Entwicklertools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

Netzwerkantwortheader überschreiben

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

Mit Überschreibungen von Antwortheadern können Sie lokal Prototyp-Fehlerkorrekturen für verschiedene Header erstellen, einschließlich, aber nicht beschränkt auf:

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 und bearbeiten Sie ihn.

Der CORS-Fehler wurde durch eine Header-Überschreibung behoben.

Sie können auch benutzerdefinierte Header hinzufügen.

Einen benutzerdefinierten Header hinzufügen

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

Alle Überschreibungen werden bearbeitet.

Chromium-Problem: 1288023.

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

Damit du Probleme beim Debugging schneller finden kannst, blendet der optimierte Stacktrace jetzt Frames aus, die aus Quellen stammen, die in Nuxt 3.3 oder höher generiert wurden. Solche Frames werden von den Entwicklertools übersprungen:

Klicken Sie in den Traces unter Console auf den Link N weitere Frames anzeigen.
Gehen Sie zu Quellen > Aufrufstack unter Frames auf der Ignorieren-Liste anzeigen.

Der Stacktrace vor und nach dem Aktivieren der Ignorieren-Liste von Drittanbietern.

Für diese Verbesserungen haben die Entwicklertools-, Nuxt-, Vite- und Rollup-Teams gemeinsam die Source Map-Erweiterung x_google_ignoreList eingeführt:

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

CSS-Verbesserungen unter „Elemente“ > „Stile“

Ungültige CSS-Eigenschaften und -Werte

Damit Sie CSS-Probleme schneller diagnostizieren können, ist der Bereich Stile jetzt durchgestrichen:

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

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

Das DevTools-Team möchte sich bei Yisi(東丝) für die Verbesserung bedanken.

Links zu Keyframes in der Eigenschaft für die Animationskurz

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

Links zu Keyframes in der Animations-Kurzhandeigenschaft

Chromium-Problem: 1420656.

Neue Konsoleneinstellung: Automatische Vervollständigung bei Eingabe

Ab der vorherigen Version (112) können Sie die Entwicklertools-Konsole so konfigurieren, dass ein automatisch vervollständigter Vorschlag angewendet wird, wenn Sie Enter drücken.

Wenn Sie standardmäßig einen automatisch vervollständigten Vorschlag annehmen möchten, drücken Sie Tab oder Arrow right. Um auch die automatische Vervollständigung mit Enter zu nutzen, aktivieren Sie Einstellungen > Konsole > Automatisch vervollständigten Vorschlag bei Eingabetaste akzeptieren.

Das entsprechende Kästchen in den Einstellungen.

Außerdem ist der Text einer anderen Einstellung jetzt nutzerfreundlicher: Codeauswertung als Nutzeraktion behandeln.

Chromium-Problem: 1276960.

Im Dialogfeld zum schnellen Öffnen im Befehlsmenü werden die Dateien von Drittanbietern, die auf der Ignorierliste stehen, jetzt ausgegraut, um die von Ihnen erstellten Dateien zu betonen.

Ein Skript auf der Ignorieren-Liste im Schnelldialogfeld vor und nach der Änderung.

Chromium-Problem: 1424345.

Einstellung des JavaScript-Profilers: Phase 2

Bereits ab Chrome 58 plante das DevTools-Team, den JavaScript-Profiler einzustellen. Außerdem sollten Node.js- und Deno-Entwickler im Bereich Leistung ein Profil für die JavaScript-CPU-Leistung erstellen.

Version 113 der Entwicklertools beginnt Phase 2 der Einstellung des JavaScript Profiler mit vier Phasen. Während dieser Phase können Sie das Steuerfeld weiterhin öffnen, aber die zugehörige Benutzeroberfläche ist nicht mehr verfügbar.

Klicken Sie auf Zum Bereich „Leistung“, um ein Profil der CPU-Leistung zu erstellen.

Der JavaScript Profiler wird eingestellt.

Chromium-Problem: 1354548.

Sonstige Highlights

Dies sind einige bemerkenswerte Korrekturen in dieser Version:

Es wurde ein Fehler behoben, bei dem bei der Optimierung im Bereich Quellen Variablennamen mit Unicode-Zeichen falsch verarbeitet wurden (1425055).
Auf dem Tab Probleme wurde die neue Meldung 1399414 für Probleme mit Autofill hinzugefügt, die nicht standardmäßige HTML-Werte betreffen.

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.