Neuerungen in den Entwicklertools (Chrome 73)

Kayce Basques

Das ist neu in 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 Nummer der Zeile, in der Sie den Logpoint hinzufügen möchten.

    Logpoint hinzufügen

    Abbildung 1. Logpoint hinzufügen

  2. Wählen Sie Logpoint hinzufügen aus. Das Pop-up-Fenster Haltepunkt-Editor wird angezeigt.

    Haltepunkteditor

    Abbildung 2. Haltepunkteditor

  3. Geben Sie im Haltepunkteditor den Ausdruck ein, den Sie in der Konsole protokollieren möchten.

    Logpoint-Ausdruck eingeben

    Abbildung 3. Logpoint-Ausdruck eingeben

    Tipp Wenn Sie eine Variable abmelden (z.B. TodoApp), müssen Sie sie in ein Objekt (z.B. {TodoApp}) einfügen, damit ihr Name und Wert in der Console abgemeldet werden. Weitere Informationen zu dieser Syntax finden Sie unter Objekte immer protokollieren und Kürzel für Objektattributwerte.

  4. Drücken Sie zum Speichern die Eingabetaste oder klicken Sie außerhalb des Haltepunkt-Editors. Die orangefarbene Kennzeichnung über der Zeilennummer steht für den Logpoint.

    Orangefarbenes Logpoint-Logo in Zeile 174

    Abbildung 4. Orangefarbenes Logpoint-Logo in Zeile 174

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

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 erweiterte Kurzinfo angezeigt, die häufig wichtige Informationen wie Schriftgröße, Schriftfarbe, Kontrastverhältnis und Rahmenmodelldimensionen enthält.

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 entsprechende Tastenkombination zu sehen.

  2. Bewegen Sie im Darstellungsbereich den Mauszeiger 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 die Entwicklertools analysiert haben. ranges beschreibt die verwendeten Teile des Codes. start ist der Start-Offset für einen verwendeten Bereich. end ist der End-Offset. text ist der vollständige Text der Datei.

Im Beispiel oben entspricht der Bereich 0 bis 21 body { margin: 1em; } und der Bereich 45 bis 67 h1 { color: #317EFB; }. Es wurden also der erste und der letzte Regelsatz 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 anzeigen

    Abbildung 8. Abdeckung anzeigen

    Der Tab Abdeckung wird geöffnet.

    Tab „Abdeckung“

    Abbildung 9. Tab „Abdeckung“

  3. Klicken Sie auf Aktualisieren Aktualisieren. Die Entwicklertools laden die Seite neu und erfassen, wie viel Code verwendet wird und wie viel ausgeliefert wird.

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

Codeabdeckung ist auch in Puppeteer verfügbar, einem Browserautomatisierungstool, das vom DevTools-Team gepflegt wird. Siehe Abdeckung.

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

Mit der Tastatur in der Konsole navigieren

Sie können jetzt die Tastatur verwenden, um in der Konsole zu 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. Wenn Sie die Eingabetaste drücken, wird der Link in einem neuen Tab geöffnet. Durch Drücken der Linkspfeiltaste wird die gesamte Nachricht markiert (siehe Abbildung 13).

Link fokussieren

Abbildung 11. Link fokussieren

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

Weiteren Link hervorheben

Abbildung 12. Weiteren Link hervorheben

Drücken Sie den Aufwärtspfeil noch einmal, um die gesamte Nachricht hervorzuheben.

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, können Sie eine maximierte Nachricht oder ein maximiertes Ergebnis minimieren.

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

AAA-Kontrastverhältnislinie im Color Picker

Die Farbauswahl zeigt jetzt eine zweite Zeile an, die angibt, welche Farben dem AAA-Kontrastverhältnis entsprechen. Die AA-Linie gibt es seit Chrome 65.

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

Abbildung 15. AA-Linie (oben) und 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 auch alles auf derselben Seite dieser Farbe der Empfehlung. In Abbildung 15 ist alles unterhalb der unteren Linie AAA-Werte. 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, die der AAA-Empfehlung entspricht. Wenn die AAA-Empfehlung aus irgendeinem Grund nicht erfüllt werden kann, versuchen Sie, zumindest die AA-Empfehlung zu erfüllen.

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 der 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 Bereich Standortbestimmung auf Verwalten. Daraufhin wird Einstellungen > Standorte geöffnet.

    Der Tab „Standorte“ in den Einstellungen

    Abbildung 18: Der Tab „Standorte“ 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 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

Die Bereiche Sources (Quellen) und Network (Netzwerk) unterstützen jetzt Code Folding.

Die Linien 54 bis 65 wurden gefaltet.

Abbildung 20: Die Linien 54 bis 65 wurden gefaltet.

So aktivieren Sie die Funktion „Code Folding“:

  1. Drücken Sie F1, um die Einstellungen zu öffnen.
  2. Aktivieren Sie unter Einstellungen > Einstellungen > Quellen die Option Code Folding.

So falten Sie einen Codeblock:

  1. Bewegen Sie den Mauszeiger auf die Nummer der Zeile, in 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 Nachrichten umbenannt. Dieser Tab ist nur im Bereich Netzwerk verfügbar, wenn die WebSocket-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 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