Neuerungen in den Entwicklertools (Chrome 60)

Kayce Basques

Willkommen! Zu den neuen Funktionen und wichtigen Änderungen in den DevTools in Chrome 60 gehören:

Unten findest du die Videoversion dieser Versionshinweise. Weitere Informationen findest du im Folgenden.

Neue Funktionen

Neuer Bereich „Prüfungen“ mit Lighthouse

Der Bereich „Audits“ wird jetzt von Lighthouse unterstützt. Lighthouse bietet eine umfassende Reihe von Tests zur Messung der Qualität Ihrer Webseiten.

Die Bewertungen oben für Progressive Web-App, Leistung, Barrierefreiheit und Best Practices sind die Gesamtbewertungen für jede dieser Kategorien. Der Rest des Berichts enthält eine Aufschlüsselung der einzelnen Tests, anhand derer Ihre Bewertungen ermittelt wurden. Verbessern Sie die Qualität Ihrer Webseite, indem Sie die fehlgeschlagenen Tests korrigieren.

Lighthouse-Bericht

Abbildung 1. Lighthouse-Bericht

So prüfen Sie eine Seite:

  1. Klicken Sie auf den Tab Audits.
  2. Klicken Sie auf Überprüfung ausführen.
  3. Klicken Sie auf Analyse ausführen. Lighthouse richtet die DevTools so ein, dass ein Mobilgerät emuliert wird, führt eine Reihe von Tests auf der Seite durch und zeigt die Ergebnisse dann im Bereich Audits an.

Lighthouse auf der Google I/O '17

Im DevTools-Vortrag von der Google I/O 2017 unten erfahren Sie mehr über die Integration von Lighthouse in DevTools.

Zu Lighthouse beitragen

Lighthouse ist ein Open-Source-Projekt. Weitere Informationen zur Funktionsweise und dazu, wie Sie dazu beitragen können, finden Sie unten im Lighthouse-Vortrag von der Google I/O '17.

Haben Sie eine Idee für eine Lighthouse-Analyse? Poste sie hier!

Abzeichen von Drittanbietern

Mithilfe von Drittanbieterlogos erhalten Sie mehr Informationen zu den Entitäten, die Netzwerkanfragen auf einer Seite stellen, in der Console protokollieren und JavaScript ausführen.

Bewegen Sie den Mauszeiger im Bereich „Netzwerk“ auf das Logo eines Drittanbieters.

Abbildung 2. Bewegen Sie den Mauszeiger im Bereich „Netzwerk“ auf das Logo eines Drittanbieters.

Den Mauszeiger in der Console auf das Logo eines Drittanbieters bewegen

Abbildung 3. Den Mauszeiger in der Console auf das Logo eines Drittanbieters bewegen

So aktivierst du Badges von Drittanbietern:

  1. Öffnen Sie das Befehlsmenü.
  2. Führen Sie den Befehl Show third party badges aus:

Verwenden Sie auf den Tabs Anrufabfolge und Bottom-Up die Option Nach Produkt gruppieren, um die Leistung der Aufzeichnungsaktivitäten nach den Drittanbietern zu gruppieren, die die Aktivitäten verursacht haben. Im Hilfeartikel Einführung in die Analyse der Laufzeitleistung erfahren Sie, wie Sie die Leistung mit den Entwicklertools analysieren.

Auf dem Tab „Bottom-Up“ nach Produkt gruppieren

Abbildung 4. Auf dem Tab Bottom-Up nach Produkt gruppieren

Neue Geste für „Hier weiter“

Angenommen, Sie sind bei Zeile 25 eines Scripts pausiert und möchten zu Zeile 50 springen. Bisher konnten Sie einen Haltepunkt in Zeile 50 setzen oder mit der rechten Maustaste auf die Zeile klicken und Bis hier fortfahren auswählen. Jetzt gibt es jedoch eine schnellere Geste für diesen Workflow.

Wenn Sie den Code durchgehen, halten Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt und klicken Sie dann, um mit dieser Codezeile fortzufahren. In den DevTools werden die Zielseiten, zu denen gesprungen werden kann, blau hervorgehoben.

Weiter zu

Abbildung 5. Weiter bis hier

Unter Erste Schritte mit dem Debuggen von JavaScript finden Sie die Grundlagen des Debuggens in den DevTools.

Asynchrone Aufrufe untersuchen

Ein wichtiges Thema für das DevTools-Team in naher Zukunft ist es, das Debuggen von asynchronem Code vorhersehbar zu machen und Ihnen einen vollständigen Verlauf der asynchronen Ausführung zur Verfügung zu stellen.

Die neue Geste für „Hier weiter“ funktioniert auch mit asynchronem Code. Wenn Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt halten, werden in den Entwicklertools anspringbare asynchrone Ziele grün hervorgehoben.

In der Demo unten aus dem DevTools-Vortrag auf der I/O sehen Sie ein Beispiel.

Änderungen

Informativere Objektvorschauen in der Console

Bisher wurde in der Console nur Object angezeigt, wenn Sie ein Objekt protokolliert oder ausgewertet haben. Das war nicht besonders hilfreich. Jetzt enthält die Console mehr Informationen zum Inhalt des Objekts.

So wurde in der Console bisher eine Objektvorschau angezeigt

Abbildung 6. So wurde in der Console bisher eine Objektvorschau angezeigt

So sehen Objekte in der Console jetzt aus

Abbildung 7. So sehen Objekte in der Console jetzt aus

Informativeres Kontextauswahlmenü in der Console

Das Kontextauswahlmenü in der Console enthält jetzt mehr Informationen zu den verfügbaren Kontexten.

  • Der Titel beschreibt, was die einzelnen Elemente sind.
  • Der Untertitel unter dem Titel beschreibt die Domain, aus der der Artikel stammt.
  • Bewegen Sie den Mauszeiger auf einen iFrame-Kontext, um ihn im Darstellungsbereich hervorzuheben.

Das neue Menü „Kontextauswahl“

Abbildung 8. Wenn Sie im neuen Kontextauswahlmenü den Mauszeiger auf einen Iframe bewegen, wird er im Darstellungsbereich hervorgehoben.

Echtzeitaktualisierungen auf dem Tab „Abdeckung“

Beim Aufzeichnen der Codeabdeckung in Chrome 59 wurde auf dem Tab Abdeckung nur „Aufzeichnen…“ angezeigt, ohne dass ersichtlich war, welcher Code verwendet wurde. Auf dem Tab Abdeckung sehen Sie jetzt in Echtzeit, welcher Code verwendet wird.

Seiten über den alten Tab „Abdeckung“ laden und mit ihnen interagieren

Abbildung 9. Seite über den alten Tab Abdeckung laden und damit interagieren

Seiten über den neuen Tab „Abdeckung“ laden und damit interagieren

Abbildung 10. Seiten über den neuen Tab Abdeckung laden und damit interagieren

Einfachere Optionen für die Netzwerkdrosselung

Die Menüs für die Netzwerkdrosselung in den Bereichen Netzwerk und Leistung wurden vereinfacht und umfassen nur noch drei Optionen: Offline, Langsames 3G, das in Ländern wie Indien üblich ist, und Schnelles 3G, das in Ländern wie den USA üblich ist.

Die neuen Optionen für die Netzwerkdrosselung

Abbildung 11. Die neuen Optionen für die Netzwerkdrosselung

Die Optionen für die Drosselung wurden an andere Tools zur Drosselung auf Kernelebene angepasst. In den DevTools werden die Messwerte für Latenz, Download und Upload nicht mehr neben den einzelnen Optionen angezeigt, da diese Werte irreführend waren. Das Ziel ist es, die tatsächliche Nutzung der einzelnen Optionen abzubilden.

Asynchrone Stacks standardmäßig aktiviert

Das Kästchen Async wurde aus dem Bereich Quellen entfernt. Async-Stacktraces sind jetzt standardmäßig aktiviert. Bisher war diese Option aufgrund des Leistungsaufwands optional. Der Overhead ist jetzt so gering, dass die Funktion standardmäßig aktiviert werden kann. Wenn Sie asynchrone Stack-Traces deaktivieren möchten, können Sie dies in den Einstellungen tun oder den Befehl Do not capture async stack traces im Befehlsmenü ausführen.

DevTools auf der Google I/O 2017

Sehen Sie sich unten den Vortrag des legendären Paul Irish an, um mehr darüber zu erfahren, woran das DevTools-Team im letzten Jahr gearbeitet hat und welche großen Themen es in naher Zukunft angehen wird.

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.

Neu in den DevTools

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