Neuerungen in den Entwicklertools (Chrome 60)

Kayce Basques

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 eine umfassende Auswahl Tests zur Messung der Qualität Ihrer Webseiten.

Die oberen Punktzahlen für progressive Web-Apps, Leistung, Barrierefreiheit und Best Practices sind die Gesamtbewertungen für jeden dieser Punkte. 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 zur Emulation eines Mobilgeräts ein. Tests mit der Seite und zeigt dann die Ergebnisse im Bereich Audits an.

Lighthouse bei der Google I/O 17

Sehen Sie sich den Vortrag zu den Entwicklertools von der Google I/O 2017 unten an, um mehr über die Einbindung von Lighthouse zu erfahren. in den Entwicklertools.

Beitrag zu Lighthouse leisten

Lighthouse ist ein Open-Source-Projekt. Um mehr darüber zu erfahren, wie das Tool funktioniert und wie Sie dazu beitragen können, sehen Sie sich den Lighthouse-Vortrag auf der Google I/O 2017 an.

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

Drittanbieter-Badges

Verwenden Sie Drittanbieter-Logos, um mehr über die Entitäten zu erfahren, die Netzwerkanfragen für eine in der Konsole anmelden 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 auf ein Drittanbieter-Logo bewegen

Abbildung 3. In der Console den Mauszeiger auf 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.

Verwenden Sie auf den Tabs Anrufstruktur und Bottom-up die Option Nach Produkt gruppieren, um die Leistung zu gruppieren. die Aktivitäten der Drittanbieter-Entitäten aufzeichnen, die diese Aktivitäten verursacht haben. Siehe Erste Schritte mit Laufzeitleistung analysieren, um zu erfahren, wie du die Leistung mit den Entwicklertools analysieren kannst.

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. In der Vergangenheit konnten Sie Setzen Sie einen Haltepunkt in Zeile 50 oder klicken Sie mit der rechten Maustaste auf die Zeile und wählen Sie Weiter bis hier aus. Aber jetzt gibt es eine schnellere Geste für diesen Workflow.

Halten Sie dabei die Befehlstaste (Mac) oder Strg (Windows, Linux) 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, das Debugging von asynchronem Code vorhersehbar sind und Ihnen einen vollständigen Verlauf der asynchronen Ausführung liefern.

Die neue Touch-Geste für „Weiter zu hier“ funktioniert auch mit asynchronem Code. Wenn du die Taste gedrückt hältst Mit der Befehlstaste (Mac) oder Strg (Windows, Linux) hebt die Entwicklertools den Tippmodus hervor. asynchrone Ziele in Grün.

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, was nicht besonders hilfreich ist. In der Konsole finden Sie jetzt weitere Informationen 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 im neuen Menü „Kontextauswahl“ den Mauszeiger auf einen iFrame bewegen, wird er im Darstellungsbereich

Echtzeitaktualisierungen auf dem Tab „Abdeckung“

Wenn Sie in Chrome 59 die Codeabdeckung aufzeichnen, wird auf dem Tab Abdeckung nur „Aufzeichnung...“ angezeigt, ohne Einblick in den verwendeten Code. Auf dem Tab Abdeckung sehen Sie 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 so vereinfacht: Es gibt nur drei Optionen: Offline, Langsames 3G, wie es beispielsweise in Indien üblich ist, und Schnelles 3G, das 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. Entwicklertools – nein neben jeder Option die Messwerte für Latenz sowie Download und Upload angezeigt, waren irreführend. Ziel ist es, bei jeder Option das tatsächliche Erlebnis zu bieten.

Asynchrone Stacks standardmäßig aktiviert

Das Kästchen Async wurde aus dem Bereich Async entfernt. Asynchrone Stacktraces sind jetzt durch Standardeinstellung. In der Vergangenheit wurde diese Option aufgrund von Leistungsaufwand aktiviert. Der Aufwand beträgt jetzt sodass die Funktion standardmäßig aktiviert werden kann. Wenn Sie asynchrone Stacktraces deaktivieren möchten, können Sie sie in den Einstellungen deaktivieren oder indem Sie den Do not capture async stack traces ausführen im Befehlsmenü.

Entwicklertools auf der Google I/O '17

Sieh dir unten den Vortrag des mythischen Paul Irish an, um mehr über das Entwicklertools-Team zu erfahren. an denen sie im vergangenen Jahr gearbeitet haben, und auf die großen Themen, um die sie sich in naher Zukunft kümmern werden.

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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • 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