Ein Blick auf die Neuerungen in Chrome DevTools im Jahr 2020

Ich freue mich, einige der neueren Funktionen in Chrome DevTools mit Ihnen zu teilen. Unten finden Sie eine kurze Einführung, und dann werden wir viele der neuen DevTools-Funktionen behandeln. Wir werden uns auch ansehen, was in einigen anderen Browsern passiert. Ich halte mich über diese Dinge auf dem Laufenden, da ich Dev Tips erstelle, die größte Sammlung von DevTools-Tipps, die Sie online finden werden! 

Es ist gut zu wissen, was sich in DevTools geändert hat, da sie sich ständig weiterentwickeln und neue Funktionen speziell dazu entwickelt wurden, unsere Entwicklungs- und Debugging-Erfahrung zu unterstützen und zu verbessern.

Lassen Sie uns in das Neueste und Beste eintauchen. Während die öffentliche stabile Version von Chrome die meisten dieser Funktionen hat, verwende ich Chrome Canary, da ich gerne am Puls der Zeit bleibe.

Lighthouse

Lighthouse ist ein Open Source-Tool zur Überprüfung von Webseiten, typischerweise in Bezug auf Leistung, SEO, Barrierefreiheit und Ähnliches. Seit einiger Zeit ist Lighthouse Teil von DevTools, was bedeutet, dass Sie es in einem Panel namens ... Lighthouse finden!

Ich mag Lighthouse sehr, weil es einer der am einfachsten zu bedienenden Teile von DevTools ist. Klicken Sie auf „Bericht generieren“, und Sie erhalten sofort lesbare Notizen für Ihre Webseite, wie z.B.

Dokument verwendet gut lesbare Schriftgrößen, 100 % gut lesbarer Text

Oder

Vermeiden Sie eine übermäßige DOM-Größe (1.189 Elemente)

Fast jede einzelne Prüfung verlinkt auf Entwicklerdokumentationen, die erklären, wie die Prüfung fehlschlagen kann und was Sie zur Verbesserung tun können.

Der beste Weg, um mit Lighthouse zu beginnen, ist, Audits auf Ihren eigenen Websites auszuführen

1. Öffnen Sie DevTools und navigieren Sie zum Panel „Lighthouse“, wenn Sie sich auf einer Ihrer Websites befinden
2. Wählen Sie die zu prüfenden Elemente aus („Best Practices“ ist ein guter Ausgangspunkt)
3. Klicken Sie auf „Bericht generieren“
4. Klicken Sie auf bestandene/fehlgeschlagene Audits, um die Ergebnisse zu untersuchen

Obwohl Lighthouse schon seit einiger Zeit Teil von DevTools ist (seit 2017!), verdient es aufgrund der benutzerorientierten Funktionen, die es weiterhin liefert, immer noch eine besondere Erwähnung, wie z.B.:

• Eine Prüfung, die sicherstellt, dass Anker-Elemente auf ihre URLs verweisen (Fun Fact: Ich habe daran gearbeitet!)
• Eine Prüfung, die prüft, ob die Largest Contentful Paint-Metrik schnell genug ist
• Eine Prüfung, die Sie vor ungenutztem JavaScript warnt

Ein besseres „Element untersuchen“

Dies ist eine subtile und in gewisser Weise sehr kleine Funktion, die jedoch tiefgreifende Auswirkungen darauf haben kann, wie wir mit der Barrierefreiheit von Webseiten umgehen.

So funktioniert es. Wenn Sie „Element untersuchen“ verwenden – was wohl die häufigste Nutzung von DevTools ist –, erhalten Sie jetzt einen Tooltip mit zusätzlichen Informationen zur Barrierefreiheit.

Der Grund, warum ich sage, dass dies eine tiefgreifende Wirkung haben kann, ist, dass DevTools seit einiger Zeit über Funktionen zur Barrierefreiheit verfügt, aber wie viele von uns nutzen sie tatsächlich? Die Einbeziehung dieser Informationen in eine häufig verwendete Funktion wie „Element untersuchen“ verleiht ihr viel mehr Sichtbarkeit und macht sie viel zugänglicher.

Der Tooltip enthält

• das Kontrastverhältnis des Textes (wie gut oder schlecht sich der Vordergrundtext vom Hintergrund abhebt)
• die Textdarstellung
• die ARIA Rolle
• ob das untersuchte Element per Tastatur fokussierbar ist oder nicht

Um dies auszuprobieren, klicken Sie mit der rechten Maustaste (oder Cmd + Shift + C) auf ein Element und wählen Sie „Untersuchen“, um es in DevTools anzuzeigen.

Ich habe ein 14-minütiges Video über Debugging der Barrierefreiheit mit Chrome DevTools erstellt, das einige dieser Punkte detaillierter behandelt.

Emulieren von Sehbehinderungen

Genau wie es auf der Dose steht, können Sie Chrome DevTools verwenden, um Sehbehinderungen zu emulieren. Zum Beispiel können wir eine Seite durch die Linse von verschwommenem Sehen betrachten.

Wie können Sie das in DevTools tun? So:

1. Öffnen Sie DevTools (rechte Maustaste und „Untersuchen“ oder Cmd + Shift + C).
2. Öffnen Sie das DevTools-Befehlsmenü (Cmd + Shift + P auf Mac, Ctrl + Shift + P auf Windows).
3. Wählen Sie „Rendering anzeigen“ im Befehlsmenü aus.
4. Wählen Sie eine Beeinträchtigung im Bedienfeld „Rendering“ aus.

Wir haben verschwommenes Sehen als Beispiel verwendet, aber DevTools bietet andere Optionen, darunter: Protanopie, Deuteranopie, Tritanopie und Achromatopsie.

Wie bei jedem Werkzeug dieser Art ist es dazu gedacht, unsere (hoffentlich) vorhandenen Fähigkeiten zur Barrierefreiheit zu ergänzen. Mit anderen Worten, es ist nicht lehrreich, sondern beeinflussend auf die Designs und Benutzererfahrungen, die wir schaffen.

Hier sind ein paar zusätzliche Ressourcen zur Barrierefreiheit und Emulation bei Sehschwäche

• Accessibility Requirements for People with Low Vision (W3C)
• Verbessern Sie die Barrierefreiheit von Seiten durch Emulation von Sehbehinderungen

Zeitmessung der Leistung erhalten

Das Performance-Panel in DevTools kann manchmal wie ein verwirrender Mix aus Formen und Farben aussehen.

Diese Aktualisierung ist großartig, da sie aussagekräftige Leistungsmetriken besser sichtbar macht.

Was wir uns ansehen wollen, sind die zusätzlichen Zeitrechtecke, die im Abschnitt „Timings“ der Performance-Panel-Aufzeichnung angezeigt werden. Dies hebt hervor:

• DOMContentLoaded: Das Ereignis, das ausgelöst wird, wenn das anfängliche HTML geladen ist
• First Paint: Wenn der Browser zum ersten Mal Pixel auf dem Bildschirm zeichnet
• First Contentful Paint: Der Zeitpunkt, an dem der Browser Inhalt aus dem DOM zeichnet, was dem Benutzer anzeigt, dass Inhalte geladen werden
• Onload: Wenn die Seite und alle ihre Ressourcen vollständig geladen sind
• Largest Contentful Paint: Das größte Bild oder Textelement, das im Viewport gerendert wird

Als Bonus: Wenn Sie das Largest Contentful Paint-Ereignis in einer Performance-Panel-Aufzeichnung finden, können Sie darauf klicken, um zusätzliche Informationen zu erhalten.

Obwohl es hier viele wertvolle Informationen gibt, ist der „Zugehörige Knoten“ potenziell das nützlichste Element, da es genau angibt, welches Element zum LCP-Ereignis beigetragen hat.

Um diese Funktion auszuprobieren

1. Öffnen Sie DevTools und navigieren Sie zum Panel „Performance“
2. Klicken Sie auf „Aufzeichnung starten und Seite neu laden“
3. Beobachten Sie die Zeitmetriken im Abschnitt „Timings“ einer Aufzeichnung
4. Klicken Sie auf die einzelnen Metriken, um zu sehen, welche zusätzlichen Informationen Sie erhalten

Leistung überwachen

Wenn Sie schnell mit DevTools zur Leistungsanalyse beginnen möchten und Lighthouse bereits ausprobiert haben, dann empfehle ich die Funktion „Performance Monitor“. Dies ist so etwas wie WebPageTest.org direkt zur Hand zu haben, mit Dingen wie CPU-Auslastung.

So greifen Sie darauf zu:

1. Öffnen Sie DevTools
2. Öffnen Sie das Befehlsmenü (Cmd + Shift + P auf Mac, Ctrl + Shift + P auf Windows)
3. Wählen Sie „Performance Monitor anzeigen“ aus dem Befehlsmenü aus.
4. Interagieren Sie und navigieren Sie auf der Website herum
5. Beobachten Sie die Ergebnisse

Der Performance Monitor kann Ihnen interessante Metriken liefern, im Gegensatz zu Lighthouse müssen Sie jedoch selbst herausfinden, wie Sie diese interpretieren und Maßnahmen ergreifen. Es werden keine Vorschläge gemacht. Es liegt an Ihnen, das Diagramm der CPU-Auslastung zu studieren und zu fragen, ob etwas wie 90 % ein akzeptables Niveau für Ihre Website ist (wahrscheinlich nicht).

Der Performance Monitor verfügt über eine interaktive Legende, mit der Sie Metriken ein- und ausschalten können, wie z. B.:

• CPU-Auslastung
• JS-Heap-Größe
• DOM-Knoten
• JS-Ereignis-Listener
• Dokumente
• Dokument-Frames
• Layouts / Sek.
• Stil-Neuberechnungen / Sek. 

CSS-Übersicht und lokale Overrides

CSS-Tricks hat diese Funktionen bereits behandelt, also schauen Sie sie sich an!

• CSS-Übersicht: Ein praktisches DevTools-Panel, das eine Reihe interessanter Statistiken über das CSS liefert, das Ihre Seite verwendet
• Lokale Overrides: Eine leistungsstarke Funktion, mit der Sie Produktionswebsites mit Ihren lokalen Ressourcen überschreiben können, sodass Sie Änderungen einfach in der Vorschau anzeigen können 

Was ist also mit DevTools in anderen Browsern?

Ich bin sicher, Sie haben bemerkt, dass ich in diesem Artikel Chrome verwendet habe. Es ist der Browser, den ich persönlich benutze. Dennoch lohnt es sich zu bedenken, dass

• Firefox DevTools sehen derzeit ziemlich großartig aus
• Da Microsoft Edge auf Chromium basiert, wird es ebenfalls von diesen DevTools-Funktionen profitieren
• Wie auf den Safari Technology Preview Release Notes (suchen Sie auf dieser Seite nach Web Inspector) ersichtlich ist, hat Safari DevTools einen langen Weg zurückgelegt 

Mit anderen Worten, halten Sie die Augen offen, denn dies ist ein sich schnell entwickelndes Feld!

Fazit

Wir haben in kurzer Zeit viel abgedeckt!

• Lighthouse: Ein Panel, das Tipps und Vorschläge für Leistung, Barrierefreiheit, SEO und Best Practices liefert.
• Element untersuchen: Eine Verbesserung der Funktion „Element untersuchen“, die dem Tooltip von „Element untersuchen“ Informationen zur Barrierefreiheit hinzufügt
• Emulieren von Sehbehinderungen: Eine Funktion im Bedienfeld „Rendering“, um eine Seite durch die Linse von Sehschwäche zu betrachten.
• Performance Panel Timings: Zusätzliche Metriken in der Aufzeichnung des Performance-Panels, die benutzerorientierte Statistiken wie Largest Contentful Paint anzeigen
• Performance Monitor – Eine Echtzeit-Visualisierung von Leistungsmetriken für die aktuelle Website, wie z. B. CPU-Auslastung und DOM-Größe

Bitte besuchen Sie meinen Newsletter, Dev Tips, wenn Sie über die neuesten Updates auf dem Laufenden bleiben und über 200 Webentwicklungstipps erhalten möchten! Ich habe auch einen Premium-Videokurs unter ModernDevTools.com. Und ich poste tendenziell viele Bonus-Webentwicklungsressourcen auf Twitter.