Neuerungen in den Entwicklertools (Chrome 95)

Jecelyn Yeen

Neue Tools zum Erstellen von CSS-Längen

In den Entwicklertools gibt es jetzt eine einfachere und dennoch flexible Möglichkeit, Längen in CSS zu aktualisieren.

Suchen Sie im Bereich Stile nach einer CSS-Property mit Längenangabe (z.B. height, padding).

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

Bewegen Sie den Mauszeiger auf den Einheitenwert. Er ändert sich dann in einen horizontalen Cursor. Ziehen Sie den Finger 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 Einheitenwert weiterhin als Text bearbeiten. Klicken Sie dazu einfach auf den Wert und beginnen Sie mit der Bearbeitung.

Chromium-Probleme: 1126178, 1172993

Probleme auf dem Tab „Probleme“ ausblenden

Sie können jetzt bestimmte Probleme auf dem Tab „Probleme“ ausblenden, um sich nur auf die Probleme zu konzentrieren, die für Sie wichtig sind.

Bewegen Sie den Mauszeiger auf dem Tab „Probleme“ auf das Problem, das Sie ausblenden möchten. Klicken Sie auf das Dreipunkt-Menü     > Probleme wie dieses ausblenden.

Alle ausgeblendeten Probleme werden im Bereich Ausgeblendete Probleme hinzugefügt. Maximieren Sie den Bereich. Sie können alle ausgeblendeten Probleme oder ein ausgewähltes Problem einblenden.

Chromium-Problem: 1175722

Verbesserte Darstellung von Attributen

DevTools verbessern die Darstellung von Attributen durch:

• Eigene Properties sollten in der Konsole, im Bereich Quellen und im Bereich Properties immer fett formatiert und zuerst sortiert werden.
• Die Eigenschaftenanzeige im Bereich Eigenschaften wird vereinfacht.

Im folgenden Snippet wird beispielsweise ein URL-Objekt link mit zwei eigenen Attributen erstellt: user und access. Außerdem wird der Wert eines geerbten Attributs 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 dargestellt und zuerst sortiert. Durch diese Änderungen lassen sich benutzerdefinierte Eigenschaften leichter erkennen, insbesondere bei Web-APIs (z.B. URL) mit vielen geerbten Eigenschaften.

Abgesehen von diesen Änderungen werden die Eigenschaften im Bereich Properties jetzt auch zusammengefasst, um die Fehlerbehebung bei DOM-Eigenschaften zu erleichtern, insbesondere bei Webkomponenten.

Chromium-Probleme: 1076820, 1119900

Lighthouse 8.4 im Lighthouse-Bereich

Im Bereich Lighthouse wird jetzt Lighthouse 8.4 ausgeführt. Lighthouse erkennt jetzt, ob das Element Largest Contentful Paint (LCP) ein lazy-loaded Image war, und empfiehlt, das Attribut loading daraus zu entfernen.

Weitere Informationen zu den Updates finden Sie unter Neu in Lighthouse 8.4.

Chromium-Problem: 772558

Snippets im Quellenbereich sortieren

Die Snippets im Bereich Snippets unter dem Bereich Quellen sind jetzt alphabetisch sortiert. Bisher wurden sie nicht sortiert.

Mit der Funktion „Snippets“ können Sie Befehle schneller ausführen. Video mit Tipps

Chromium-Problem: 1243976

Neue Links zu übersetzten Versionshinweisen und zum Melden von Übersetzungsfehlern

Über den Tab „Neuigkeiten“ können Sie jetzt auf die Versionshinweise zu DevTools in sechs weiteren Sprachen zugreifen: Russisch, Chinesisch, Spanisch, Japanisch, Portugiesisch und Koreanisch.

Seit Chrome 94 können Sie Ihre bevorzugte Sprache in den Entwicklertools festlegen. Wenn Sie Probleme mit den Übersetzungen gefunden haben, helfen Sie uns, sie zu verbessern, indem Sie über Weitere Optionen > Hilfe > Übersetzungsfehler melden ein Übersetzungsproblem melden.

Chromium-Probleme: 1246245, 1245481

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

Fiel es Ihnen schwer, im Befehlsmenü nach einer Datei zu suchen? Gute Neuigkeiten: Die Benutzeroberfläche des Befehlsmenüs wurde verbessert.

Öffnen Sie das Befehlsmenü, um mit der Tastenkombination Strg + P unter Windows und Linux oder Befehlstaste + P unter MacOS nach einer Datei zu suchen.

Die Verbesserungen der Benutzeroberfläche des Befehlsmenüs sind noch nicht abgeschlossen. Wir halten Sie auf dem Laufenden.

Chromium-Problem: 1201997

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.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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