Neuerungen in den Entwicklertools (Chrome 65)

Kayce Basques

Zu den neuen Funktionen der Entwicklertools in Chrome 65 gehören:

Unten können Sie die folgenden Versionshinweise lesen oder sich die Videoversion dieser Versionshinweise ansehen.

Lokale Überschreibungen

Mit lokalen Überschreibungen kannst du Änderungen in den Entwicklertools vornehmen, die beim Seitenaufbau beibehalten werden. Bisher gingen alle in den Entwicklertools vorgenommenen Änderungen beim Aktualisieren der Seite verloren. Lokale Überschreibungen funktionieren für die meisten Dateitypen, mit einigen Ausnahmen. Siehe Einschränkungen.

Mit lokalen Überschreibungen eine CSS-Änderung beim Seitenaufbau beibehalten.

Abbildung 1. CSS-Änderung beim Seitenaufbau mit lokalen Überschreibungen beibehalten

So gehts:

  • Du gibst ein Verzeichnis an, in dem die Entwicklertools Änderungen speichern sollen.
  • 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, stellt Entwicklertools die lokale, geänderte Datei und nicht die Netzwerkressource bereit.

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

  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 den Entwicklertools werden keine Änderungen gespeichert, die in der DOM-Struktur des Steuerfelds Elemente vorgenommen wurden. Bearbeiten Sie HTML stattdessen im Bereich Quellen.
  • Wenn Sie CSS im Bereich Styles bearbeiten und die Quelle dieses CSS-Codes eine HTML-Datei ist, wird die Änderung nicht von den Entwicklertools gespeichert. Bearbeiten Sie die HTML-Datei stattdessen 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“

Auf dem neuen Tab Änderungen kannst du Änderungen nachverfolgen, die du lokal in den Entwicklertools vornimmst.

Tab „Änderungen“

Abbildung 3. Tab Änderungen

Neue Bedienungshilfen

Im neuen Bereich Bedienungshilfen können Sie die Eigenschaften der Bedienungshilfen eines Elements prüfen und das Kontrastverhältnis von Textelementen in der Farbauswahl überprüfen, um sicherzustellen, dass sie für Nutzer mit Beeinträchtigungen des Sehvermögens oder einer Farbblindheit barrierefrei zugänglich sind.

Bereich „Bedienungshilfen“

Im Bereich Bedienungshilfen des Bereichs Elemente können Sie die Eigenschaften der Barrierefreiheit des aktuell ausgewählten Elements prüfen.

Der Bereich „Bedienungshilfen“

Abbildung 4. Im Bereich Bedienungshilfen werden die ARIA-Attribute und berechneten Eigenschaften für das Element angezeigt, das aktuell im DOM-Baum des Steuerfelds Elemente ausgewählt ist, sowie seine Position in der Bedienungshilfenstruktur.

Sehen Sie sich unten den A11ycast von Rob Dodson zur Beschriftung an, um zu sehen, wie der Bereich Accessibility (Barrierefreiheit) in Aktion aussieht.

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 Sehbeeinträchtigungen 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, ist Ihre Website für alle Nutzer besser nutzbar. Mit anderen Worten: Wenn Ihr Text grau mit weißem Hintergrund ist, ist das für niemanden schwer zu lesen.

Das Kontrastverhältnis des hervorgehobenen H1-Elements untersuchen.

Abbildung 5. Kontrastverhältnis des markierten h1-Elements untersuchen

In Abbildung 5 bedeuten die beiden Häkchen neben 4.61, dass dieses Element das empfohlene Kontrastverhältnis (verbessertes empfohlenes Kontrastverhältnis) 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 Color Spectrum (Farbspektrum) stellt die Grenze zwischen Farben dar, die das empfohlene Kontrastverhältnis erfüllen, und solchen, die nicht dem empfohlenen Kontrast entsprechen. Da beispielsweise die graue Farbe in Abbildung 6 den Empfehlungen entspricht, bedeutet dies, dass alle Farben unter der weißen Linie auch den Empfehlungen entsprechen.

Der maximierte Bereich „Kontrastverhältnis“

Abbildung 6. Im erweiterten Bereich Kontrastverhältnis

Im Bereich Prüfungen wird die Barrierefreiheit automatisch geprüft. So wird sichergestellt, dass jedes Textelement auf einer Seite ein ausreichendes Kontrastverhältnis hat.

Unter Lighthouse in den Chrome-Entwicklertools ausführen oder A11ycast unten erfahren Sie, wie Sie die Barrierefreiheit im Bereich Audits testen.

Neue Prüfungen

Chrome 65 bietet eine völlig neue Kategorie von SEO-Prüfungen und viele neue Leistungsprüfungen.

Neue SEO-Prüfungen

Wenn du dafür sorgst, dass deine Seiten die Prüfungen in der neuen Kategorie SEO bestehen, kannst du dein Suchmaschinen-Ranking verbessern.

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

Abbildung 7. Die neue Prüfungskategorie SEO

Neue Leistungsprüfungen

Chrome 65 bietet außerdem viele neue Leistungsprüfungen:

  • Lange Startzeit von JavaScript ist lang
  • Verwendet eine ineffiziente Cache-Richtlinie bei statischen Assets
  • Vermeidet Seitenweiterleitungen
  • Dokument verwendet Plug-ins
  • CSS reduzieren
  • JavaScript minimieren

Auf Leistung kommt es an! Nachdem Mynet die Seitenladegeschwindigkeit um das Vierfache verbessert hatte, verbrachten Nutzer 43% mehr Zeit auf der Website und sahen sich 34% mehr Seiten an. Die Absprungrate sank 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, probieren Sie den Bereich Audits aus. Wenn Sie eine URL eingeben, erhalten Sie einen detaillierten Bericht mit vielen verschiedenen Verbesserungsmöglichkeiten. JETZT LOSLEGEN

Weitere Updates

Zuverlässiges Code-Stepping mit Workern und asynchronem Code

In Chrome 65 wird die Schaltfläche Step Into Schritt für Schritt aktualisiert, wenn Code eingegeben wird, der Nachrichten zwischen Threads weitergibt, sowie asynchronen Code. Wenn Sie das vorherige Schrittverhalten verwenden möchten, können Sie stattdessen die neue Schaltfläche Schritt Step verwenden.

Code einteilen, der Nachrichten zwischen Threads weiterleitet

Wenn Sie in Code eingreifen, der Nachrichten zwischen Threads weitergibt, zeigt Ihnen die Entwicklertools jetzt, was in den einzelnen Threads passiert.

Die Anwendung in Abbildung 8 übergibt beispielsweise eine Nachricht zwischen dem Hauptthread und dem Worker-Thread. Nach dem Aufrufen des postMessage()-Aufrufs im Hauptthread pausiert die Entwicklertools im onmessage-Handler im Worker-Thread. Der onmessage-Handler selbst sendet eine Nachricht an den Hauptthread zurück. Wenn Sie diesen Aufruf aufrufen, werden die Entwicklertools im Hauptthread pausiert.

Code zur Nachrichtenweitergabe in Chrome 65 verwenden

Abbildung 8. Code zur Nachrichtenweitergabe in Chrome 65 verwenden

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 einen Code zur Nachrichtenweitergabe verwenden

Abbildung 9. Code zur Nachrichtenweitergabe in Chrome 63 verwenden

Asynchronen Code verwenden

Wenn Sie in den asynchronen Code wechseln, gehen die Entwicklertools jetzt davon aus, dass Sie den letztendlich ausgeführten asynchronen Code anhalten.

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

Asynchronen Code in Chrome 65 verwenden

Abbildung 10. Asynchronen Code in Chrome 65 verwenden

Bei diesem Code-Schritt in Chrome 63 wurden die Entwicklertools während der chronologischen Ausführung im Code pausiert, wie in Abbildung 11 zu sehen ist.

Asynchronen Code in Chrome 63 verwenden

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. Weitere Informationen zum Bereich Leistung finden Sie unter Erste Schritte mit der Analyse der Laufzeitleistung.

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

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

Bonus: Entwicklertools-Aktionen mit Puppeteer 1.0 automatisieren

Version 1.0 von Puppeteer, einem Browser-Automatisierungstool, das vom Chrome DevTools-Team verwaltet wird, ist jetzt verfügbar. Sie können Puppeteer verwenden, um viele Aufgaben zu automatisieren, die zuvor nur über die Entwicklertools 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();
})();

Es verfügt auch über APIs für viele allgemein nützliche Automatisierungsaufgaben wie 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 unter 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

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Ü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 es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59