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. Weitere Informationen finden Sie unter Einschränkungen.

Mit lokalen Überschreibungen können Sie eine CSS-Änderung beibehalten, wenn die Seite neu geladen wird.

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, wird in den Entwicklertools eine Kopie der geänderten Datei in Ihrem Verzeichnis gespeichert.
  • 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 In den DevTools werden Netzwerkressourcen automatisch einem lokalen Repository zugeordnet. Jede Änderung, die Sie in DevTools 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 ist, entspricht das 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. Maximierter Bereich Kontrastverhältnis

Im Bereich Analysen 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 Audits

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 Kategorie SEO

Neue Leistungsanalysen

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

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

Leistung ist wichtig! 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-Stepping mit Workern und asynchronem Code

In Chrome 65 wurde die Schaltfläche Step Into (Einen Schritt hinein) Einsteigen aktualisiert, wenn Code, der Nachrichten zwischen Threads übergibt, und asynchroner Code untersucht wird. Wenn Sie das vorherige Schritt-für-Schritt-Verhalten 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 in den postMessage()-Aufruf im Hauptthread 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 DevTools im Hauptthread angehalten.

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

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

Wenn Sie in früheren Chrome-Versionen einen solchen Code aufgerufen haben, wurde Ihnen nur der Code im Hauptthread angezeigt, wie in Abbildung 9 zu sehen.

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

Abbildung 9. In Chrome 63 in Code für die Nachrichtenübergabe einsteigen

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 pausiert, während er chronologisch ausgeführt wurde, wie in Abbildung 11 zu sehen ist.

In Chrome 63 kann in asynchronen Code eingestiegen werden.

Abbildung 11. In Chrome 63 in asynchronen Code einsteigen

Mehrere Aufnahmen 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 DevTools-Fenster schließen. Im Artikel Erste Schritte mit der Analyse der Laufzeitleistung erfahren Sie mehr über den Bereich Leistung.

Im Bereich „Leistung“ können Sie zwischen mehreren Aufnahmen wählen.

Abbildung 12. Im Bereich Leistung zwischen mehreren Aufnahmen wä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 gibt es 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 in der Kurzanleitung.

Sie können Puppeteer auch verwenden, um Entwicklertools-Funktionen beim Surfen zu verwenden, ohne die Entwicklertools explizit zu öffnen. Ein Beispiel finden Sie unter Entwicklertools-Funktionen verwenden, ohne die Entwicklertools zu öffnen.

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.