Neuerungen in den Entwicklertools (Chrome 73)

Kayce Basques

Das ist neu bei den Entwicklertools in Chrome 73.

Videoversion dieser Versionshinweise

Logpoints

Mit Logpoints können Sie Nachrichten in der Console protokollieren, ohne Ihren Code mit console.log()-Aufrufen zu überladen.

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.

    Logpoint hinzufügen

    Abbildung 1. Logpoint hinzufügen

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

    Breakpoint-Editor

    Abbildung 2. Breakpoint-Editor

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

    Logpoint-Ausdruck eingeben

    Abbildung 3. Logpoint-Ausdruck eingeben

    Tipp: Wenn Sie eine Variable (z.B. TodoApp) abmelden, müssen Sie sie in ein Objekt einfügen (z.B. {TodoApp}), um ihren Namen und Wert in der Console abzumelden. Weitere Informationen zu dieser Syntax finden Sie unter Objekte immer protokollieren und Kurzfassung für Objekteigenschaftswerte.

  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.

    Ein orangefarbenes Logpoint-Logo in Zeile 174

    Abbildung 4. Ein orangefarbenes Logpoint-Logo in Zeile 174

Bei der nächsten Ausführung der Zeile protokolliert die Entwicklertools das Ergebnis des Logpoint-Ausdrucks in der Console.

Das Ergebnis des Logpoint-Ausdrucks in der Console

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 wird in den Entwicklertools jetzt eine maximierte Kurzinfo mit häufig wichtigen Informationen wie Schriftgröße, Schriftfarbe, Kontrastverhältnis und Abmessungen des Boxmodells angezeigt.

Knoten prüfen

Abbildung 6. Knoten prüfen

So prüfen Sie einen Knoten:

  1. Klicken Sie auf Prüfen Knoten 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 verwendeten Codeabschnitte. 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 bis 67 entspricht h1 { color: #317EFB; }. Mit anderen Worten, der erste und der letzte Regelsatz wurden verwendet, der mittlere 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.

    Das Befehlsmenü

    Abbildung 7. Das Befehlsmenü

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

    Abdeckung einblenden

    Abbildung 8. Abdeckung einblenden

    Der Tab Abdeckung wird geöffnet.

    Tab „Abdeckung“

    Abbildung 9. Tab „Abdeckung“

  3. Klicken Sie auf Neu laden Aktualisieren. Die Entwicklertools laden die Seite neu und erfassen, wie viel Code im Vergleich zum Versandvolumen verwendet wird.

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

Die Codeabdeckung ist auch in Puppeteer verfügbar, einem Browserautomatisierungstool, das vom Entwicklertools-Team verwaltet wird. 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 eines ausgewerteten Ausdrucks) hervorgehoben. Wenn die Nachricht Links enthält, wird der letzte Link zuerst hervorgehoben. Durch Drücken der Eingabetaste wird der Link in einem neuen Tab geöffnet. Durch Drücken der Linkspfeiltaste wird die gesamte Nachricht hervorgehoben (siehe Abbildung 13).

Links fokussieren

Abbildung 11. Links fokussieren

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

Anderen Link fokussieren

Abbildung 12. Anderen Link fokussieren

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

Fokus auf eine ganze Nachricht legen

Abbildung 13. Fokus auf eine ganze Nachricht legen

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

Minimierten Stacktrace maximieren

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 der Empfehlung für das AAA-Kontrastverhältnis entsprechen. Die AA-Linie gibt es seit Chrome 65.

Die AA-Linie (oben) und die AAA-Linie (unten)

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

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

Tipp: Im Allgemeinen können Sie die Lesbarkeit Ihrer Seiten verbessern, indem Sie die Textmenge erhöhen, die der AAA-Empfehlung entspricht. Wenn die AAA-Empfehlung aus irgendeinem Grund nicht eingehalten werden kann, versuchen Sie zumindest, die AA-Empfehlung zu erfüllen.

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.

    Das Befehlsmenü

    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.

    Tab „Sensoren“

    Abbildung 17. Tab „Sensoren“

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

    Tab „Geolocations“ in den Einstellungen

    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.

    Benutzerdefinierte Standortbestimmung 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.

Die Zeilen 54 bis 65 wurden gefaltet

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. Aktivieren Sie unter Settings > Preferences (Einstellungen) > Sources (Quellen) die Option Code Folding.

So falten Sie einen Codeblock:

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

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 im Bereich Netzwerk verfügbar, wenn eine Web-Socket-Verbindung geprüft wird.

Tab „Nachrichten“

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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