Neuerungen in den Entwicklertools (Chrome 65)

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

• Lokale Überschreibungen
• Neue Bedienungshilfen
• Tab Änderungen
• Neue SEO- und Leistungsprüfungen
• Mehrere Aufzeichnungen im Bereich Leistung
• Zuverlässiges Code-Stepping mit Workern und asynchronem Code

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. Lokales Überschreibungen funktionieren mit wenigen Ausnahmen bei den meisten Dateitypen. Siehe Einschränkungen.

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 du die Seite neu lädst, liefert Entwicklertools die lokale, geänderte Datei und nicht das Netzwerk .

So richten Sie lokale Überschreibungen ein:

1. Öffnen Sie den Bereich Quellen.

2. Öffnen Sie den 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 die -Verzeichnis.

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. HTML bearbeiten in der Quellen.
• Wenn Sie CSS im Bereich Styles bearbeiten und die Quelle dieses CSS-Codes eine HTML-Datei ist, können die Entwicklertools speichern Sie die Änderung. Bearbeiten Sie die HTML-Datei stattdessen im Bereich Quellen.

Zugehörige Funktionen

• Arbeitsbereiche. Die Entwicklertools ordnet Netzwerkressourcen automatisch einem lokalen Repository zu. Wann immer Sie eine Änderung in den Entwicklertools vornehmen, wird diese Änderung auch in Ihrem lokalen Repository gespeichert.

Tab „Änderungen“

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

Abbildung 3. Tab Änderungen

Neue Bedienungshilfen

Im neuen Bereich Bedienungshilfen können Sie die Eigenschaften der Barrierefreiheit eines Elements prüfen. Überprüfen Sie das Kontrastverhältnis von Textelementen in der Farbauswahl, um sicherzustellen, dass sie barrierefrei für Nutzer mit eingeschränkter Sehfähigkeit oder Farbblindheit.

Bereich „Bedienungshilfen“

Sehen Sie sich im Bereich Elemente im Bereich Bedienungshilfen die Eigenschaften der Barrierefreiheit an. des aktuell ausgewählten Elements.

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

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. Kontrast erhöhen der Textelemente macht Ihre Website für Nutzer mit Sehbeeinträchtigungen Farbblindheit. Weitere Informationen zum Kontrastverhältnis finden Sie unter Farbe und Kontrast. die Barrierefreiheit beeinflusst.

Wenn Sie den Farbkontrast Ihrer Textelemente verbessern, ist Ihre Website für alle Nutzer besser nutzbar. In Wenn Ihr Text grau mit weißem Hintergrund ist, ist das für niemanden schwer zu lesen.

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

In Abbildung 5 bedeuten die beiden Häkchen neben 4.61, dass dieses Element die optimierten empfohlenes Kontrastverhältnis (AAA). Wenn nur ein Häkchen gäbe, bedeutet dies, dass es die empfohlenes Mindestkontrastverhältnis (AA).

Klicken Sie auf Mehr anzeigen , um den Kontrast zu maximieren. Seitenverhältnis. Die weiße Linie im Feld Farbspektrum stellt die Grenze zwischen Farben dar. die dem empfohlenen Kontrastverhältnis entsprechen. Da z. B. der Farbton Grau in Abbildung 6 entspricht den Empfehlungen, d. h., alle Farben unter der weißen Linie entsprechen auch den Empfehlungen. Empfehlungen.

Abbildung 6. Im erweiterten Bereich Kontrastverhältnis

Zugehörige Funktionen

Der Bereich Audits umfasst eine automatische Prüfung der Barrierefreiheit, um sicherzustellen, dass jedes Textelement auf dass eine Seite ein ausreichendes Kontrastverhältnis hat.

Unter Lighthouse in den Chrome-Entwicklertools ausführen oder A11ycast unten erfahren Sie, wie Sie die Bereich Audits, um die Barrierefreiheit zu 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 Sie dafür sorgen, dass Ihre Seiten die Prüfungen in der neuen Kategorie SEO bestehen, können Sie in den Suchergebnissen.

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 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 Absprungrate ging um 24 % zurück und der Umsatz stieg pro Artikel um 25 %. Seitenaufruf. Weitere Informationen

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

Weitere Updates

• Neue manuelle Prüfungen der Barrierefreiheit
• Aktualisierung der WebP-Prüfung, um auch andere Bildformate der nächsten Generation einzubeziehen
• Überarbeitung des Werts für Barrierefreiheit
• Wenn eine Prüfung der Barrierefreiheit für eine Seite nicht anwendbar ist, wird diese Prüfung nicht mehr auf die Wert für Barrierefreiheit
• Leistung steht jetzt im oberen Bereich der Berichte

Zuverlässiges Code-Stepping mit Workern und asynchronem Code

Chrome 65 enthält Updates für die Schritt-für-Schritt-Anleitung -Taste zu sehen, wenn Sie Code, der Nachrichten zwischen Threads weitergibt, und asynchronem Code. Wenn Sie zum vorherigen Schritt Verhalten haben, können Sie den neuen Schritt verwenden .

Code einteilen, der Nachrichten zwischen Threads weiterleitet

Wenn Sie Code eingeben, der Nachrichten zwischen Threads weitergibt, sehen Sie in den Entwicklertools, was in für jeden Thread.

Die Anwendung in Abbildung 8 übergibt beispielsweise eine Nachricht zwischen dem Hauptthread und dem Worker-Thread. Nachdem der Aufruf postMessage() im Hauptthread aufgerufen wurde, pausiert die Entwicklertools im onmessage Handler im Worker-Thread. Der onmessage-Handler selbst sendet eine Nachricht an die Haupt- Diskussions-Thread. Wenn Sie diesen Aufruf aufrufen, werden die Entwicklertools im Hauptthread pausiert.

Abbildung 8. Code zur Nachrichtenweitergabe in Chrome 65 verwenden

Als Sie in früheren Chrome-Versionen so programmiert haben, zeigte Chrome Ihnen nur die Hauptthread-Seite des Codes hinzufügen, wie in Abbildung 9 zu sehen ist.

Abbildung 9. Code zur Nachrichtenweitergabe in Chrome 63 verwenden

Asynchronen Code verwenden

Beim Wechsel zu asynchronem Code geht DevTools nun davon aus, dass Sie im Feld asynchronem Code, der schließlich ausgeführt wird.

In Abbildung 10 führt Entwicklertools beispielsweise den gesamten CodesetTimeout() bis zu diesem Punkt im Hintergrund und macht dann eine Pause in der Funktion, setTimeout()

Abbildung 10. Asynchronen Code in Chrome 65 verwenden

Bei diesem Code in Chrome 63 wurden die Entwicklertools in chronologischer Reihenfolge im Code pausiert. wie in Abbildung 11 zu sehen ist.

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 sind wird gelöscht, wenn Sie das Fenster mit den Entwicklertools schließen. Siehe Erste Schritte bei der Analyse der Laufzeit Leistung, um sich mit dem Bereich Leistung vertraut zu machen.

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 aus. Mit Puppeteer können Sie viele Aufgaben automatisieren, die zuvor nur über die Entwicklertools verfügbar waren. wie Screenshots erstellen:

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 unter Kurzanleitung.

Sie können auch Puppeteer verwenden, um Entwicklertools-Funktionen beim Surfen verfügbar zu machen, ohne dass Sie explizit um die Entwicklertools 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 erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• 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