Neuerungen in den Entwicklertools (Chrome 95)

Jecelyn Yeen

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

Die Entwicklertools haben eine einfachere und flexible Möglichkeit hinzugefügt, um Längen in CSS zu aktualisieren.

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

Wenn Sie den Mauszeiger auf den Einheitentyp bewegen, sehen Sie, dass er unterstrichen ist. Klicken Sie darauf, um im Drop-down-Menü einen Einheitentyp auszuwählen.

Wenn Sie den Mauszeiger auf den Wert der Einheit bewegen, ändert sich der Cursor in den horizontalen Cursor. Horizontal ziehen, 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 Einheitenwert weiterhin als Text bearbeiten. Klicken Sie einfach auf den Wert und beginnen Sie mit der Bearbeitung.

Chromium-Probleme: 1126178, 1172993

Probleme auf dem Tab „Probleme“ ausblenden

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

Bewegen Sie den Mauszeiger auf dem Tab Probleme 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 hinzugefügt. Maximieren Sie den Bereich. Du kannst alle ausgeblendeten Probleme oder ein ausgewähltes Problem einblenden.

Ausgeblendeter Bereich „Probleme“

Chromium-Problem: 1175722

Verbesserte Anzeige von Eigenschaften

Die Entwicklertools verbessern die Darstellung von Properties durch:

  • Eigene Eigenschaften immer in den Bereichen Konsole, Quellen und Eigenschaften fett formatieren und sortieren
  • Fassen Sie die Eigenschaften zusammen, die im Bereich Eigenschaften angezeigt werden.

Mit dem folgenden Snippet wird beispielsweise ein URL-Objekt link mit zwei eigenen Eigenschaften erstellt: user und access. Außerdem wird der Wert der übernommenen Eigenschaft search aktualisiert.

/* 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 zu protokollieren. Eigene Properties werden jetzt fett und zuerst sortiert. Durch diese Änderungen lassen sich benutzerdefinierte Eigenschaften leichter erkennen, insbesondere bei Web-APIs (z.B. URL) mit vielen übernommenen Eigenschaften.

Eigene Properties werden fett und zuerst sortiert

Neben diesen Änderungen wurden auch die Eigenschaften im Bereich Eigenschaften vereinfacht, um das Debugging für DOM-Eigenschaften zu verbessern, insbesondere für Webkomponenten.

Eigenschaften aufschlüsseln

Chromium-Probleme: 1076820, 1119900

Lighthouse 8.4 im Lighthouse-Steuerfeld

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

Weitere Informationen finden Sie unter Neu in Lighthouse 8.4.

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

Chromium-Problem: 772558

Snippets im Quellenbereich sortieren

Die Snippets im Bereich Snippets im Bereich Quellen sind jetzt alphabetisch sortiert. Bisher wurden diese Daten nicht sortiert.

Mit der Snippet-Funktion können Sie Befehle schneller ausführen. Tipp in diesem Video

Snippets im Quellenbereich sortieren

Chromium-Problem: 1243976

Neue Links zu übersetzten Versionshinweisen und Meldung eines Übersetzungsfehlers

Über den Tab „Neue Funktionen“ können Sie die Versionshinweise zu den Entwicklertools jetzt in sechs weiteren Sprachen lesen: Russisch, Chinesisch, Spanisch, Japanisch, Portugiesisch und Koreanisch.

Seit Chrome 94 können Sie Ihre bevorzugte Sprache in den Entwicklertools festlegen. Wenn du Probleme mit den Übersetzungen findest, hilf uns, sie zu verbessern, indem du ein Übersetzungsproblem melden. Klicke dazu auf Weitere Optionen > Hilfe > Übersetzungsfehler melden.

Neue Links zu übersetzten Versionshinweisen und Meldung eines Übersetzungsfehlers

Chromium-Probleme: 1246245, 1245481

Verbesserte Benutzeroberfläche für das Befehlsmenü der Entwicklertools

Hatten Sie Schwierigkeiten, im Cmd-Menü nach einer Datei zu suchen? Es gibt gute Neuigkeiten: Die Benutzeroberfläche des Befehlsmenüs wurde optimiert.

Öffnen Sie das Befehlstaste-Menü und suchen Sie mit der Tastenkombination Strg + P unter Windows und Linux bzw. Befehlstaste + P unter macOS nach einer Datei.

Die Verbesserungen der Benutzeroberfläche des Befehlsmenüs werden laufend überarbeitet. Weitere Updates folgen!

Befehlsmenü

Chromium-Problem: 1201997

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   Mehr   > 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.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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