Neuerungen in den Entwicklertools (Chrome 74)

Willkommen zurück! Das ist neu:

Videoversion dieser Seite

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

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

Wenn Sie den Mauszeiger auf eine Margeneigenschaft bewegen, werden alle Knoten markiert, die von dieser Deklaration betroffen sind

Abbildung 1. Wenn Sie den Mauszeiger auf eine margin-Eigenschaft bewegen, werden die Ränder aller Knoten hervorgehoben, die von dieser Deklaration betroffen sind

Lighthouse v4 im Bereich „Audits“

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

Für die PWA-Kategorie eines Berichts wird jetzt ein Bewertungssystem für Abzeichen verwendet.

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

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

WebSocket-Anzeige für binäre Nachrichten

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

  1. Öffnen Sie den Bereich Netzwerk. Unter Netzwerkaktivität untersuchen können Sie sich mit den Grundlagen zum Analysieren der Netzwerkaktivität vertraut machen.

    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 prüfen.

    WebSocket-Verbindung prüfen

    Abbildung 6. WebSocket-Verbindung prüfen

  4. Klicken Sie auf den Tab Nachrichten.

    Tab „Nachrichten“

    Abbildung 7. Tab „Nachrichten“

  5. Klicken Sie auf einen der Einträge im Bereich Binäre Nachrichten, um ihn zu prüfen.

    Binäre Nachrichten prüfen

    Abbildung 8. Binäre Nachrichten 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, um die Binärnachricht in die Zwischenablage zu kopieren.

Binäre Nachricht als Base64 ansehen

Abbildung 9. Binäre Nachricht als Base64 ansehen

Screenshot eines Bereichs über das Befehlsmenü aufnehmen

Mit Screenshots mit Bereichen können Sie einen Screenshot eines Ausschnitts des Darstellungsbereichs erstellen. Diese Funktion gibt es schon eine Weile, aber der Workflow für den Zugriff war ziemlich versteckt. Screenshots des Bereichs sind jetzt im Befehlsmenü verfügbar.

  1. Setzen Sie den Fokus auf 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. Beginnen Sie mit der Eingabe von area, wählen Sie Screenshots aus dem Bereich aufnehmen aus und drücken Sie die Eingabetaste.

  3. Bewegen Sie die Maus über den Bereich des Darstellungsbereichs, in dem Sie einen Screenshot erstellen möchten.

    Auswählen des Teils des Darstellungsbereichs für den Screenshot

    Abbildung 11. Auswählen des Teils des Darstellungsbereichs für den Screenshot

Service Worker-Filter im Bereich „Netzwerk“

Geben Sie is:service-worker-initiated oder is:service-worker-intercepted in das Filtertextfeld für den Netzwerkbereich ein, um Anfragen aufzurufen, die von einem Service Worker verursacht (initiated) oder möglicherweise geändert (intercepted).

Filtern nach „is:service-worker-initiated“

Abbildung 12. Nach is:service-worker-initiated filtern

Filtern nach „is:service-worker-unsubscribeed“

Abbildung 13. Nach is:service-worker-intercepted filtern

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

Neuerungen im Bereich „Leistung“

Leistungsaufzeichnungen kennzeichnen jetzt lange Aufgaben und First Paint.

Unter Weniger Hauptthread-Arbeit machen finden Sie ein Beispiel dafür, wie Sie mit dem Bereich „Leistung“ die Leistung beim Seitenaufbau analysieren können.

Lange Aufgaben in Leistungsaufzeichnungen

Leistungsaufzeichnungen enthalten jetzt auch lange Aufgaben.

Den Mauszeiger in einer Leistungsaufzeichnung auf eine lange Aufgabe bewegen

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

First Paint im Bereich „Timings“

Im Bereich Timing einer Leistungsaufzeichnung wird jetzt First Paint markiert.

First Paint im Bereich „Timings“

Abbildung 15. First Paint im Bereich „Timings“

Neue DOM-Anleitung

Unter Erste Schritte mit dem Anzeigen und Ändern des DOMs finden Sie eine praktische Tour zu DOM-bezogenen Funktionen.

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