Die Google I/O 2016 ist beendet. DevTools war bei der I/O sehr präsent, unter anderem in einem Vortrag von Paul Bakaus, Paul Irish und Seth Thompson, in dem die Zukunft von DevTools beschrieben wurde. Sehen Sie sich das Video unten an oder lesen Sie weiter, um mehr darüber zu erfahren, welche Ziele die Entwicklertools 2016 und darüber hinaus haben werden.
In der Erstellung
DevTools soll jede Phase des Webentwicklungszyklus vereinfachen. Sie wissen sicher, dass die Entwicklertools Ihnen beim Debuggen oder Erstellen von Profilen für Websites helfen können, wissen aber nicht, wie Sie damit Websites erstellen können. Mit „Authoring“ ist das Erstellen einer Website gemeint. Eines der Ziele in absehbarer Zukunft besteht darin, es Ihnen leichter zu machen, Ihre Website geräteübergreifend zu iterieren, zu experimentieren und zu emulieren.
Gerätemodus
Das DevTools-Team arbeitet weiter an der Nutzung des Gerätemodus, der sein erstes größeres Upgrade in Chrome 49 erhalten hat. In diesem Beitrag vom März (A new Device Mode for a mobile-first world) finden Sie einen Überblick über die Neuerungen. Das übergeordnete Ziel ist es, einen nahtlosen Workflow zum Anzeigen und Emulieren Ihrer Website über alle Formfaktoren hinweg zu bieten.
Hier ist eine kurze Zusammenfassung der Gerätemodus-Updates, die seit der Veröffentlichung im März in Canary verfügbar sind.
Wenn Sie eine Seite als ein bestimmtes Gerät betrachten, können Sie die Gerätehardware um sich herum anzeigen, damit Sie sie besser erleben können.
Über das Menü zur Geräteausrichtung können Sie Ihre Seite anzeigen, wenn verschiedene Elemente der System-UI, z. B. die Navigationsleiste und die Tastatur, aktiv sind.
Auch die Desktop-Story wurde verbessert. Dank der Zoomfunktion im Gerätemodus können Sie Desktop-Bildschirme emulieren, die größer sind als der Bildschirm, an dem Sie gerade arbeiten, etwa einen 4K-Bildschirm (3840 x 2160 Pixel).
Sie können das Netzwerk direkt über die Gerätemodus-Benutzeroberfläche drosseln, anstatt zum Steuerfeld „Netzwerk“ wechseln zu müssen.
Quellunterschiede
Wenn Sie den Stil einer Website iterieren, kann es leicht passieren, dass Sie den Überblick über Ihre Änderungen verlieren. Um dieses Problem zu beheben, verwenden die Entwicklertools visuelle Hinweise in der Zeilennummer-Abstand des Bereichs „Quellen“, damit du deine Änderungen im Auge behalten kannst. Gelöschte Linien werden mit einer roten Linie, geänderte Linien lila und neue Linien grün hervorgehoben.
Auf dem neuen Tab „Quick Source“ der Leiste können Sie außerdem Ihre Änderungen nachverfolgen:
Auf dem Tab "Quick Source" können Sie sich erstmals gleichzeitig mit Ihren CSS-Regeln auf Ihren HTML- oder JavaScript-Quellcode konzentrieren. Wenn Sie im Bereich „Styles“ auf eine CSS-Eigenschaft klicken, springt der Quick Source-Tab automatisch zur Definition in der Quelle und hebt sie hervor.
Aktiviere den Quellenunterschied in Chrome Canary, um die Funktion noch heute auszuprobieren.
Live-SSS-Bearbeitung
Hier ist eine kleine Vorschau auf einige bevorstehende größere Verbesserungen des Sass-Bearbeitungs-Workflows. Diese Funktionen befinden sich noch am Anfang der Testphase. Sobald sie für Sie verfügbar sind, erhalten Sie von uns einen weiteren Beitrag.
Im Grunde genommen können Sie mit den Entwicklertools SASS-Variablen anzeigen und bearbeiten, wie Sie es sich immer erhofft haben. Klicken Sie auf einen Wert, der aus einer SASS-Variablen kompiliert wurde. Der neue Tab „Schnellquellen“ springt dann zur Definition der Variablen.
Wenn Sie einen Wert bearbeiten, der aus einer SASS-Variablen kompiliert wurde, wird damit die SASS-Variable aktualisiert und nicht nur die einzelne von Ihnen ausgewählte Eigenschaft.
Progressive Web-Apps
Sehen Sie sich die Liste der Web- und Chrome-Vorträge bei der Google I/O 2016 an. Sie werden feststellen, dass in der Webentwicklung ein großes Thema auftaucht: Progressive Web-Apps.
Progressive Web-Apps entwickeln sich immer weiter und die Entwicklertools laufen ständig weiter, um Entwicklern die Tools zur Verfügung zu stellen, die sie zum Erstellen großartiger progressiver Web-Apps benötigen. Wir haben erkannt, dass das Erstellen und Debuggen dieser modernen Anwendungen oft besondere Anforderungen stellt. Deshalb haben die Entwicklertools ein ganzes Gremium der Entwicklung von progressiven Webanwendungen gewidmet. Öffnen Sie Chrome Canary. Der Bereich „Ressourcen“ wurde durch den Bereich „Anwendung“ ersetzt. Alle vorherigen Funktionen aus dem Bereich „Ressourcen“ sind weiterhin verfügbar. Es gibt nur einige neue Bereiche, die speziell für die Entwicklung von progressiven Web-Apps entwickelt wurden:
Im Manifestbereich sehen Sie eine visuelle Darstellung der Manifestdatei der App. Hier können Sie den Workflow „Zum Startbildschirm hinzufügen“ manuell auslösen.
Im Bereich Service Workers können Sie den für die aktuelle Seite registrierten Service Worker prüfen und mit ihm interagieren.
Und im Bereich Speicherinhalt löschen können Sie alle möglichen Daten löschen, sodass Sie wieder die ganz neue Seite sehen können.
JavaScript
Bei der Full-Stack-Webentwicklung ist es schwierig, die Grenze zwischen Frontend und Backend zu überschreiten. Wenn Sie feststellen, dass Ihr Back-End beim Debuggen einer Webanwendung einen 500-Statuscode zurückgibt, haben Sie die Nützlichkeit der Entwicklertools erreicht, sodass Sie Kontexte ändern und Ihre Backend-Entwicklungsumgebung starten müssen, um das Problem zu beheben.
Mit in Node.js geschriebenen Backends werden jedoch die Grenzen zwischen Frontend und Backend verschwimmen. Da Node.js auf der JavaScript-Engine V8 (derselben Engine, die auch Google Chrome verwendet) ausgeführt wird, wollten wir das Debugging in Node.js über die Entwicklertools ermöglichen. Dank der V8-, DevTools- und Google Cloud Platform for Node.js-Teams können Sie jetzt alle leistungsstarken Debugging-Funktionen der DevTools nutzen, um eine Node.js-App besser kennenzulernen. Diese Funktionen sind bereits für Node.js-nächtliche Builds verfügbar. Die Integration der Entwicklertools wird jedoch noch überarbeitet, bevor sie in eine Hauptversion aufgenommen wurde. Das Debugging Ihrer Node.js-App mit den Entwicklertools ist eines Tages so einfach wie das Übergeben von node --inspect app.js und das Herstellen einer Verbindung über die Entwicklertools in einem beliebigen Chrome-Fenster.
Obwohl vorhandene Tools wie Node Inspector GUI-basiertes Debugging bieten, bleibt die neue Node.js-Entwicklertools-Integration mit den neuesten Debugging-Funktionen der Entwicklertools wie Asynchrones Stack-Debugging, Blackboxing und ES6-Unterstützung auf dem neuesten Stand.