Neu in den Entwicklertools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Netzwerkantwortheader überschreiben

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

Mit dem Überschreiben von Antwortheadern können Sie lokal Korrekturen für verschiedene Header prototypisieren, darunter:

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

CORS-Fehler durch Überschreiben der Kopfzeile behoben.

Sie können auch benutzerdefinierte Header 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 mit Platzhaltern (*) zu überschreiben.

Alle Überschreibungen bearbeiten

Chromium-Problem: 1288023.

Verbesserungen beim Debuggen von Nuxt, Vite und Rollup

Um Ihnen die Fehlersuche zu erleichtern, werden im erweiterten Stacktrace jetzt Frames aus Quellen ausgeblendet, die von Nuxt 3.3 oder höher generiert wurden. Entwicklertools überspringen solche Frames:

  • In Console-Traces unter dem Link Show N more frames (N weitere Frames anzeigen).
  • Klicken Sie unter Quellen > Aufrufstapel unter Kästchen. auf Ignorierte Frames anzeigen.

Der Stacktrace vor und nach dem Aktivieren der Ignorierliste für Drittanbieter.

Um diese Verbesserungen zu ermöglichen, haben die Teams von DevTools, Nuxt, Vite und Rollup zusammengearbeitet, um die x_google_ignoreList-Quellzuordnungserweiterung einzuführen:

Das DevTools-Team möchte den Teams von Nuxt, Vite und Rollup für ihre Unterstützung danken. Wir wissen Ihre Bemühungen und Ihre Zusammenarbeit zu schätzen, die für den Erfolg dieser Implementierung unerlässlich waren. Vielen Dank noch einmal für Ihre Beiträge.

CSS-Verbesserungen unter „Elemente“ > „Stile“

Ungültige CSS-Properties und ‑Werte

Um Ihnen die Diagnose von CSS-Problemen zu erleichtern, werden im Bereich Stile 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 jedoch ungültig ist.

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

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

Links zu Keyframes in der Kurzform-Property für Animationen

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

Verknüpft mit Keyframes in der Kurzform-Eigenschaft für Animationen.

Chromium-Problem: 1420656.

Neue Konsoleneinstellung: Automatische Vervollständigung bei Drücken von Eingabe

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

Standardmäßig können Sie einen Vorschlag für die automatische Vervollständigung mit Tab oder Arrow right annehmen. Wenn Sie auch Enter für die automatische Vervollständigung verwenden möchten, aktivieren Sie Einstellungen. Einstellungen > Konsole > Kästchen. Vorschlag für automatische Vervollständigung mit der Eingabetaste übernehmen.

Das entsprechende Kästchen in den Einstellungen.

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

Chromium-Problem: 1276960.

Im Befehlsmenü werden erstellte Dateien hervorgehoben

Im Dialogfeld „Schnell öffnen“ im Befehlsmenü werden auf der Ignorierliste stehende Drittanbieterdateien jetzt ausgegraut, um die von Ihnen erstellten Dateien stärker hervorzuheben.

Ein ignoriertes Skript im Dialogfeld „Schnell öffnen“ vor und nach der Änderung.

Chromium-Problem: 1424345.

JavaScript-Profiler wird eingestellt: Phase 2

Bereits in Chrome 58 hat das DevTools-Team geplant, den JavaScript-Profiler einzustellen und Node.js- und Deno-Entwickler das Leistungssteuerfeld zum Profiling der JavaScript-CPU-Leistung verwenden zu lassen.

Mit DevTools-Version 113 beginnt die zweite Phase der vierphasigen Einstellung des JavaScript-Profilers. In dieser Phase können Sie das Steuerfeld weiterhin öffnen, aber die Benutzeroberfläche ist 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 wichtige Korrekturen in dieser Version:

  • Ein Fehler wurde behoben, der dazu führte, dass beim Pretty-Printing im Bereich Quellen Variablennamen mit Unicode-Zeichen falsch verarbeitet wurden (1425055).
  • Auf dem Tab Probleme wurde eine neue Meldung für Probleme mit dem automatischen Ausfüllen in Bezug auf nicht standardmäßige HTML-Werte (1399414) hinzugefügt.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in DevTools behandelt wurden.