Neuerungen in den Entwicklertools (Chrome 65)

Kayce Basques

Zu den neuen Funktionen in den DevTools in Chrome 65 gehören:

Lies weiter oder sieh dir die Videoversion dieser Versionshinweise unten an.

Lokale Überschreibungen

Mit lokalen Überschreibungen können Sie Änderungen in den Entwicklertools vornehmen und diese Änderungen bei jedem Seitenaufbau beibehalten. Bisher gingen alle Änderungen, die Sie in den Entwicklertools vorgenommen haben, verloren, wenn Sie die Seite neu geladen haben. Lokale Überschreibungen funktionieren mit einigen Ausnahmen für die meisten Dateitypen. Siehe Einschränkungen.

Mit lokalen Überschreibungen können Sie eine CSS-Änderung beibehalten, die über mehrere Seitenaufrufe hinweg gilt.

Abbildung 1. CSS-Änderungen mit lokalen Überschreibungen beibehalten

So gehts:

  • Sie geben ein Verzeichnis an, in dem DevTools Änderungen speichern soll.
  • Wenn Sie Änderungen in den Entwicklertools vornehmen, speichert die Entwicklertools eine Kopie der geänderten Datei in Ihrem Verzeichnis.
  • Wenn Sie die Seite neu laden, wird in den Entwicklertools die lokale, geänderte Datei und nicht die Netzwerkressource bereitgestellt.

So richten Sie lokale Überschreibungen ein:

  1. Öffnen Sie den Bereich Quellen.

  2. Öffnen Sie den Tab Überschreibungen.

    Tab „Überschreibungen“

    Abbildung 2. Tab Überschreibungen

  3. Klicken Sie auf Überschreibungen für die Einrichtung.

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

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

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

Beschränkungen

  • In DevTools werden keine Änderungen gespeichert, die im Bereich Elemente im DOM-Baum vorgenommen wurden. Bearbeiten Sie den HTML-Code stattdessen im Bereich Quellen.
  • Wenn Sie CSS im Bereich Stile bearbeiten und die Quelle dieses CSS eine HTML-Datei ist, werden die Änderungen in den DevTools nicht gespeichert. Bearbeiten Sie stattdessen die HTML-Datei im Bereich Quellen.
  • Arbeitsbereiche Die Entwicklertools ordnet Netzwerkressourcen automatisch einem lokalen Repository zu. Jede Änderung, die Sie in den Entwicklertools vornehmen, wird auch in Ihrem lokalen Repository gespeichert.

Tab „Änderungen“

Über den neuen Tab Änderungen können Sie Änderungen nachverfolgen, die Sie lokal in den DevTools vornehmen.

Tab „Änderungen“

Abbildung 3. Tab Änderungen

Neue Bedienungshilfen

Im neuen Bereich Barrierefreiheit können Sie die Barrierefreiheitseigenschaften eines Elements prüfen. Mit der Farbvorlage können Sie das Kontrastverhältnis von Textelementen prüfen, um sicherzustellen, dass sie für Nutzer mit Sehschwäche oder Farbsinnschwäche barrierefrei sind.

Bereich „Bedienungshilfen“

Im Bereich Elemente finden Sie den Bereich Bedienungshilfen, in dem Sie die Bedienungshilfeneigenschaften des aktuell ausgewählten Elements prüfen können.

Bereich „Bedienungshilfen“

Abbildung 4. Im Bereich Barrierefreiheit werden die ARIA-Attribute und berechneten Eigenschaften des Elements angezeigt, das im Bereich Elemente im DOM-Baum aktuell ausgewählt ist, sowie seine Position im Baum der Barrierefreiheit.

Im A11ycast zu Beschriftungen von Rob Dodson unten sehen Sie den Bereich Barrierefreiheit in Aktion.

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 Farbsinnstörungen 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. Mit anderen Worten: Wenn Ihr Text grau auf weißem Hintergrund ist, ist er für alle schwer zu lesen.

Prüfen des Kontrastverhältnisses des hervorgehobenen H1-Elements

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 erweiterte empfohlene Kontrastverhältnis (AAA) erfüllt. Wenn nur ein Häkchen vorhanden wäre, entspricht es dem empfohlenen Mindestkontrastverhältnis (AA).

Klicken Sie auf Mehr anzeigen Mehr anzeigen, um den Bereich 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 dies nicht tun. Da die graue Farbe in Abbildung 6 den Empfehlungen entspricht, entsprechen auch alle Farben unter der weißen Linie den Empfehlungen.

Maximierter Bereich „Kontrastverhältnis“

Abbildung 6. Im erweiterten Bereich Kontrastverhältnis

Im Bereich Prüfungen gibt es eine automatisierte Prüfung der Barrierefreiheit, mit der sichergestellt wird, dass alle Textelemente auf einer Seite ein ausreichendes Kontrastverhältnis haben.

Weitere Informationen dazu, wie Sie die Barrierefreiheit mit dem Bereich Audits (Audits) testen, finden Sie unter Lighthouse in den Chrome-Entwicklertools ausführen oder im A11ycast unten.

Neue Prüfungen

Chrome 65 enthält eine ganz neue Kategorie von SEO-Analysen und viele neue Leistungsanalysen.

Neue SEO-Analysen

Wenn Ihre Seiten alle Prüfungen in der neuen Kategorie SEO bestehen, können Sie Ihr Ranking in Suchmaschinen verbessern.

Die neue SEO-Kategorie für Prüfungen.

Abbildung 7. Die neue Prüfungskategorie SEO

Neue Leistungsprüfungen

Chrome 65 enthält außerdem viele neue Leistungsprüfungen:

  • Lange Startzeit von JavaScript ist lang
  • Ineffiziente Cache-Richtlinie für statische Assets verwendet
  • Seitenweiterleitungen werden vermieden
  • Dokument verwendet Plug-ins
  • CSS reduzieren
  • JavaScript reduzieren

Auf Leistung kommt es an! Nachdem Mynet die Seitenladezeit um das Vierfache verbessert hatte, verbrachten die Nutzer 43% mehr Zeit auf der Website, sahen sich 34% mehr Seiten an, die Absprungraten sanken um 24 % und der Umsatz pro Seitenaufruf eines Artikels stieg um 25 %. Weitere Informationen

Tipp: Wenn Sie die Ladeleistung Ihrer Seiten verbessern möchten, aber nicht wissen, wo Sie anfangen sollen, sehen Sie sich den Bereich Analysen an. Sie geben eine URL an und erhalten einen detaillierten Bericht zu vielen verschiedenen Möglichkeiten, wie Sie diese Seite verbessern können. JETZT LOSLEGEN

Weitere Updates

Zuverlässiges Code-Schritt-für-Schritt-Debugging mit Workern und asynchronem Code

In Chrome 65 wurde die Schaltfläche Step Into (Einen Schritt hinein) Einsteigen aktualisiert, wenn Sie in Code einsteigen, der Nachrichten zwischen Threads und asynchronen Code übergibt. Wenn Sie das vorherige Schrittverhalten verwenden möchten, können Sie stattdessen die neue Schaltfläche Schritt Schritt verwenden.

Code, der Nachrichten zwischen Threads übergibt, einblenden

Wenn Sie Code durchgehen, in dem Nachrichten zwischen Threads übergeben werden, sehen Sie in DevTools jetzt, was in jedem Thread passiert.

In Abbildung 8 übergibt die App beispielsweise eine Nachricht zwischen dem Haupt- und dem Worker-Thread. Nachdem Sie im Hauptthread in den postMessage()-Aufruf eingestiegen sind, wird DevTools im onmessage-Handler im Worker-Thread angehalten. Der onmessage-Handler selbst sendet eine Nachricht an den Hauptthread zurück. Wenn Sie diesen Aufruf aufrufen, werden die Entwicklertools im Hauptthread pausiert.

In Chrome 65 können Sie den Code für die Nachrichtenübergabe aufrufen.

Abbildung 8. In Chrome 65 in Code für die Nachrichtenübertragung einsteigen

Wenn Sie diesen Code in früheren Chrome-Versionen verwendet haben, wurde in Chrome nur die Hauptthreadseite des Codes angezeigt, wie in Abbildung 9 zu sehen ist.

In Chrome 63 können Sie Code für die Nachrichtenübertragung einblenden.

Abbildung 9. Code zur Nachrichtenweitergabe in Chrome 63 verwenden

In asynchronen Code einsteigen

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

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

In Chrome 65 können Sie in asynchronen Code einsteigen.

Abbildung 10. In Chrome 65 in asynchronen Code einsteigen

Wenn Sie in Chrome 63 in einen solchen Code eingesprungen sind, wurde der Code in den Entwicklertools an der Stelle pausiert, an der er chronologisch ausgeführt wurde, wie in Abbildung 11 zu sehen ist.

In Chrome 63 kann in asynchronen Code eingestiegen werden.

Abbildung 11. Asynchronen Code in Chrome 63 verwenden

Mehrere Aufzeichnungen im Bereich „Leistung“

Im Bereich Leistung kannst du jetzt vorübergehend bis zu fünf Aufnahmen speichern. Die Aufzeichnungen werden gelöscht, wenn Sie das Entwicklertools-Fenster schließen. Im Artikel Erste Schritte mit der Analyse der Laufzeitleistung erfahren Sie mehr über den Bereich Leistung.

Im Bereich „Leistung“ zwischen mehreren Aufzeichnungen auswählen.

Abbildung 12. Im Bereich Leistung zwischen mehreren Aufzeichnungen auswählen

Bonus: DevTools-Aktionen mit Puppeteer 1.0 automatisieren

Version 1.0 von Puppeteer, einem Browser-Automatisierungstool, das vom Chrome DevTools-Team gepflegt wird, ist jetzt verfügbar. Mit Puppeteer können Sie viele Aufgaben automatisieren, die zuvor nur über 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 verfügt es über APIs für viele allgemein nützliche Automatisierungsaufgaben, z. B. für das 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 in der Kurzanleitung.

Sie können Puppeteer auch verwenden, um Entwicklertools während des Surfens bereitzustellen, ohne die Entwicklertools explizit zu öffnen. Ein Beispiel findest du unter Entwicklertools ohne Öffnen der Entwicklertools verwenden.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer dies tun.

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.