Neuerungen in den Entwicklertools (Chrome 65)

Kayce Basques

Zu den neuen Funktionen, die in Chrome 65 in den Entwicklertools eingeführt werden, gehören:

• Lokale Überschreibungen
• Neue Tools für die Barrierefreiheit
• Tab Änderungen
• Neue SEO- und Leistungs-Audits
• Mehrere Aufzeichnungen im Bereich Leistung
• Zuverlässiges Durchlaufen von Code mit Workern und asynchronem Code

Lesen Sie weiter oder sehen Sie sich unten die Videofassung dieser Versionshinweise an.

Lokale Überschreibungen

Mit lokalen Überschreibungen können Sie Änderungen in den Entwicklertools vornehmen und diese Änderungen bei Seitenaufrufen beibehalten. Bisher gingen alle Änderungen, die Sie in den Entwicklertools vorgenommen haben, beim Neuladen der Seite verloren. Lokale Überschreibungen funktionieren für die meisten Dateitypen, mit einigen Ausnahmen. Weitere Informationen

Abbildung 1. CSS-Änderungen mit Local Overrides seitenübergreifend beibehalten

Funktionsweise:

• Sie geben ein Verzeichnis an, in dem die Entwicklertools Änderungen speichern sollen.
• Wenn Sie Änderungen in den Entwicklertools vornehmen, wird eine Kopie der geänderten Datei in Ihrem Verzeichnis gespeichert.
• Wenn Sie die Seite neu laden, stellen die Entwicklertools die lokale, geänderte Datei anstelle der Netzwerkressource bereit.

So richten Sie lokale Überschreibungen ein:

1. Öffnen Sie den Bereich Quellen.

2. Öffnen Sie den Tab Overrides (Überschreibungen).

   

   Abbildung 2. Der Tab Überschreibungen

3. Klicken Sie auf Einrichtungsüberschreibungen.

4. Wählen Sie das Verzeichnis aus, in dem Sie die Änderungen speichern möchten.

5. Klicken Sie oben im Darstellungsbereich auf Zulassen, um den Entwicklertools Lese- und Schreibzugriff auf das Verzeichnis zu gewähren.

6. Nehmen Sie die gewünschten Änderungen vor.

Beschränkungen

• In DevTools werden Änderungen, die im DOM-Baum des Bereichs Elemente vorgenommen werden, nicht gespeichert. Bearbeiten Sie den HTML-Code stattdessen im Bereich Quellen.
• Wenn Sie CSS im Bereich Styles bearbeiten und die Quelle dieses CSS eine HTML-Datei ist, werden die Änderungen in den DevTools nicht gespeichert. Bearbeiten Sie die HTML-Datei stattdessen im Bereich Quellen.

Zugehörige Funktionen

• Arbeitsbereiche: DevTools ordnet Netzwerkressourcen automatisch einem lokalen Repository zu. Jede Änderung, die Sie in DevTools vornehmen, wird auch in Ihrem lokalen Repository gespeichert.

Tab „Änderungen“

Über den neuen Tab Changes (Änderungen) können Sie Änderungen verfolgen, die Sie lokal in den Entwicklertools vornehmen.

Abbildung 3. Tab Änderungen

Neue Bedienungshilfen

Im neuen Bereich Bedienungshilfe können Sie die Bedienungshilfe-Eigenschaften eines Elements prüfen. Außerdem können Sie im Color Picker das Kontrastverhältnis von Textelementen prüfen, um sicherzustellen, dass sie für Nutzer mit eingeschränktem Sehvermögen oder Farbenfehlsichtigkeit zugänglich sind.

Bereich „Bedienungshilfen“

Im Bereich Bedienungshilfen des Bereichs Elemente können Sie die Eigenschaften für Bedienungshilfen des aktuell ausgewählten Elements untersuchen.

Abbildung 4. Im Bereich Barrierefreiheit werden die ARIA-Attribute und berechneten Eigenschaften für das Element angezeigt, das derzeit im DOM-Baum im Bereich Elemente ausgewählt ist, sowie seine Position im Barrierefreiheitsbaum.

Im A11ycast von Rob Dodson zum Thema „Labeling“ sehen Sie, wie der Bereich Bedienungshilfen funktioniert.

Kontrastverhältnis in der Farbauswahl

In der Farbauswahl wird jetzt das Kontrastverhältnis von Textelementen angezeigt. Wenn Sie das Kontrastverhältnis von Textelementen erhöhen, wird Ihre Website für Nutzer mit eingeschränktem Sehvermögen oder Farbblindheit barrierefreier. Weitere Informationen dazu, wie sich das Kontrastverhältnis auf die Barrierefreiheit auswirkt, finden Sie unter Farbe und Kontrast.

Wenn Sie den Farbkontrast Ihrer Textelemente verbessern, wird Ihre Website für alle Nutzer nutzerfreundlicher. Wenn Ihr Text beispielsweise grau auf weißem Hintergrund ist, ist er für niemanden gut lesbar.

Abbildung 5. Kontrastverhältnis des hervorgehobenen h1-Elements prüfen

In Abbildung 5 bedeuten die beiden Häkchen neben 4,61, dass dieses Element das empfohlene erweiterte Kontrastverhältnis (AAA) erfüllt. Wenn nur ein Häkchen vorhanden ist, bedeutet das, dass das empfohlene Mindestkontrastverhältnis (AA) eingehalten wurde.

Klicken Sie auf Mehr anzeigen , um den Abschnitt Kontrastverhältnis zu maximieren. Die weiße Linie im Feld Farbspektrum stellt die Grenze zwischen Farben dar, die das empfohlene Kontrastverhältnis erfüllen, und solchen, die es nicht tun. Da die graue Farbe in Abbildung 6 beispielsweise den Empfehlungen entspricht, bedeutet das, dass alle Farben unterhalb der weißen Linie ebenfalls den Empfehlungen entsprechen.

Abbildung 6. Der maximierte Abschnitt Kontrastverhältnis

Zugehörige Funktionen

Im Bereich Audits gibt es einen automatischen Barrierefreiheitsaudit, mit dem sichergestellt wird, dass jedes Textelement auf einer Seite ein ausreichendes Kontrastverhältnis aufweist.

Im Artikel Lighthouse in den Chrome-Entwicklertools ausführen und im A11ycast unten erfahren Sie, wie Sie den Bereich Audits verwenden, um die Barrierefreiheit zu testen.

Neue Audits

Chrome 65 enthält eine ganz neue Kategorie von SEO-Prüfungen und viele neue Leistungsprüfungen.

Neue SEO-Prüfungen

Wenn Ihre Seiten alle Prüfungen in der neuen Kategorie SEO bestehen, kann sich das auf Ihr Suchmaschinenranking auswirken.

Abbildung 7. Die neue Kategorie SEO für Prüfungen

Neue Leistungsprüfungen

Chrome 65 enthält auch viele neue Leistungsprüfungen:

• Die JavaScript-Bootzeit ist hoch.
• Ineffiziente Cache-Richtlinie für statische Assets
• Seitenweiterleitungen werden vermieden
• Dokument verwendet Plug-ins
• CSS reduzieren
• JavaScript reduzieren

Die Leistung zählt! Nachdem Mynet die Seitenladezeit um das Vierfache verbessert hatte, verbrachten die Nutzer 43% mehr Zeit auf der Website, riefen 34% mehr Seiten auf, die Absprungraten sanken um 24 % und der Umsatz stieg um 25% pro Seitenaufruf. Weitere Informationen

Tipp: Wenn Sie die Ladeleistung Ihrer Seiten verbessern möchten, aber nicht wissen, wo Sie anfangen sollen, können Sie das Audits-Panel verwenden. Sie geben eine URL ein und erhalten einen detaillierten Bericht mit vielen verschiedenen Möglichkeiten, die Seite zu optimieren. JETZT LOSLEGEN

Weitere Updates

• Neue, manuelle Audits zur Barrierefreiheit
• Aktualisierungen des WebP-Audits, um andere Bildformate der nächsten Generation besser zu berücksichtigen
• Überarbeitung des Barrierefreiheitsindex
• Wenn eine Überprüfung der Barrierefreiheit für eine Seite nicht zutrifft, wird sie nicht mehr in die Bewertung der Barrierefreiheit einbezogen.
• Leistung ist jetzt der oberste Abschnitt in Berichten

Zuverlässiges Durchlaufen von Code mit Workern und asynchronem Code

In Chrome 65 wurde die Schaltfläche Step Into beim Einzelschrittdurchlauf von Code, der Nachrichten zwischen Threads übergibt, und asynchronem Code aktualisiert. Wenn Sie das bisherige Verhalten beibehalten möchten, können Sie stattdessen die neue Schaltfläche Step verwenden.

Schrittweises Durchlaufen von Code, der Nachrichten zwischen Threads übergibt

Wenn Sie Code durchlaufen, der Nachrichten zwischen Threads übergibt, sehen Sie in den Entwicklertools jetzt, was in den einzelnen Threads passiert.

In der App in Abbildung 8 wird beispielsweise eine Nachricht zwischen dem Haupt- und dem Worker-Thread übergeben. Nachdem Sie den postMessage()-Aufruf im Hauptthread durchlaufen haben, wird DevTools im onmessage-Handler im Worker-Thread angehalten. Der onmessage-Handler selbst sendet eine Nachricht zurück an den Hauptthread. Wenn Sie diesen Aufruf durchlaufen, wird DevTools wieder im Hauptthread pausiert.

Abbildung 8. Schrittweises Durchgehen von Code für die Nachrichtenübergabe in Chrome 65

Wenn Sie in früheren Chrome-Versionen in solchen Code gegangen sind, wurde nur die Main-Thread-Seite des Codes angezeigt, wie in Abbildung 9 zu sehen ist.

Abbildung 9. Schrittweise Ausführung von Code für die Nachrichtenübergabe in Chrome 63

Asynchronen Code durchlaufen

Wenn Sie in asynchronen Code eintreten, geht DevTools jetzt davon aus, dass Sie im asynchronen Code pausieren möchten, der schließlich ausgeführt wird.

In Abbildung 10 führt DevTools beispielsweise nach dem Aufrufen von setTimeout() den gesamten Code bis zu diesem Punkt im Hintergrund aus und pausiert dann in der Funktion, die an setTimeout() übergeben wird.

Abbildung 10. Asynchronen Code in Chrome 65 durchlaufen

Wenn Sie in Chrome 63 in solchen Code gegangen sind, haben die Entwicklertools den Code chronologisch pausiert, wie in Abbildung 11 zu sehen ist.

Abbildung 11. Asynchronen Code in Chrome 63 durchlaufen

Mehrere Aufzeichnungen im Bereich „Leistung“

Im Bereich Leistung können Sie jetzt bis zu fünf Aufnahmen vorübergehend speichern. Die Aufzeichnungen werden gelöscht, wenn Sie das Entwicklertools-Fenster schließen. Erste Schritte bei der Analyse der Laufzeitleistung

Abbildung 12. Auswahl zwischen mehreren Aufzeichnungen im Bereich Leistung

Bonus: Entwicklertools-Aktionen mit Puppeteer 1.0 automatisieren

Version 1.0 von Puppeteer, einem vom Chrome DevTools-Team verwalteten Browserautomatisierungstool, ist jetzt verfügbar. Mit Puppeteer können Sie viele Aufgaben automatisieren, die zuvor nur über die DevTools verfügbar waren, z. B. das Erstellen von Screenshots:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Außerdem bietet sie APIs für viele allgemein nützliche Automatisierungsaufgaben, z. B. zum Generieren von PDFs:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Weitere Informationen finden Sie unter Schnellstart.

Sie können Puppeteer auch verwenden, um Entwicklertools-Funktionen beim Browsen verfügbar zu machen, ohne die Entwicklertools explizit zu öffnen. Ein Beispiel finden Sie unter DevTools-Funktionen verwenden, ohne die Entwicklertools zu öffnen.

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.