Ein Blick darauf, was in Chrome Devtools im Jahr 2020 neu ist

Ein Blick auf die neuen Funktionen von Chrome Devtools im Jahr 2020

In diesem Artikel werden Sie schnell über einige der neuen Funktionen von Chrome Devtools erfahren. Wir werden es kurz vorstellen, dann in viele neue Devtools -Funktionen eintauchen und über Fortschritte in anderen Browsern erfahren. Ich konzentriere mich immer wieder auf diese Aspekte, weil ich Dev -Tipps erstellt habe, die größte Sammlung von Devtools -Aufforderungen, die Sie online finden können!

Es ist entscheidend, die Veränderungen in Devtools zu verstehen, die sich weiterentwickelt, mit neuen Funktionen, die uns helfen sollen, unsere Entwicklung und Debug -Erfahrung zu verbessern.

Schauen wir uns die neuesten und besten Funktionen an. Während die öffentlich stabile Version von Chrome die meisten dieser Funktionen hat, verwende ich Chrome Canary, weil ich gerne an der Spitze der Technologie bin.

Leuchtturm

Lighthouse ist ein Open -Source -Tool für die Prüfung von Webseiten, normalerweise um Leistung, SEO, Barrierefreiheit und mehr. Der Leuchtturm wird seit einiger Zeit als Teil von Devtools zusammengebündelt, was bedeutet, dass Sie es in einem Panel namens… Lighthouse finden können!

Ich mag Leuchtturm wirklich, weil es einer der einfachsten Teile von Devtools ist. Klicken Sie auf "Bericht generieren" und Sie erhalten sofort die menschlichen lesbaren Kommentare für die Webseite, z. B.:

Dokumente verwenden eine leicht zu lesende Schriftgröße und 100% leicht zu lesendem Text

oder:

Vermeiden Sie übermäßig große DOM -Größen (1.189 Elemente)

Fast jede Bewertung ist mit der Entwicklerdokumentation verknüpft, in der erklärt wird, warum die Überprüfung fehlgeschlagen ist und wie sie verbessert werden kann.

Der beste Weg, um mit Lighthouse zu beginnen, besteht darin, das Audit auf Ihrer eigenen Website durchzuführen:

1. Öffnen Sie Devtools und navigieren Sie zum Leuchtturmpanel, wenn Sie eine der Websites besuchen
2. Wählen Sie das Projekt aus, das Sie überprüfen möchten ( Best Practices sind ein guter Ausgangspunkt).
3. Klicken Sie hier, um einen Bericht zu generieren
4. Klicken Sie auf eine genehmigte/fehlgeschlagene Überprüfung, um die Ergebnisse zu untersuchen

Obwohl der Leuchtturm seit einiger Zeit (seit 2017!) Teil von Devtools ist, ist es immer noch erwähnenswert, da es weiterhin benutzergerichtete Funktionen anbietet, wie z. B.:

• Überprüfen Sie, ob sich das Ankerelement in das URL -Audit beschreitet (interessante Tatsache: Ich bin an dieser Arbeit beteiligt!)
• Überprüfen Sie, ob die maximale Inhaltszeichnung metrisch schnell genug ist, um die Überprüfung zu erhalten
• Warnen Sie vor der Prüfung, die JavaScript nicht verwendet

Besser "Elemente überprüfen"

Dies ist in gewisser Weise eine differenzierte, sehr kleine Funktion, kann jedoch tiefgreifende Auswirkungen auf die Umgang mit der Web -Barrierefreiheit haben.

Es funktioniert wie folgt. Wenn Sie Checkelemente verwenden, die wohl die häufigste Verwendung von Devtools verwenden, erhalten Sie jetzt Tooltips, die zusätzliche Informationen zur Barrierefreiheit enthalten.

Der Grund, warum ich sage, dass dies einen tiefgreifenden Einfluss hat, ist, dass Devtools eine Weile zugänglich macht, aber wie viele von uns verwenden sie tatsächlich? Wenn Sie diese Informationen in eine häufig verwendete Funktion wie Checkelement aufnehmen, erhalten Sie eine höhere Sichtbarkeit und machen sie zugänglicher.

Werkzeugtipps umfassen:

• Das Kontrastverhältnis von Text (wie viel Kontrast ist der Vordergrundtext mit Hintergrundfarbe oder wie schlecht ist es)
• Textdarstellung
• Aria -Rollen
• Ob das inspizierte Element auf die Tastatur konzentriert werden kann

Um diese Funktion auszuprobieren, klicken Sie mit der rechten Maustaste (oder CMD-Verschiebung C) Element und wählen Sie es , um sie in Devtools anzuzeigen.

Ich habe ein 14-minütiges Video zum Debuggen von Barrierefreiheit mit Chrome Devtools gemacht, das einige von ihnen detaillierter abdeckt.

Simulierte Sichtfehler

Wie der Name schon sagt, können Sie Chrome Devtools verwenden, um die Sehbehinderung zu simulieren. Zum Beispiel können wir Websites aus einer unscharfen Sichtssicht anzeigen.

Wie machst du das in Devtools? So was:

1. Öffnen Sie Devtools (Klicken Sie mit der rechten Maustaste und wählen Sie Schach- oder CMD-Verschiebung C).
2. Öffnen Sie das Befehlsmenü devtools (CMD -Schaltverschiebung P auf Mac und Strg Shift P unter Windows).
3. Wählen Sie im Befehlsmenü anzeigen Rendering .
4. Wählen Sie den Defekt im Rendering -Panel aus.

Wir verwenden als Beispiel Fuzzy Vision, aber Devtools hat andere Optionen, darunter die volle Blindheit, partielle Farbblindheit, blaugrüne Blindheit und totale Farbblindheit.

Wie bei jedem solchen Tool ist es so konzipiert, dass es unsere (hoffentlich) bestehenden Zugänglichkeitsfähigkeiten ergänzt. Mit anderen Worten, es ist nicht lehrreich, wirkt sich jedoch auf die von uns erstellte Design- und Benutzererfahrung aus.

Hier finden Sie einige zusätzliche Ressourcen zur Zugänglichkeit und Simulation mit geringer Sicht:

• Zugänglichkeitsanforderungen für Menschen mit geringem Sehvermögen (W3C)
• Verbessern Sie die Zugänglichkeit der Seiten, indem Sie Sichtfehler simulieren

Erhalten Sie das Leistungszeitpunkt

Performance -Panels in Devtools sehen manchmal wie eine unordentliche Mischung aus Formen und Farben aus.

Das Update dazu ist großartig, da es eine bessere Aufgabe darstellt, sinnvolle Leistungsmetriken zu präsentieren.

Was wir uns ansehen möchten, ist das zusätzliche Timing -Rechteck, das im Timing in Performance Panel Record gezeigt wird. Dies zeigt:

• DomContent Loaded: Ereignis abgefeuert, wenn das erste HTML -Laden geladen wird
• Zeichnen Sie zuerst: Wenn der Browser Pixel zum ersten Mal auf den Bildschirm zeichnet
• Erste Inhaltszeichnung: Der Browser zeichnet den Inhaltspunkt aus dem DOM, was dem Benutzer anzeigt, dass der Inhalt geladen wird
• Onload: Wenn die Seite und alle Ressourcen geladen sind
• Maximale Inhaltszeichnung: Das größte Bild- oder Textelement, das im Ansichtsfenster wiedergegeben wurde

Wenn Sie das größte Inhaltszeichnungsereignis im Aufzeichnungen des Leistungsbereichs finden, können Sie darauf klicken, um zusätzliche Informationen zu erhalten.

Obwohl es hier viele wertvolle Informationen gibt, können "relevante Knoten" das nützlichste Projekt sein, da es angibt, welches Element das LCP -Ereignis verursacht.

Um diese Funktion auszuprobieren:

1. Öffnen Sie Devtools und navigieren Sie zum Performance -Panel
2. Klicken Sie auf "Analyse und Reload -Seite starten".
3. Beachten Sie die Zeitindikatoren im Zeitpunkt des Datensatzes
4. Klicken Sie auf jede Metrik, um die zusätzlichen Informationen anzuzeigen, die Sie erhalten haben

Leistung überwachen

Wenn Sie schnell mit Devtools beginnen und den Leuchtturm ausprobiert haben, empfehle ich die Funktion zur Leistungsmonitor. Es ist so, als würde man webpagetest.org mit Ihren Fingerspitzen wie der CPU -Nutzung haben.

Hier erfahren Sie, wie Sie darauf zugreifen können:

1. Devtools öffnen
2. Öffnen Sie das Befehlsmenü (CMD Shift P auf Mac und Strg Shift P unter Windows).
3. Wählen Sie aus dem Befehlsmenü "Performance Monitor" aus
4. Interagieren Sie mit der Website und stöbern Sie auf
5. Beobachtungsergebnisse

Leistungsmonitore können Ihnen interessante Metriken geben, aber im Gegensatz zum Leuchtturm müssen Sie herausfinden, wie Sie sie selbst interpretieren und Maßnahmen ergreifen können. Es wurde kein Rat gegeben. Sie müssen das CPU -Nutzungsdiagramm selbst untersuchen und 90% fragen, ob es akzeptabel ist (möglicherweise nicht).

Der Leistungsmonitor verfügt über eine interaktive Legende, in der Sie beispielsweise Metriken ein- und ausschalten können:

• CPU -Verwendung
• JS HAVE -Größe
• DOM -Knoten
• JS Event Hörer
• dokumentieren
• Dokument -Framework
• Layout/Sekunde
• Style Recalculation/Sekunde

CSS -Übersicht und lokale Übersicht

CSS-Tricks hat diese Funktionen eingeführt, also schau es dir an!

• CSS -Übersicht: Ein bequemes Devtools -Panel, das viele interessante Statistiken über die von der Seite verwendeten CSS bietet
• Lokales Overlay: Eine leistungsstarke Funktion, mit der Sie die Produktionswebsites mit lokalen Ressourcen überschreiben können, damit Sie leicht Änderungen vorschauen können

Was ist also mit Devtools in anderen Browsern?

Ich bin sicher, Sie haben bemerkt, dass ich Chrome im gesamten Artikel benutze. Dies ist mein persönlicher Browser. Das heißt, es lohnt sich zu überlegen:

• Firefox Devtools sieht momentan gut aus
• Da Microsoft Edge von Chromium ausgeht, wird es auch von diesen Devtools -Funktionen profitieren
• Wie die Safari Technology Preview -Versionshinweise (durchsuchen Sie den Webinspektor auf dieser Seite), hat Safari Devtools großartige Fortschritte gemacht

Mit anderen Worten, bitte achten Sie darauf, denn dies ist ein schnell wachsendes Gebiet!

abschließend

Wir haben in sehr kurzer Zeit viel abgedeckt!

• Leuchtturm: Ein Panel, das Tipps und Vorschläge und Vorschläge für die Leistung, Zugänglichkeit, SEO und bewährte Verfahren bietet.
• Überprüfen Sie die Elemente: Verbesserung zum Überprüfen der Elemente, die Zugänglichkeitsinformationen für Check -Elemente -Tooltips enthält
• Simulierte Sichtdefizite: Ein Merkmal im Rendering-Panel zum Anzeigen von Seiten aus Sicht mit niedriger Vision.
• Timing des Performance-Panels: Weitere Metriken im Aufzeichnungen des Performance-Panels, die benutzerorientierte Statistiken wie maximale Inhaltszeichnung angezeigt werden
• Leistungsmonitor-Echtzeit-Visualisierung aktueller Website-Leistungsmetriken wie CPU-Nutzung und DOM-Größe

Wenn Sie die neuesten Updates kennen und über 200 Webentwicklungs -Tipps erhalten möchten, lesen Sie meine Mailinglist -Dev -Tipps! Ich habe auch einen fortgeschrittenen Videokurs auf modernDevtools.com. Und ich neige dazu, viele zusätzliche Webentwicklungsressourcen auf Twitter zu veröffentlichen.

Das obige ist der detaillierte Inhalt vonEin Blick darauf, was in Chrome Devtools im Jahr 2020 neu ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!