Neuerungen in den Entwicklertools (Chrome 65)

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

Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Versionshinweise an (siehe unten).

Lokale Überschreibungen

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

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

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

So gehts:

  • Du gibst ein Verzeichnis an, in dem die Entwicklertools Änderungen speichern sollen.
  • Wenn du Änderungen in den Entwicklertools vornimmst, wird eine Kopie der geänderten Datei in deinem Verzeichnis gespeichert.
  • Wenn Sie die Seite aktualisieren, stellen die 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.

    Der Tab „Überschreibungen“

    Abbildung 2. Der Tab Überschreibungen

  3. Klicken Sie auf Überschreibungen einrichten.

  4. Wählen Sie das Verzeichnis aus, in dem Sie Ihre Ä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 Änderungen, die in der DOM-Baumstruktur im Steuerfeld Elemente vorgenommen wurden, nicht gespeichert. Bearbeiten Sie HTML stattdessen im Feld Quellen.
  • Wenn Sie CSS im Bereich Styles bearbeiten und die Quelle dieses CSS-Codes eine HTML-Datei ist, speichern die Entwicklertools die Änderung nicht. 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.

Der Tab „Änderungen“

Du kannst Änderungen, die du lokal in den Entwicklertools vornimmst, über den neuen Tab Änderungen verfolgen.

Der Tab „Änderungen“

Abbildung 3. Tab Änderungen

Neue Bedienungshilfen

Im neuen Bereich Bedienungshilfen können Sie die Bedienungshilfen eines Elements prüfen und das Kontrastverhältnis von Textelementen in der Farbauswahl prüfen. So sorgen Sie dafür, dass sie für Nutzer mit Seh- oder Farbsinnstörungen zugänglich sind.

Bereich „Bedienungshilfen“

Im Bereich Bedienungshilfen im Bereich Elemente können Sie sich die Bedienungshilfen des aktuell ausgewählten Elements ansehen.

Im Bereich „Bedienungshilfen“

Abbildung 4. Im Bereich Bedienungshilfen werden die ARIA-Attribute und berechneten Eigenschaften für das Element angezeigt, das derzeit in der DOM-Baumstruktur im Bereich Elemente ausgewählt ist. Außerdem wird seine Position in der Baumstruktur für Barrierefreiheit angezeigt.

Sehen Sie sich Rob Dodsons A11ycast zum Beschriften unten an, um den Bereich Barrierefreiheit in Aktion zu sehen.

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 Sehbehinderung oder Farbblindheit besser zugänglich. 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 besser nutzbar. Mit anderen Worten: Wenn Ihr Text grau mit weißem Hintergrund ist, ist er für niemanden zu lesen.

Untersuchen Sie das Kontrastverhältnis des hervorgehobenen H1-Elements.

Abbildung 5. Das Kontrastverhältnis des markierten h1-Elements wird geprüft

In Abbildung 5 zeigen die beiden Häkchen neben 4.61, dass dieses Element dem optimierten empfohlenen Kontrastverhältnis (AAA) entspricht. Wenn nur ein Häkchen angezeigt würde, würde dies bedeuten, dass das empfohlene Mindestkontrastverhältnis (AA) eingehalten wurde.

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

Der erweiterte Abschnitt „Kontrastverhältnis“.

Abbildung 6. Der erweiterte Abschnitt Kontrastverhältnis

Der Bereich Audits wird auf Barrierefreiheit automatisch geprüft. So wird sichergestellt, dass jedes Textelement auf einer Seite ein ausreichendes Kontrastverhältnis hat.

Lesen Sie Lighthouse in den Chrome-Entwicklertools ausführen oder sehen Sie sich unten den A11ycast an, um zu erfahren, wie Sie mit dem Bereich Audits die Barrierefreiheit testen.

Neue Prüfungen

Chrome 65 wird mit einer ganz neuen Kategorie von SEO-Prüfungen und vielen neuen Leistungsüberprüfungen ausgeliefert.

Neue SEO-Prüfungen

Wenn Sie dafür sorgen, dass Ihre Seiten alle Prüfungen in der neuen SEO-Kategorie bestehen, können Sie Ihr 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:

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

Leistung ist alles! Nachdem Mynet die Seitenladegeschwindigkeit um das Vierfache erhöht hatte, verbrachten Nutzer 43% mehr Zeit auf der Website, sahen sich 34% mehr Seiten an, die Absprungraten sanken um 24 % und der Umsatz stieg pro Artikelseitenaufruf um 25% an. Weitere Informationen

Tipp Wenn Sie die Ladeleistung Ihrer Seiten verbessern möchten, aber nicht wissen, wo Sie anfangen sollen, versuchen Sie es mit dem Bereich Audits. Sie geben eine URL an und erhalten einen detaillierten Bericht über viele verschiedene Verbesserungsmöglichkeiten zur Seite. JETZT LOSLEGEN

Weitere Updates

Zuverlässiges Code-Stepping mit Workern und asynchronem Code

In Chrome 65 wird die Schaltfläche Step Into Steig ein beim Wechseln von Code aktualisiert, der Nachrichten zwischen Threads übergibt, sowie asynchroner Code. Wenn Sie zum vorherigen Schrittverhalten zurückkehren möchten, können Sie stattdessen die neue Schaltfläche Schritt Step verwenden.

Code zum Übergeben von Nachrichten zwischen Threads

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

Beispielsweise übergibt die Anwendung in Abbildung 8 eine Nachricht zwischen dem Hauptthread und dem Worker-Thread. Nachdem die Entwicklertools den postMessage()-Aufruf im Hauptthread aktiviert haben, wird sie im onmessage-Handler im Worker-Thread pausiert. Der onmessage-Handler selbst sendet eine Nachricht an den Hauptthread zurück. Durch diesen Aufruf werden die Entwicklertools wieder im Hauptthread pausiert.

Code zur Übermittlung von Nachrichten in Chrome 65

Abbildung 8. Code zur Nachrichtenweitergabe in Chrome 65

Wenn Sie in früheren Versionen von Chrome diesen Code eingegeben haben, wurde in Chrome nur der Hauptthread auf der Seite des Codes angezeigt, wie Sie in Abbildung 9 sehen können.

Code zur Übermittlung von Nachrichten in Chrome 63

Abbildung 9. Code zur Nachrichtenweitergabe in Chrome 63

Auf asynchronen Code zugreifen

Bei der Einführung von asynchronem Code gehen die Entwicklertools jetzt davon aus, dass Sie den asynchronen Code, der schließlich ausgeführt wird, pausieren möchten.

In Abbildung 10 führt das Entwicklungsteam nach dem Wechsel zu 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

Wenn Sie in Chrome 63 Code wie diesen verwendet haben, wurden die Entwicklertools im Code während der chronologischen Ausführung 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 können Sie jetzt vorübergehend bis zu 5 Aufzeichnungen speichern. Die Aufzeichnungen werden gelöscht, wenn Sie das Fenster der Entwicklertools schließen. Lesen Sie Erste Schritte mit der Analyse der Laufzeitleistung, um sich mit dem Bereich Leistung vertraut zu machen.

Im Steuerfeld „Leistung“ zwischen mehreren Aufzeichnungen auswählen

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

Bonus: Automatisieren Sie Entwicklertools-Aktionen mit Puppeteer 1.0

Version 1.0 von Puppeteer, einem Tool zur Browserautomatisierung, das vom Chrome DevTools-Team verwaltet wird, ist jetzt nicht mehr verfügbar. Mit Puppeteer können Sie viele Aufgaben automatisieren, die zuvor nur über die Entwicklertools verfügbar waren, z. B. 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, 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 verwenden, um Entwicklertools-Funktionen beim Surfen verfügbar zu machen, ohne die Entwicklertools explizit zu öffnen. Ein entsprechendes Beispiel finden Sie unter Funktionen der Entwicklertools verwenden, ohne die Entwicklertools zu öffnen.

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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

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