Neuerungen in den Entwicklertools (Chrome 60)

Kayce Basques

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

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

Neue Funktionen

Neuer Audit-Bereich, powered by Lighthouse

Der Bereich „Audits“ wird jetzt von Lighthouse unterstützt. Lighthouse bietet umfassende Testmöglichkeiten zur Qualitätsmessung von Webseiten.

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

Einen Lighthouse-Bericht

Abbildung 1. Einen Lighthouse-Bericht

So prüfen Sie eine Seite:

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

Lighthouse bei der Google I/O 17

Unten im Vortrag zu den Entwicklertools von der Google I/O 2017 erfährst du mehr über die Einbindung von Lighthouse in die Entwicklertools.

Beitrag zu Lighthouse leisten

Lighthouse ist ein Open-Source-Projekt. Weitere Informationen zur Funktionsweise und dazu, wie du dazu beitragen kannst, findest du unten im Lighthouse-Vortrag von der Google I/O '17.

Haben Sie eine Idee für eine Lighthouse-Prüfung? Poste es hier!

Drittanbieter-Badges

Drittanbieter-Logos geben Aufschluss über die Entitäten, die Netzwerkanfragen auf einer Seite stellen, sich in der Console protokollieren und JavaScript ausführen.

Mauszeiger im Bereich „Netzwerk“ über das Logo eines Drittanbieters bewegen

Abbildung 2. Mauszeiger im Bereich „Netzwerk“ über das Logo eines Drittanbieters bewegen

In der Console den Mauszeiger über ein Drittanbieter-Logo bewegen

Abbildung 3. In der Console den Mauszeiger über ein Drittanbieter-Logo bewegen

So aktivieren Sie Logos von Drittanbietern:

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

Mit der Option Nach Produkt gruppieren auf den Tabs Aufrufstruktur und Bottom-up können Sie die Aktivitäten der Leistungsaufzeichnung 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 den Entwicklertools analysieren können.

Gruppierung nach Produkt im Bottom-up-Tab

Abbildung 4. Gruppierung nach Produkt auf dem Tab Bottom-up

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

Angenommen, Sie sind in Zeile 25 eines Skripts 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 Weiter bis hier auswählen. Aber jetzt gibt es eine schnellere Geste für diesen Workflow.

Halten Sie dabei die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt und klicken Sie dann, um zur entsprechenden Codezeile zu gelangen. In den Entwicklertools werden die springenden Ziele blau hervorgehoben.

Weiter bis hier

Abbildung 5. Weiter bis hier

Weitere Informationen zu den Grundlagen der Fehlerbehebung in den Entwicklertools finden Sie unter Erste Schritte mit der JavaScript-Fehlerbehebung.

In den asynchronen Modus wechseln

Ein wichtiges Thema für das Entwicklertools-Team in naher Zukunft besteht darin, die Fehlerbehebung bei asynchronem Code vorhersehbar zu machen und Ihnen einen vollständigen Verlauf der asynchronen Ausführung zur Verfügung zu stellen.

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

In der Demo aus dem Vortrag zu Entwicklertools auf der I/O kannst du dir ein Beispiel ansehen.

Ä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.

Bisherige Objekte in der Console in der Vorschau ansehen

Abbildung 6. Bisherige Objekte in der Console in der Vorschau ansehen

So zeigt die Console jetzt eine Vorschau von Objekten an

Abbildung 7. So zeigt die Console jetzt eine Vorschau von Objekten an

Informativeres Kontextmenü in der Console

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

  • Im Titel wird beschrieben, worum es sich bei den einzelnen Elementen handelt.
  • Der Untertitel unter dem Titel beschreibt die Domain, von der der Artikel stammt.
  • Bewegen Sie den Mauszeiger auf einen iFrame-Kontext, um ihn im Darstellungsbereich hervorzuheben.

Das neue Menü für die Kontextauswahl

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

Echtzeitaktualisierungen auf dem Tab „Abdeckung“

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

Seite über den alten Tab „Abdeckung“ laden und mit ihr interagieren

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

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

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

Einfachere Optionen zur Netzwerkdrosselung

Die Menüs zur Netzwerkdrosselung in den Bereichen Netzwerk und Leistung wurden vereinfacht und enthalten jetzt nur noch drei Optionen: Offline, Langsames 3G (in Ländern wie Indien häufig) und Schnelles 3G, wie es 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 optimiert, damit sie mit anderen Drosselungstools auf Kernelebene übereinstimmen. Die Entwicklertools zeigen nicht mehr die Latenz- sowie Download- und Uploadmesswerte neben jeder Option an, da diese Werte irreführend waren. Ziel ist es, bei jeder Option das tatsächliche Erlebnis zu bieten.

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 wurde diese Option aufgrund von Leistungsaufwand aktiviert. Der Aufwand ist jetzt minimal genug, um die Funktion standardmäßig zu aktivieren. Wenn Sie asynchrone Stacktraces deaktivieren möchten, können Sie sie in den Einstellungen deaktivieren oder im Befehlsmenü den Befehl Do not capture async stack traces ausführen.

Entwicklertools auf der Google I/O '17

Unten findest du einen Vortrag des mythischen Paul Irish. Er enthält Informationen dazu, woran das Entwicklertools-Team im letzten Jahr gearbeitet hat und welche großen Themen es in naher Zukunft angehen wird.

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Ü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 es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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