Neuerungen in den Entwicklertools (Chrome 73)

Kayce Basques

Hier sind die Neuigkeiten in den DevTools 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, an der Sie den Logpunkt hinzufügen möchten.

   

   Abbildung 1. Logpoint hinzufügen

2. Wählen Sie Logpunkt hinzufügen aus. Der Haltepunkteditor wird geöffnet.

   

   Abbildung 2. Haltepunkt-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 (z.B. TodoApp) trennen möchten, setzen Sie sie in ein Objekt (z.B. {TodoApp}), um ihren Namen und Wert in der Console zu trennen. Weitere Informationen zu dieser Syntax finden Sie unter Objekte immer erfassen und Kurzschreibweise für Objektattributwerte.

4. Drücken Sie die Eingabetaste oder klicken Sie außerhalb des Breakpoint-Editors, um ihn zu speichern. Das orangefarbene Logo über der Zeilennummer steht für den Logpoint.

   

   Abbildung 4. Ein orangefarbenes Logpoint-Logo in Zeile 174

Wenn die Zeile das nächste Mal ausgeführt wird, wird das Ergebnis des Logpoint-Ausdrucks in den Entwicklertools in der Console protokolliert.

Abbildung 5. Das Ergebnis des Logpunkt-Ausdrucks in der Konsole

Unter Chromium-Problem 700519 können Sie Fehler melden oder Verbesserungsvorschläge machen.

Detaillierte Kurzinfos im Prüfmodus

Wenn Sie einen Knoten prüfen, wird in den DevTools jetzt eine erweiterte Kurzinfo mit häufig wichtigen Informationen wie Schriftgröße, Schriftfarbe, Kontrastverhältnis und Boxmodell-Abmessungen angezeigt.

Abbildung 6. Knoten prüfen

So prüfen Sie einen Knoten:

1. Klicken Sie auf Prüfen .

   Tipp: Bewegen Sie den Mauszeiger auf Prüfen, um die Tastenkombination zu sehen.

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

Abdeckungsdaten für Codes 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 Startoffset für einen verwendeten Bereich. end ist der Endversatz. 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 h1 { color: #317EFB; }. Mit anderen Worten: Die erste und die letzte Regel wurden verwendet, die mittlere nicht.

So analysieren Sie, wie viel Code beim Laden der Seite verwendet wird, und exportieren die Daten:

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

   

   Abbildung 7. Das Befehlsmenü

2. Geben Sie coverage ein, 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 Aktualisieren . In DevTools wird die Seite neu geladen und es wird aufgezeichnet, wie viel Code verwendet wird, verglichen mit der Menge, die bereitgestellt wird.

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

Die Codeabdeckung ist auch in Puppeteer verfügbar, einem Browser-Automatisierungstool, das vom DevTools-Team gepflegt wird. Weitere Informationen finden Sie unter Abdeckung.

Unter Chromium-Problem 717195 können Sie Fehler melden oder Verbesserungsvorschläge machen.

In der Console mit der Tastatur navigieren

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

Wenn Sie die Umschalttaste + Tabulatortaste drücken, wird der Fokus auf die letzte Nachricht (oder das Ergebnis eines ausgewerteten Ausdrucks) gelegt. Wenn die Nachricht Links enthält, wird zuerst der letzte Link hervorgehoben. Durch Drücken der Eingabetaste wird der Link in einem neuen Tab geöffnet. Wenn Sie die Linkspfeiltaste drücken, wird die gesamte Nachricht markiert (siehe Abbildung 13).

Abbildung 11. Link fokussieren

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

Abbildung 12. Fokus auf einen anderen Link legen

Wenn Sie noch einmal auf die Aufwärtspfeiltaste drücken, wird der gesamte Text fokussiert.

Abbildung 13. Fokus auf eine ganze Nachricht legen

Wenn Sie den Rechtspfeil drücken, wird ein minimierter Stack-Trace (oder ein Objekt, ein Array usw.) maximiert.

Abbildung 14. Minimierten Stacktrace maximieren

Wenn Sie die Pfeiltaste nach links drücken, wird eine maximierte Nachricht oder ein maximiertes Ergebnis minimiert.

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

Linie für das AAA-Kontrastverhältnis in der Farbauswahl

In der Farbauswahl wird jetzt eine zweite Zeile angezeigt, die angibt, welche Farben die AAA-Empfehlung für das Kontrastverhältnis erfüllen. Die AA-Linie gibt es seit Chrome 65.

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

Farben zwischen den beiden Linien entsprechen der AA-Empfehlung, erfüllen aber nicht die AAA-Empfehlung. Wenn eine Farbe die AAA-Empfehlung erfüllt, erfüllt auch alles auf derselben Seite dieser Farbe die 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 den Textumfang erhöhen, der 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 Standortermittlung 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 Bereich Standortbestimmung auf Verwalten. Die Seite Einstellungen > Standortermittlung wird geöffnet.

   

   Abbildung 18. Tab „Geolocations“ in den Einstellungen

4. Klicken Sie auf Standort hinzufügen.

5. Geben Sie einen Ortsnamen, einen Breiten- und einen Längengrad ein und klicken Sie auf Hinzufügen.

   

   Abbildung 19 Benutzerdefinierte Geolokalisierung hinzufügen

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

Code Folding

Die Bereiche Quellen und Netzwerk unterstützen jetzt das Code-Falten.

Abbildung 20. Die Zeilen 54 bis 65 wurden gefaltet

So aktivieren Sie Code Folding:

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

So minimieren Sie einen Codeblock:

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

Unter Chromium-Problem 328431 können Sie Fehler melden oder Verbesserungsvorschläge machen.

Tab „Nachrichten“

Der Tab Frames wurde in Nachrichten umbenannt. Dieser Tab ist nur im Bereich Netzwerk verfügbar, wenn eine Websocket-Verbindung geprüft wird.

Abbildung 21 Tab „Nachrichten“

Unter Chromium-Problem 802182 können Sie Fehler melden oder Verbesserungsvorschläge machen.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Ü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 dies tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.

• Unter crbug.com können Sie uns Feedback und Funktionsanfragen senden.
• Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf more_vert Weitere Optionen > Hilfe > Entwicklertools-Problem melden.
• Tweeten Sie an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.

Neu in DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.