Neuerungen in den Entwicklertools (Chrome 95)

Jecelyn Yeen

Neue Authoring-Tools für CSS-Längen

Mit den Entwicklertools ist jetzt eine einfachere und flexible Möglichkeit zum Aktualisieren von Längen in CSS verfügbar.

Suchen Sie im Bereich Styles nach CSS-Eigenschaften mit Länge (z.B. height, padding).

Bewegen Sie den Mauszeiger auf den Typ. Er ist unterstrichen. Klicken Sie darauf, um einen Einheitentyp aus dem Drop-down-Menü auszuwählen.

Bewegen Sie den Mauszeiger auf den Wert der Einheit und der Mauszeiger wird in den horizontalen Cursor geändert. Ziehen Sie horizontal, um den Wert zu erhöhen oder zu verringern. Wenn Sie den Wert um 10 anpassen möchten, halten Sie beim Ziehen die Umschalttaste gedrückt.

Sie können den Wert der Einheit weiterhin als Text bearbeiten. Klicken Sie dazu einfach auf den Wert und bearbeiten Sie ihn.

Chromium-Probleme: 1126178, 1172993

Probleme auf dem Tab „Probleme“ ausblenden

Du kannst jetzt auf dem Tab „Probleme“ bestimmte Probleme ausblenden, um dich auf die für dich relevanten Probleme zu konzentrieren.

Bewegen Sie auf dem Tab Probleme den Mauszeiger auf ein Problem, das Sie ausblenden möchten. Klicken Sie auf Weitere Optionen   Mehr   > Ähnliche Probleme ausblenden.

Menü „Probleme“ ausblenden

Alle ausgeblendeten Probleme werden im Bereich Ausgeblendete Probleme angezeigt. Maximieren Sie den Bereich. Du kannst alle ausgeblendeten oder ausgewählte Probleme wieder einblenden.

Ausgeblendeter Problembereich

Chromium-Problem: 1175722

Die Anzeige von Eigenschaften wurde verbessert.

Die Entwicklertools verbessern die Anzeige von Properties durch:

  • Eigene Eigenschaften immer zuerst fett formatieren und zuerst im Bereich Console, Quellen und Eigenschaften anzeigen lassen.
  • Sie können die im Bereich Eigenschaften angezeigten Eigenschaften vereinfachen.

Das folgende Snippet erstellt beispielsweise ein URL-Objekt link mit zwei eigenen Eigenschaften: user und access und aktualisiert den Wert einer übernommenen Eigenschaft search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Versuchen Sie, link in der Console anzumelden. Eigene Properties werden jetzt fett formatiert und zuerst sortiert. Dadurch ist es einfacher, benutzerdefinierte Eigenschaften zu erkennen, insbesondere bei Web-APIs (z.B. URL) mit vielen übernommenen Eigenschaften.

Eigene Properties sind fett formatiert und zuerst sortiert

Abgesehen von diesen Änderungen werden auch die Eigenschaften im Bereich Eigenschaften vereinfacht, um das Debugging für DOM-Eigenschaften zu verbessern, insbesondere bei Webkomponenten.

Unterkünfte zusammenfassen

Chromium-Probleme: 1076820, 1119900

Lighthouse 8.4 im Lighthouse-Steuerfeld

Im Steuerfeld Lighthouse wird jetzt Lighthouse 8.4 ausgeführt. Lighthouse erkennt jetzt, ob das LCP-Element (Largest containful Paint) ein Lazy-Loading-Bild war, und empfiehlt, das loading-Attribut daraus zu entfernen.

Hier findest du weitere Informationen zu den Neuerungen in Lighthouse 8.4.

Lazy-Loading-LCP-Prüfung in einem Lighthouse-Bericht

Chromium-Problem: 772558

Snippets im Bereich „Quellen“ sortieren

Die Snippets im Bereich Snippets im Bereich Quellen sind jetzt alphabetisch sortiert. Bisher ist sie nicht sortiert.

Verwende die Snippet-Funktion, um Befehle schneller auszuführen. In diesem Video erhältst du einen Tipp.

Snippets im Bereich „Quellen“ sortieren

Chromium-Problem: 1243976

Neue Links zu übersetzten Versionshinweisen und Meldung eines Übersetzungsfehlers

Über den Tab „Neue Funktionen“ kannst du jetzt per Klick die Versionshinweise für die Entwicklertools in sechs weiteren Sprachen lesen: Russisch, Chinesisch, Spanisch, Japanisch, Portugiesisch und Koreanisch.

Seit Chrome 94 kannst du in den Entwicklertools deine bevorzugte Sprache festlegen. Wenn Sie Probleme mit den Übersetzungen festgestellt haben, können Sie uns helfen, diese zu verbessern. Wählen Sie dazu Weitere Optionen > Hilfe > Übersetzungsfehler melden und melden Sie ein Übersetzungsproblem.

Neue Links zu übersetzten Versionshinweisen und Meldung eines Übersetzungsfehlers

Chromium-Probleme: 1246245, 1245481

Verbesserte Benutzeroberfläche des Befehlsmenüs der Entwicklertools

Fanden Sie es schwer, im Befehlsmenü nach einer Datei zu suchen? Gute Neuigkeiten: Die Benutzeroberfläche des Befehlsmenüs wurde optimiert.

Über das Befehlsmenü können Sie mit der Tastenkombination Strg + P unter Windows und Linux oder Befehlstaste + P unter macOS nach einer Datei suchen.

Die Verbesserungen der Benutzeroberfläche des Befehlsmenüs werden weiterhin vorgenommen. Wir halten Sie auf dem Laufenden.

Befehlsmenü

Chromium-Problem: 1201997

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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59