Neuerungen in den Entwicklertools (Chrome 73)

Das ist neu bei den Entwicklertools in Chrome 73.

Videoversion dieser Versionshinweise

Logpoints

Logpoints verwenden, um Nachrichten in der Console zu protokollieren, ohne deinen Code mit console.log() zu überladen Anrufe.

So fügen Sie einen Logpoint hinzu:

1. Klicken Sie mit der rechten Maustaste auf die Zeilennummer der Zeile, der Sie den Logpoint hinzufügen möchten.

   

   Abbildung 1. Logpoint hinzufügen

2. Wählen Sie Logpoint hinzufügen aus. Der Breakpoint Editor wird angezeigt.

   

   Abbildung 2. Breakpoint-Editor

3. Geben Sie im Breakpoint Editor den Ausdruck ein, den Sie in der Console protokollieren möchten.

   

   Abbildung 3. Logpoint-Ausdruck eingeben

   Tipp: Wenn Sie eine Variable abmelden (z.B. TodoApp), müssen Sie sie in ein Objekt einbetten (z.B. {TodoApp}), um den Namen und Wert in der Console abzumelden. Siehe Objekte immer protokollieren und Kurzschrift für Objekteigenschaftswert, um mehr über diese Syntax zu erfahren.

4. Drücken Sie zum Speichern die Eingabetaste oder klicken Sie außerhalb des Breakpoint Editor. Das orangefarbene Logo über der Zeilennummer steht für den Logpoint.

   

   Abbildung 4. Ein orangefarbenes Logpoint-Logo in Zeile 174

Bei der nächsten Ausführung der Zeile protokolliert DevTools das Ergebnis des Logpoint-Ausdrucks im Konsole.

Abbildung 5. Das Ergebnis des Logpoint-Ausdrucks in der Console

Unter Chromium-Problem 700519 können Sie Fehler melden oder Verbesserungen vorschlagen.

Detaillierte Kurzinfos im Prüfmodus

Bei der Prüfung eines Knotens zeigt die Entwicklertools jetzt eine erweiterte Kurzinfo mit häufig wichtigen wie Schriftgröße, Schriftfarbe, Kontrastverhältnis und die Abmessungen des Boxmodells.

Abbildung 6. Knoten prüfen

So prüfen Sie einen Knoten:

1. Klicken Sie auf Prüfen .

   Tipp: Bewegen Sie den Mauszeiger auf Untersuchen, um die Tastenkombination aufzurufen.

2. Bewegen Sie den Mauszeiger im Darstellungsbereich auf den Knoten.

Daten zur Codeabdeckung exportieren

Daten zur Codeabdeckung können jetzt als JSON-Datei exportiert werden. Die JSON-Datei sieht so aus:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url ist die URL der CSS- oder JavaScript-Datei, die von den Entwicklertools analysiert wurde. ranges beschreibt die des Codes, die verwendet wurden. start ist der anfängliche Offset für einen verwendeten Bereich. end ist der End-Offset. text ist der vollständige Text der Datei.

Im obigen Beispiel entspricht der Bereich 0 bis 21 body { margin: 1em; } und der Bereich 45 67 entspricht h1 { color: #317EFB; }. Der erste und der letzte Regelsatz wurden und die zweite nicht.

So analysieren Sie, wie viel Code beim Seitenaufbau verwendet wird, und exportieren die Daten:

1. Drücken Sie Strg + Umschalttaste + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen.

   

   Abbildung 7. Das Befehlsmenü

2. Beginnen Sie mit der Eingabe von coverage, wählen Sie Abdeckung anzeigen aus und drücken Sie die Eingabetaste.

   

   Abbildung 8. Abdeckung einblenden

   Der Tab Abdeckung wird geöffnet.

   

   Abbildung 9. Tab „Abdeckung“

3. Klicken Sie auf Neu laden . DevTools wird die Seite neu geladen und erfasst, wie viel Code im Vergleich zur Versandmenge verwendet wird.

4. Klicken Sie auf Exportieren , um die Daten als JSON-Datei an.

Die Codeabdeckung ist auch in Puppeteer verfügbar, einem Browser-Automatisierungstool, das von den Entwicklertools verwaltet wird Team. Weitere Informationen

Unter Chromium-Problem 717195 können Sie Fehler melden oder Verbesserungen vorschlagen.

Mit der Tastatur in der Konsole navigieren

Sie können jetzt über die Tastatur in der Konsole navigieren. Hier ein Beispiel:

Durch Drücken von Umschalttaste + Tabulatortaste wird die letzte Nachricht (oder das Ergebnis einer ausgewerteten Nachricht) hervorgehoben. Ausdruck). Wenn die Nachricht Links enthält, wird der letzte Link zuerst hervorgehoben. Pressen Mit der Eingabetaste wird der Link in einem neuen Tab geöffnet. Durch Drücken der Linkspfeil-Taste wird die die gesamte Nachricht senden (siehe Abbildung 13).

Abbildung 11. Links fokussieren

Durch Drücken des Aufwärtspfeils wird der nächste Link hervorgehoben.

Abbildung 12. Anderen Link fokussieren

Durch erneutes Drücken des Aufwärtspfeils wird die gesamte Nachricht hervorgehoben.

Abbildung 13. Fokus auf eine ganze Nachricht legen

Durch Drücken des Rechtspfeils können Sie einen minimierten Stacktrace (oder ein Objekt, Array usw.) maximieren. aktiviert).

Abbildung 14. Minimierten Stacktrace maximieren

Wenn Sie den Linkspfeil drücken, wird die maximierte Nachricht oder das maximierte Ergebnis minimiert.

Unter Chromium-Problem 865674 können Sie Fehler melden oder Verbesserungen vorschlagen.

AAA-Kontrastverhältnis in der Farbauswahl

Die Farbauswahl zeigt jetzt eine zweite Zeile an, die angibt, welche Farben das AAA-Kontrastverhältnis erfüllen. Empfehlung. Die AA-Linie gibt es seit Chrome 65.

Abbildung 15. Die AA-Linie (oben) und die AAA-Linie (unten)

Die Farben zwischen den beiden Linien stellen Farben dar, die der AA-Empfehlung, aber nicht der AAA entsprechen. Empfehlung. Wenn eine Farbe der AAA-Empfehlung entspricht, ist alles auf der gleichen Seite dieser Farbe die Empfehlung erfüllt. In Abbildung 15 ist z. B. alles unterhalb der unteren Zeile AAA, und alles oberhalb der oberen Linie entspricht nicht einmal der AA-Empfehlung.

Tipp: Im Allgemeinen können Sie die Lesbarkeit Ihrer Seiten verbessern, indem Sie die Textmenge erhöhen. das der AAA-Empfehlung entspricht. Wenn die AAA-Empfehlung für einige Nutzer*innen versuchen Sie zumindest, der AA-Empfehlung zu entsprechen.

Weitere Informationen zum Zugriff auf diese Funktion finden Sie unter Kontrastverhältnis in der Farbauswahl.

Unter Chromium-Problem 879856 können Sie Fehler melden oder Verbesserungen vorschlagen.

Benutzerdefinierte Überschreibungen für die Standortbestimmung speichern

Auf dem Tab „Sensoren“ können Sie jetzt benutzerdefinierte Überschreibungen der Standortbestimmung speichern.

1. Drücken Sie Strg + Umschalttaste + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen.

   

   Abbildung 16. Das Befehlsmenü

2. Geben Sie sensors ein, wählen Sie Sensoren anzeigen aus und drücken Sie die Eingabetaste. Der Tab Sensoren wird geöffnet.

   

   Abbildung 17. Tab „Sensoren“

3. Klicken Sie im Abschnitt Standortbestimmung auf Verwalten. Einstellungen > Daraufhin wird Standortstandorte geöffnet.

   

   Abbildung 18. Tab „Geolocations“ in den Einstellungen

4. Klicken Sie auf Standort hinzufügen.

5. Geben Sie einen Standortnamen sowie einen Breiten- und Längengrad ein und klicken Sie dann auf Hinzufügen.

   

   Abbildung 19. Benutzerdefinierte Standortbestimmung hinzufügen

Unter Chromium-Problem 649657 können Sie Fehler melden oder Verbesserungen vorschlagen.

Code Folding

In den Bereichen Quellen und Netzwerk wird jetzt Code Folding unterstützt.

Abbildung 20. Die Zeilen 54 bis 65 wurden gefaltet

So aktivieren Sie Code Folding:

1. Drücken Sie F1, um die Einstellungen zu öffnen.
2. Unter Einstellungen > Einstellungen > Quellen ermöglichen das Falten von Code.

So falten Sie einen Codeblock:

1. Bewegen Sie die Maus über die Zeilennummer, an der der Block beginnt.
2. Klicken Sie auf Falten .

Unter Chromium-Problem 328431 können Sie Fehler melden oder Verbesserungen vorschlagen.

Tab „Nachrichten“

Der Tab Frames wurde in Messages umbenannt. Dieser Tab ist nur in der Netzwerk, wenn eine WebSocket-Verbindung geprüft wird.

Abbildung 21. Tab „Nachrichten“

Unter Chromium-Problem 802182 können Sie Fehler melden oder Verbesserungen vorschlagen.

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