Neuerungen in den Entwicklertools (Chrome 60)

Kayce Basques

Herzlich willkommen! Zu den neuen Funktionen und wichtigen Änderungen der Entwicklertools in Chrome 60 gehören:

Sehen Sie sich die Videoversion dieser Versionshinweise an oder lesen Sie weiter, um mehr zu erfahren.

Neue Funktionen

Neuer Prüfungsbereich mit Lighthouse

Das Audits-Steuerfeld wird jetzt von Lighthouse unterstützt. Lighthouse bietet eine umfassende Reihe von Tests zum Messen der Qualität Ihrer Webseiten.

Die oben aufgeführten Punktzahlen für Progressive Web-App, Leistung, Barrierefreiheit und Best Practices sind Ihre Gesamtpunktzahlen für jede dieser Kategorien. Der Rest des Berichts enthält eine Aufschlüsselung der einzelnen Tests, die Ihre Ergebnisse bestimmt haben. Verbessern Sie die Qualität Ihrer Webseite, indem Sie die fehlgeschlagenen Tests korrigieren.

Ein Lighthouse-Bericht

Abbildung 1. Ein Lighthouse-Bericht

So prüfen Sie eine Seite:

  1. Klicken Sie auf den Tab Audits.
  2. Klicken Sie auf Audit durchführen.
  3. Klicken Sie auf Audit ausführen. Lighthouse richtet die Entwicklertools ein, um ein Mobilgerät zu emulieren, 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 17

Im folgenden Vortrag zu Entwicklertools von der Google I/O 17 erfahren Sie mehr über die Einbindung von Lighthouse in die Entwicklertools.

Zu Lighthouse beitragen

Lighthouse ist ein Open-Source-Projekt. Wenn Sie mehr darüber erfahren möchten, wie es funktioniert und wie Sie dazu beitragen können, sehen Sie sich den Lighthouse-Vortrag von der Google I/O 17 unten an.

Sie haben eine Idee für eine Lighthouse-Prüfung? Dann posten Sie es hier!

Logos von Drittanbietern

Verwenden Sie Logos von Drittanbietern, um mehr Informationen zu den Entitäten zu erhalten, die Netzwerkanfragen auf einer Seite senden, sich in der Console anmelden und JavaScript ausführen.

Den Mauszeiger im Bereich „Netzwerk“ auf das Logo eines Drittanbieters bewegen

Abbildung 2. Den Mauszeiger im Bereich „Netzwerk“ auf das Logo eines Drittanbieters bewegen

Bewegen Sie den Mauszeiger in der Console auf das Badge eines Drittanbieters.

Abbildung 3. Bewegen Sie den Mauszeiger in der Console auf das Badge eines Drittanbieters.

So aktivierst du Logos von Dritten:

  1. Öffnen Sie das Befehlstaste-Menü.
  2. Führe den Befehl Show third party badges aus.

Mit der Option Gruppieren nach Produkt auf den Tabs Aufrufstruktur und Bottom-up können Sie die Aktivitäten zur Leistungserfassung nach Drittanbieterentitäten gruppieren, die diese Aktivitäten verursacht haben. Unter Erste Schritte mit der Analyse der Laufzeitleistung erfahren Sie, wie Sie die Leistung mit Entwicklertools analysieren können.

Im Bottom-up-Tab nach Produkt gruppieren

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

Eine neue Touch-Geste für „Weiter zu diesem“

Angenommen, Sie sind in Zeile 25 eines Skripts pausiert und möchten zu Zeile 50 springen. In der Vergangenheit konnten Sie einen Haltepunkt in Zeile 50 festlegen oder mit der rechten Maustaste auf die Zeile klicken und Weiter zu hier auswählen. Jetzt gibt es eine schnellere Geste für diesen Workflow.

Während Sie den Code durchgehen, halten Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt und klicken Sie dann, um zur entsprechenden Codezeile zu gelangen. Die Entwicklertools heben die springenden Ziele blau hervor.

Weiter zu hier

Abbildung 5. Weiter zu diesem Ort

Informationen zu den Grundlagen der Fehlerbehebung in den Entwicklertools finden Sie unter Erste Schritte beim Debugging von JavaScript.

In die Asynchronität wechseln

Ein wichtiges Thema für das Entwicklertools-Team in naher Zukunft besteht darin, das Debugging von asynchronem Code vorhersehbar zu machen und Ihnen einen vollständigen Verlauf der asynchronen Ausführung zu bieten.

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

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

Änderungen

Informativere Objektvorschauen in der Console

Wenn Sie bisher ein Objekt in der Console protokolliert oder ausgewertet haben, wurde in der Console nur Object angezeigt, was nicht besonders hilfreich ist. Jetzt bietet die Console weitere Informationen zum Inhalt des Objekts.

Wie die Console zur Vorschau von Objekten verwendet wurde

Abbildung 6. Wie die Console zur Vorschau von Objekten verwendet wurde

So sieht die Console jetzt eine Vorschau von Objekten aus

Abbildung 7. So sieht die Console jetzt eine Vorschau von Objekten aus

Informativeres Kontextmenü zur Kontextmenü in der Console

Das Menü „Kontextauswahl“ in der Console enthält jetzt mehr Informationen zu verfügbaren Kontexten.

  • Der Titel beschreibt, was die einzelnen Elemente sind.
  • Die Unterüberschrift 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ü zur Kontextauswahl

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

Echtzeit-Updates auf dem Tab „Abdeckung“

Beim Aufzeichnen der Codeabdeckung in Chrome 59 wurde auf dem Tab Abdeckung nur „Aufzeichnung...“ angezeigt, ohne Einblick in den verwendeten Code zu erhalten. Jetzt sehen Sie auf dem Tab Abdeckung in Echtzeit, welcher Code verwendet wird.

Laden einer Seite und Interaktion mit einer Seite über den alten Tab „Abdeckung“

Abbildung 9. Laden einer Seite und Interaktion mit einer Seite über den alten Tab Abdeckung

Laden einer Seite und Interaktion mit einer Seite über den neuen Tab „Abdeckung“

Abbildung 10. Laden einer Seite und Interaktion mit einer Seite über den neuen Tab Abdeckung

Einfachere Optionen für die Netzwerkdrosselung

Die Menüs zur Netzwerkdrosselung in den Bereichen Netzwerk und Leistung wurden vereinfacht und enthalten jetzt nur noch drei Optionen: Offline, Langsames 3G, was beispielsweise in Indien üblich ist, und Schnelles 3G, was beispielsweise in den USA üblich ist.

Die neuen Optionen für die Netzwerkdrosselung

Abbildung 11. Die neuen Optionen für die Netzwerkdrosselung

Die Drosselungsoptionen wurden an andere Drosselungstools auf Kernelebene angepasst. In den Entwicklertools werden neben den einzelnen Optionen die Messwerte für Latenz, Download und Upload nicht mehr angezeigt, da diese Werte irreführend waren. Ziel ist es, der tatsächlichen Erfahrung der einzelnen Optionen zu entsprechen.

Asynchrone Stacks standardmäßig aktiviert

Das Kästchen Asynchron wurde aus dem Bereich Quellen entfernt. Asynchrone Stacktraces sind jetzt standardmäßig aktiviert. In der Vergangenheit war diese Option wegen des Leistungsaufwands aktiviert. Der Aufwand ist jetzt so gering, dass die Funktion standardmäßig aktiviert werden kann. Wenn Sie asynchrone Stacktraces deaktivieren möchten, können Sie sie über die Einstellungen oder durch Ausführen des Befehls Do not capture async stack traces im Befehlsmenü deaktivieren.

Entwicklertools bei der Google I/O 2017

Im folgenden Vortrag des Mythos Paul Irish erfahren Sie mehr darüber, woran das DevTools-Team im letzten Jahr gearbeitet hat und welche wichtigen Themen es in naher Zukunft angehen wird.

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