Neuerungen in den Entwicklertools (Chrome 74)

Kayce Basques

Willkommen zurück! Das ist neu.

Videoversion dieser Seite

Alle Knoten hervorheben, die von der CSS-Property betroffen sind

Bewegen Sie den Mauszeiger auf eine CSS-Eigenschaft, die sich auf das Boxmodell eines Knotens auswirkt, z. B. padding oder margin, um werden alle Knoten hervorgehoben, die von dieser Deklaration betroffen sind.

Wenn Sie den Mauszeiger auf eine Randeigenschaft bewegen, werden alle Knoten hervorgehoben, die von dieser Deklaration betroffen sind.

Abbildung 1. Wenn Sie den Mauszeiger auf ein margin-Attribut bewegen, werden die Ränder aller Knoten hervorgehoben, die davon betroffen sind. Erklärung

Lighthouse v4 im Bereich „Audits“

Bei der neuen Prüfung Die Größe von Tippzielen ist nicht die richtige Größe festgelegt wird geprüft, ob interaktive Elemente wie Schaltflächen und Links sind auf Mobilgeräten entsprechend groß und mit ausreichendem Abstand voneinander entfernt.

Für die PWA-Kategorie eines Berichts wird jetzt ein Logobewertungssystem verwendet.

Das neue Badge-Bewertungssystem für die PWA-Kategorie

Abbildung 3. Das neue Badge-Bewertungssystem für die PWA-Kategorie

Viewer von WebSocket-Binärnachrichten

So zeigen Sie den Inhalt einer binären WebSocket-Nachricht an:

  1. Öffnen Sie den Bereich Netzwerk. Weitere Informationen zu den Grundlagen der Analyse finden Sie unter Netzwerkaktivität untersuchen. Netzwerkaktivität.

    Das Steuerfeld „Netzwerk“

    Abbildung 4. Das Steuerfeld „Netzwerk“

  2. Klicken Sie auf WS, um alle Ressourcen herauszufiltern, die keine WebSocket-Verbindungen sind.

    Nach dem Klicken auf WS werden nur WebSockety-Verbindungen angezeigt

    Abbildung 5. Nach dem Klicken auf WS werden nur WebSockety-Verbindungen angezeigt

  3. Klicken Sie auf den Namen einer WebSocket-Verbindung, um sie zu überprüfen.

    WebSocket-Verbindungen prüfen

    Abbildung 6. WebSocket-Verbindungen prüfen

  4. Klicken Sie auf den Tab Nachrichten.

    Tab „Nachrichten“

    Abbildung 7. Tab „Nachrichten“

  5. Klicken Sie auf einen der Einträge im Feld Binary Message (Binärnachricht), um ihn zu überprüfen.

    Binärnachricht prüfen

    Abbildung 8. Binärnachricht prüfen

Verwenden Sie das Drop-down-Menü unten im Viewer, um die Nachricht in Base64 oder UTF-8 zu konvertieren. Klicken Sie auf In Zwischenablage kopieren In Zwischenablage kopieren zum Kopieren des in die Zwischenablage einfügen.

Binärnachricht als Base64 ansehen

Abbildung 9. Binärnachricht als Base64 ansehen

Screenshot des Bereichs im Befehlsmenü aufnehmen

Mit Flächen-Screenshots können Sie einen Screenshot von einem Teil des Darstellungsbereichs erstellen. Diese Funktion wurde aber der Workflow für den Zugriff war ziemlich versteckt. Screenshots für Bereiche jetzt über das Befehlsmenü verfügbar.

  1. Fokussieren Sie die Entwicklertools und drücken Sie dann Strg + Umschalttaste + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen.

    Das Befehlsmenü

    Abbildung 10. Das Befehlsmenü

  2. Geben Sie area ein, wählen Sie Screenshot des Bereichs aufnehmen aus und drücken Sie die Eingabetaste.

  3. Ziehen Sie die Maus über den Bereich des Darstellungsbereichs, für den Sie einen Screenshot erstellen möchten.

    Bereich des Darstellungsbereichs für den Screenshot auswählen

    Abbildung 11. Bereich des Darstellungsbereichs für den Screenshot auswählen

Service Worker-Filter im Netzwerkbereich

Geben Sie is:service-worker-initiated oder is:service-worker-intercepted in den Filter des Steuerfelds „Netzwerk“ ein Textfeld zum Anzeigen von Anfragen, die durchinitiatedintercepted Service Worker.

Filtern nach is:service-worker-initiated

Abbildung 12. Filtern nach is:service-worker-initiated

Filtern nach is:service-worker-trained

Abbildung 13. Filtern nach is:service-worker-intercepted

Weitere Informationen zum Filtern von Netzwerkprotokollen finden Sie unter Ressourcen filtern.

Updates im Bereich „Leistung“

Bei Aufführungsaufzeichnungen werden jetzt lange Aufgaben und First Paint mit Markup versehen.

Unter Weniger Arbeiten im Hauptthread finden Sie ein Beispiel dafür, wie Sie den Bereich „Leistung“ für die Analyse verwenden. beim Laden von Seiten.

Lange Aufgaben in Leistungsaufzeichnungen

Bei Performance-Aufzeichnungen werden jetzt lange tasks angezeigt.

Mauszeiger in einer Leistungsaufzeichnung auf eine lange Aufgabe bewegen

Abbildung 14. Mauszeiger in einer Leistungsaufzeichnung auf eine lange Aufgabe bewegen

First Paint im Bereich „Timings“

Im Abschnitt Timings einer Leistungsaufzeichnung wird jetzt „First Paint“ markiert.

First Paint im Bereich „Timings“

Abbildung 15. First Paint im Bereich „Timings“

Anleitung zum neuen DOM

Unter Erste Schritte beim Anzeigen und Ändern des DOMs finden Sie eine praktische Tour durch DOM-bezogene Funktionen.

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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > 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