Die Google I/O 2016 ist vorbei. DevTools war auf der I/O stark vertreten, unter anderem mit einem Vortrag von Paul Bakaus, Paul Irish und Seth Thompson, in dem die Zukunft von DevTools skizziert wurde. Im folgenden Video erfahren Sie mehr darüber, wie es mit den DevTools im Jahr 2016 und darüber hinaus weitergeht.
In der Erstellung
DevTools soll jede Phase des Webentwicklungszyklus erleichtern. Sie wissen wahrscheinlich, dass Sie mit den Entwicklertools eine Website debuggen oder ein Profil erstellen können. Vielleicht wissen Sie aber nicht, wie Sie sie zum Erstellen einer Website verwenden können. Mit „Erstellung“ ist das Erstellen einer Website gemeint. Eines unserer Ziele für die nahe Zukunft ist es, Ihnen das Iterieren, Testen und Emulieren Ihrer Website auf mehreren Geräten zu erleichtern.
Gerätemodus
Das DevTools-Team arbeitet kontinuierlich an der Verbesserung des Gerätemodus, der in Chrome 49 sein erstes großes Upgrade erhalten hat. Im Beitrag vom März (Ein neuer Gerätemodus für eine mobile Welt) finden Sie eine Übersicht der Updates. Das übergeordnete Ziel ist es, einen nahtlosen Workflow für das Ansehen und Emulieren Ihrer Website auf allen Formfaktoren zu ermöglichen.
Hier eine kurze Zusammenfassung einiger Updates zum Gerätemodus, die seit der Veröffentlichung des Artikels im März in Canary eingeführt wurden.
Wenn Sie sich eine Seite auf einem bestimmten Gerät ansehen, können Sie die Nutzerfreundlichkeit besser nachvollziehen, indem Sie die Gerätehardware um die Seite herum anzeigen lassen.
Im Menü für die Geräteausrichtung können Sie sich Ihre Seite ansehen, wenn verschiedene System-UI-Elemente wie die Navigationsleiste und die Tastatur aktiv sind.
Auch die Desktop-Version wurde verbessert. Mit der Zoomfunktion des Gerätemodus können Sie Desktopbildschirme emulieren, die größer sind als der Bildschirm, auf dem Sie gerade arbeiten, z. B. einen 4K-Bildschirm (3.840 × 2.160 Pixel).
Sie können das Netzwerk direkt über die Benutzeroberfläche des Gerätemodus drosseln, ohne zum Netzwerkbereich wechseln zu müssen.
Quelldiffs
Wenn Sie das Styling einer Website überarbeiten, kann es leicht passieren, dass Sie den Überblick über Ihre Änderungen verlieren. Um das Problem zu beheben, werden in den Entwicklertools visuelle Hinweise im Bereich für die Zeilennummer des Quellenbereichs verwendet, damit Sie den Überblick über Ihre Änderungen behalten. Gelöschte Zeilen sind rot, geänderte Zeilen lila und neue Zeilen grün hervorgehoben.
Außerdem können Sie Ihre Änderungen auf dem neuen Tab „Schnellzugriff auf Quelle“ im Blick behalten:
Auf dem Tab „Schnellquelle“ können Sie sich zum ersten Mal gleichzeitig auf Ihren HTML- oder JavaScript-Quellcode und Ihre CSS-Regeln konzentrieren. Wenn Sie im Bereich „Styles“ auf eine CSS-Eigenschaft klicken, wird auf dem Tab „Quick Source“ automatisch die Definition in der Quelle aufgerufen und hervorgehoben.
Aktivieren Sie das sources diff-Experiment in Chrome Canary, um es noch heute auszuprobieren.
Sass-Bearbeitung in Echtzeit
Hier ist eine Vorschau auf einige der anstehenden wichtigen Verbesserungen am Sass-Bearbeitungsablauf. Diese Funktionen befinden sich noch in einer sehr frühen experimentellen Phase. Wir werden Sie in einem späteren Beitrag informieren, wenn Sie sie ausprobieren können.
Mit DevTools können Sie Sass-Variablen also so ansehen und bearbeiten, wie Sie es sich immer gewünscht haben. Klicken Sie auf einen Wert, der aus einer Sass-Variablen kompiliert wurde. Auf dem neuen Tab „Schnellquellen“ wird dann die Definition der Variablen angezeigt.
Wenn Sie einen Wert bearbeiten, der aus einer Sass-Variablen kompiliert wurde, wird die Sass-Variable aktualisiert, nicht nur die ausgewählte einzelne Eigenschaft.
Progressive Web-Apps
Wenn Sie sich die Liste der Web- und Chrome-Vorträge auf der Google I/O 2016 ansehen, werden Sie feststellen, dass ein großes Thema in der Welt der Webentwicklung aufkommt: Progressive Web-Apps.
Da sich das Modell der progressiven Web-Apps weiterentwickelt, werden die DevTools schnell weiterentwickelt, um Entwicklern die Tools zur Verfügung zu stellen, die sie zum Erstellen großartiger progressiver Web-Apps benötigen. Wir haben festgestellt, dass die Entwicklung und das Debugging dieser modernen Anwendungen oft mit besonderen Anforderungen verbunden sind. Deshalb haben wir in DevTools ein eigenes Bereich für die Entwicklung von Progressive Web-Apps eingerichtet. Wenn Sie Chrome Canary öffnen, sehen Sie, dass das Feld „Ressourcen“ durch das Feld „Anwendung“ ersetzt wurde. Alle bisherigen Funktionen des Bereichs „Ressourcen“ sind weiterhin verfügbar. Es gibt nur wenige neue Bereiche, die speziell für die Entwicklung von progressiven Web-Apps entwickelt wurden:
Im Bereich „Manifest“ wird die App-Manifestdatei visuell dargestellt. 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 untersuchen und mit ihm interagieren.
Im Bereich „Speicherinhalt löschen“ können Sie alle Arten von Daten löschen, damit Sie eine Seite ohne Altlasten aufrufen können.
JavaScript
Die Grenze zwischen Frontend und Backend zu überschreiten, ist ein schwieriger Teil der Fullstack-Webentwicklung. Wenn Sie beim Debuggen einer Web-App feststellen, dass Ihr Backend einen 500-Statuscode zurückgibt, haben Sie die Grenzen von DevTools erreicht. Sie müssen den Kontext wechseln und Ihre Backend-Entwicklungsumgebung starten, um das Problem zu debuggen.
Bei Backends, die in Node.js geschrieben sind, verschwimmen die Grenzen zwischen Frontend und Backend jedoch. Da Node.js auf der V8-JavaScript-Engine ausgeführt wird (derselben Engine, die Google Chrome zugrunde liegt), wollten wir es ermöglichen, Node.js über die DevTools zu debuggen. Dank der Teams von V8, DevTools und Google Cloud Platform für Node.js können Sie jetzt alle leistungsstarken Debugging-Funktionen von DevTools verwenden, um eine Node.js-App zu untersuchen. Die Funktion ist bereits in Node.js-Nightly-Builds verfügbar. Die DevTools-Integration wird jedoch noch optimiert, bevor sie in eine Hauptversion aufgenommen wird. Das Debuggen Ihrer Node.js-App über die Entwicklertools wird eines Tages so einfach sein wie das Übergeben von node --inspect app.js und das Herstellen einer Verbindung über die Entwicklertools in einem beliebigen Chrome-Fenster.
Bestehende Tools wie Node Inspector bieten zwar GUI-basiertes Debugging, die neue Node.js DevTools-Integration wird jedoch immer auf dem neuesten Stand der DevTools-Debuggingfunktionen sein, z. B. asynchrones Stack-Debugging, Blackboxing und ES6-Unterstützung.