Neu in den Entwicklertools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

Netzwerkantwortheader überschreiben

Sie können jetzt Antwortheader im Bereich Netzwerk überschreiben. Früher brauchten Sie Zugriff auf den Webserver, um mit HTTP-Antwortheadern zu experimentieren.

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

• CORS-Header (Cross-Origin Resource Sharing)
• Header für Berechtigungsrichtlinien
• Cross-Origin-Isolation Header

Wenn Sie einen Header überschreiben möchten, gehen Sie zu Netzwerk > Überschriften > Response Headers (Antwortheader): Bewegen Sie den Mauszeiger auf den Wert eines Headers, klicken Sie auf und bearbeiten Sie ihn.

Sie können auch benutzerdefinierte Header hinzufügen.

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

Chromium-Problem: 1288023.

Verbesserungen bei Nuxt-, Vite- und Rollup-Debugging

Damit Sie Probleme während der Fehlerbehebung schneller erkennen können, werden im optimierten Stacktrace jetzt Frames ausgeblendet, die aus Quellen stammen, die von Nuxt 3.3 oder höher generiert wurden. Diese Frames werden in den Entwicklertools übersprungen:

• Gehen Sie in den Traces der Konsole unter dem Link N weitere Frames anzeigen vor.
• Gehen Sie unter Quellen > Aufrufstapel unter Frames auf der Ignorieren-Liste anzeigen.

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

• Nuxt 3.3-Version
• Vite-Serveroptionen
• Optionen für die Sammel-Konfiguration

Das DevTools-Team möchte sich bei den Teams von Nuxt, Vite und Rollup für die Unterstützung bedanken. Wir wissen Ihre Bemühungen und die Zusammenarbeit zu schätzen, die für den Erfolg dieser Implementierung entscheidend war. Nochmals vielen Dank für deine Beiträge!

CSS-Verbesserungen in „Elements“ > Stile

Ungültige CSS-Eigenschaften und -Werte

Damit Sie CSS-Probleme schneller diagnostizieren können, ist der Bereich Styles 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.

Das Entwicklertools-Team möchte sich bei Yisi(丝) für diese Verbesserung bedanken.

Links zu den wichtigsten Frames in der Kurzform-Eigenschaft für Animationen

Die CSS-Eigenschaft animation enthält jetzt Links zu den entsprechenden @keyframes-At-Regeln, sodass Sie schneller im Bereich Styles navigieren können.

Chromium-Problem: 1420656.

Neue Konsoleneinstellung: Automatische Vervollständigung bei Eingabetaste

Ab der vorherigen Version (112) kannst du die Entwicklertools-Konsole so konfigurieren, dass automatisch ein Vorschlag angewendet wird, wenn du Enter drückst.

Standardmäßig können Sie Tab oder Arrow right drücken, um einen automatisch vervollständigten Vorschlag zu übernehmen. Um auch die automatische Vervollständigung mit Enter zu nutzen, aktivieren Sie Einstellungen > Console > Übernehmen Sie bei der Eingabetaste einen automatisch vervollständigten Vorschlag.

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

Chromium-Problem: 1276960.

Über das Befehlsmenü werden erstellte Dateien hervorgehoben

Im Schnellzugriffsdialogfeld im Befehlsmenü werden die nicht gelisteten Drittanbieterdateien jetzt ausgegraut, um die von Ihnen erstellten Dateien hervorzuheben.

Chromium-Problem: 1424345.

Einstellung von JavaScript Profiler: Phase 2

Schon Chrome 58 plante das Entwicklertools-Team, den JavaScript Profiler irgendwann einzustellen und damit Node.js- und Deno-Entwickler über den Bereich Leistung Profile zur JavaScript-CPU-Leistung erstellen können.

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

Wenn Sie ein Profil der CPU-Leistung erstellen möchten, klicken Sie auf den Bereich Leistung.

Chromium-Problem: 1354548.

Verschiedene Highlights

Im Folgenden sind einige wichtige Fehlerkorrekturen in dieser Version aufgeführt:

• Es wurde ein Fehler behoben, der dazu führte, dass im Bereich Quellen Variablennamen mit Unicode-Zeichen falsch verarbeitet wurden (1425055).
• Auf dem Tab Probleme wurde eine neue Nachricht für Autofill-Probleme mit nicht standardmäßigen HTML-Werten (1399414) hinzugefügt.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

• Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools