Neuerungen in den Entwicklertools (Chrome 95)

Jecelyn Yeen

Neue Tools zum Erstellen von Preisvergleichsportalen

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

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

Bewegen Sie den Mauszeiger auf den Anzeigenblocktyp. Sie sehen, dass er unterstrichen ist. Klicken Sie darauf, um im Drop-down-Menü einen Maßeinheitstyp auszuwählen.

Bewegen Sie den Mauszeiger auf den Wert der Einheit. Der Mauszeiger ändert sich dann in einen horizontalen Cursor. 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 Maßeinheitswert 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

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

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. Sie können alle ausgeblendeten Probleme oder ein ausgewähltes Problem einblenden.

Bereich „Ausgeblendete Probleme“

Chromium-Problem: 1175722

Die Darstellung von Unterkünften wurde verbessert.

Mit DevTools können Sie die Darstellung von Properties verbessern:

  • Fett formatieren und eigene Properties in der Console, im Bereich Quellen und im Bereich Properties immer zuerst sortieren.
  • Minimieren Sie die Eigenschaftenanzeige im Bereich Eigenschaften.

Im folgenden Snippet wird beispielsweise ein URL-Objekt link mit zwei eigenen Attributen user und access erstellt und der Wert eines übernommenen 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}`;

Versuche, 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 werden 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 Contentful Paint) ein Lazy-Load-Bild war, und empfiehlt, das loading-Attribut daraus zu entfernen.

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

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

Chromium-Problem: 772558

Snippets im Bereich „Quellen“ sortieren

Die Snippets im Bereich Snippets unter Quellen sind jetzt alphabetisch sortiert. Bisher war das nicht der Fall.

Verwende die Snippet-Funktion, um Befehle schneller auszuführen. In diesem Video zeigen wir dir, wie es geht.

Snippets im Bereich „Quellen“ sortieren

Chromium-Problem: 1243976

Neue Links zu den übersetzen Versionshinweisen und Fehler bei der Übersetzung melden

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

Seit Chrome 94 können Sie in den Entwicklertools Ihre bevorzugte Sprache festlegen. Wenn Sie Probleme mit den Übersetzungen festgestellt haben, können Sie uns helfen, diese zu verbessern. Klicken Sie dazu auf Weitere Optionen > Hilfe > Übersetzungsfehler melden, um ein Übersetzungsproblem zu melden.

Neue Links zu den übersetzen Versionshinweisen und Fehler bei der Übersetzung melden

Chromium-Probleme: 1246245, 1245481

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

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

Ü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 sind noch nicht abgeschlossen. Weitere Updates folgen bald!

Befehlsmenü

Chromium-Problem: 1201997

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.

Neu in DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.