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 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 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 den Schieberegler horizontal, um den Wert zu erhöhen oder zu verringern. Wenn Sie den Wert um 10 verändern 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   > Ähnliche 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.

Chromium-Problem: 1175722

Die Darstellung von Unterkünften wurde verbessert.

Die Entwicklertools verbessern die Anzeige von Properties durch:

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

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}`;

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.

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

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.

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.

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 gefunden haben, helfen Sie uns, sie zu verbessern, indem Sie ein Übersetzungsproblem melden. Klicken Sie dazu auf Weitere Optionen > Hilfe > Fehler bei Übersetzung melden.

Chromium-Probleme: 1246245, 1245481

Verbesserte Benutzeroberfläche des Befehlsmenüs 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.

Ö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 werden weiterhin vorgenommen. Wir halten Sie auf dem Laufenden.

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.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools