Neuerungen in den Entwicklertools (Chrome 60)

Willkommen! Zu den neuen Funktionen und wichtigen Änderungen, die in Chrome 60 in den Entwicklertools eingeführt werden, gehören:

• Ein neuer Bereich „Audits“ mit Tests für progressive Web-Apps, Leistung, Barrierefreiheit und Best Practices.
• Drittanbieter-Badges: Hier können Sie herausfinden, welche Drittanbieter Netzwerkanfragen stellen, in der Konsole protokollieren und JavaScript ausführen.
• Weiter bis hier Eine neue Geste, die Ihren JavaScript-Debugging-Workflow beschleunigen kann.
• Vorhersehbare Fehlersuche für asynchrones JavaScript:
• Objektvorschauen in der Console
• Echtzeitaktualisierungen auf dem Tab „Abdeckung“:
• Neues Menü zum Auswählen von Kontexten in der Console:
• Einfachere Optionen für die Netzwerkdrosselung:
• Async-Stacktraces sind standardmäßig aktiviert.

Unten finden Sie eine Videoversion dieser Versionshinweise. Sie können aber auch weiterlesen, um mehr zu erfahren.

Neue Funktionen

Neuer Bereich „Prüfungen“ auf Grundlage von Lighthouse

Der Bereich „Prüfungen“ basiert jetzt auf Lighthouse. Lighthouse bietet eine umfassende Reihe von Tests zur Messung der Qualität Ihrer Webseiten.

Die Werte oben für Progressive Web-App, Leistung, Barrierefreiheit und Best Practices sind Ihre zusammengefassten Werte für die einzelnen Kategorien. Im restlichen Teil des Berichts werden die einzelnen Tests aufgeschlüsselt, die zur Ermittlung Ihrer Ergebnisse durchgeführt wurden. Verbessern Sie die Qualität Ihrer Webseite, indem Sie die fehlgeschlagenen Tests beheben.

Abbildung 1. Lighthouse-Bericht

So prüfen Sie eine Seite:

1. Klicken Sie auf den Tab Prüfungen.
2. Klicken Sie auf Perform an audit (Überprüfung durchführen).
3. Klicken Sie auf Prüfung ausführen. Lighthouse konfiguriert die DevTools so, dass ein Mobilgerät emuliert wird, führt eine Reihe von Tests für die Seite aus und zeigt die Ergebnisse dann im Bereich Audits an.

Lighthouse bei der Google I/O 2017

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 zur Möglichkeit, dazu beizutragen, finden Sie im Lighthouse-Vortrag von Google I/O 2017 unten.

Sie haben eine Idee für einen Lighthouse-Audit? Poste es hier!

Drittanbieter-Badges

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

Abbildung 2. Wenn Sie den Mauszeiger im Netzwerkbereich auf ein Drittanbieter-Logo bewegen

Abbildung 3. Mit dem Mauszeiger auf ein Drittanbieterlogo in der Console zeigen

So aktivieren Sie Drittanbieter-Badges:

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

Mit der Option Nach Produkt gruppieren auf den Tabs Aufrufbaum und Bottom-up können Sie die Leistungserfassung nach den Drittanbieterentitäten gruppieren, die die Aktivitäten verursacht haben. Weitere Informationen zum Analysieren der Laufzeitleistung mit den Entwicklertools

Abbildung 4. Nach Produkt gruppieren auf dem Tab Bottom-up

Neue Geste für „Bis hierher fortsetzen“

Angenommen, Sie haben ein Skript bei Zeile 25 pausiert und möchten zu Zeile 50 springen. Bisher konnten Sie einen Haltepunkt in Zeile 50 festlegen oder mit der rechten Maustaste auf die Zeile klicken und Continue to here (Bis hierher fortfahren) auswählen. Jetzt gibt es eine schnellere Geste für diesen Workflow.

Halten Sie beim Durchlaufen von Code die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt und klicken Sie dann, um mit dieser Codezeile fortzufahren. DevTools hebt die Sprungziele blau hervor.

Abbildung 5. Weiter bis hier

Erste Schritte beim Debuggen von JavaScript

Asynchroner Code

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 zu bieten.

Die neue Geste für „Bis hierher fortsetzen“ funktioniert auch mit asynchronem Code. Wenn Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt halten, werden in den DevTools asynchrone Ziele, zu denen gesprungen werden kann, grün hervorgehoben.

Im folgenden Demo aus dem DevTools-Vortrag auf der I/O finden 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 ist nicht besonders hilfreich. In der Console finden Sie jetzt weitere Informationen zum Inhalt des Objekts.

Abbildung 6. So wurde die Konsole zum Vorschauen von Objekten verwendet

Abbildung 7. Vorschau von Objekten in der Console

Informativeres Kontextauswahlmenü in der Console

Das Kontextauswahlmenü der Console bietet jetzt mehr Informationen zu den verfügbaren Kontexten.

• Der Titel beschreibt, was das jeweilige Element ist.
• Der Untertitel unter dem Titel beschreibt die Domain, aus der das Element stammt.
• Bewegen Sie den Mauszeiger auf einen iFrame-Kontext, um ihn im Darstellungsbereich hervorzuheben.

Abbildung 8. Wenn Sie den Mauszeiger im neuen Menü „Kontextauswahl“ auf einen iFrame bewegen, wird er im Viewport hervorgehoben.

Echtzeitaktualisierungen auf dem Tab „Abdeckung“

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

Abbildung 9. Seite mit dem alten Tab Abdeckung laden und mit ihr interagieren

Abbildung 10. Seite mit dem 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 enthalten nur noch drei Optionen: Offline, Langsame 3G (in Ländern wie Indien üblich) und Schnelle 3G (in Ländern wie den USA üblich).

Abbildung 11. Die neuen Optionen für die Netzwerkdrosselung

Die Drosselungsoptionen wurden angepasst, um mit anderen Drosselungstools auf Kernelebene übereinzustimmen. In 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, die tatsächliche Erfahrung mit jeder Option abzubilden.

Async-Stacks standardmäßig aktiviert

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

DevTools bei der Google I/O 2017

Im folgenden Vortrag von Paul Irish erfahren Sie mehr darüber, woran das DevTools-Team im letzten Jahr gearbeitet hat und welche großen Themen in naher Zukunft anstehen.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.