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. Er ändert sich dann in einen horizontalen Cursor. Ziehen Sie den Schieberegler 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

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

Eigene Properties sind fett formatiert und werden zuerst sortiert.

Abgesehen von diesen Änderungen sind die Eigenschaften im Bereich Properties jetzt auch flach, um die Fehlerbehebung bei DOM-Properties zu verbessern, insbesondere bei Webkomponenten.

Eigenschaften zusammenführen

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

Weitere Informationen zu den Updates finden Sie unter Das ist neu 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.

Mit der Snippet-Funktion können Sie Befehle schneller ausfü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

Auf dem Tab „Neuigkeiten“ können Sie sich die Release Notes der DevTools jetzt auch in Russisch, Chinesisch, Spanisch, Japanisch, Portugiesisch und Koreanisch ansehen.

Seit Chrome 94 können Sie in den Entwicklertools Ihre bevorzugte Sprache festlegen. Wenn Sie Probleme mit den Übersetzungen gefunden haben, helfen Sie uns, sie zu verbessern, indem Sie ein Übersetzungsproblem melden. Klicken Sie dazu auf Weitere Optionen > Hilfe > Fehler bei Übersetzung 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

War es schwierig, im Befehlsmenü nach einer Datei zu suchen? Es gibt 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. 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 Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in DevTools

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