Neuerungen in den Entwicklertools (Chrome 73)

Kayce Basques

Hier sind die Neuigkeiten in den DevTools in Chrome 73.

Videoversion dieser Versionshinweise

Logpoints

Mit Logpunkten 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 Haltepunkt-Editor 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 die Änderungen zu speichern. Das orangefarbene Symbol ü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 Inspektionsmodus

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 in den DevTools 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 die Tastatur zum Navigieren in der Console verwenden. 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. Wenn Sie die Eingabetaste drücken, 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

Wenn Sie die Aufwärtspfeiltaste drücken, wird der Fokus auf den nächsten Link gelegt.

Abbildung 12. Fokus auf einen anderen Link legen

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

Abbildung 13. Fokus auf eine gesamte Nachricht legen

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

Abbildung 14. Maximieren eines minimierten Stack-Traces

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 ist seit Chrome 65 verfügbar.

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 ist beispielsweise alles unterhalb der unteren Linie AAA und alles oberhalb der oberen Linie erfüllt nicht einmal die 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 Verbesserungsvorschläge machen.

Benutzerdefinierte Überschreibungen für die Standortermittlung speichern

Auf dem Tab „Sensoren“ können Sie jetzt benutzerdefinierte Überschreibungen für die Standortermittlung speichern.

1. Drücken Sie Strg + Umschalt + 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 Der Tab „Sensoren“

3. Klicken Sie im Bereich Standortbestimmung auf Verwalten. Die Seite Einstellungen > Standortermittlung wird geöffnet.

   

   Abbildung 18. Tab „Standortermittlung“ 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 den Mauszeiger auf die Zeilennummer, an der der Block beginnt.
2. Klicken Sie auf Zuklappen .

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 Verbesserungen vorschlagen.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

• Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
• Melden Sie ein DevTools-Problem über das Dreipunkt-Menü more_vert Weitere Optionen > Hilfe > DevTools-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 den DevTools

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