Die Google I/O 2016 ist vorbei. DevTools war auf der I/O stark vertreten. Paul Bakaus, Paul Irish und Seth Thompson haben in einem Vortrag die Zukunft von DevTools skizziert. Im Video unten oder im Folgenden erfahren Sie mehr über die Pläne für DevTools in 2016 und darüber hinaus.
In der Erstellung
Mit DevTools soll jede Phase des Webentwicklungszyklus vereinfacht werden. Sie wissen wahrscheinlich, dass Sie mit den Entwicklertools eine Website debuggen oder profilieren können. Aber vielleicht wissen Sie nicht, wie Sie sie beim Erstellen einer Website verwenden können. Mit „Erstellen“ ist das Erstellen einer Website gemeint. Eines der Ziele in absehbarer Zeit ist es, Ihnen die Iteration, Tests und Emulierung Ihrer Website auf mehreren Geräten zu erleichtern.
Gerätemodus
Das DevTools-Team arbeitet kontinuierlich an Verbesserungen 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 einen Überblick über die Änderungen. Das übergeordnete Ziel besteht darin, einen nahtlosen Workflow für die Anzeige und Emulierung Ihrer Website auf allen Formfaktoren bereitzustellen.
Hier eine kurze Zusammenfassung einiger Updates für den Gerätemodus, die seit der Veröffentlichung des Artikels im März in Canary eingeführt wurden.
Wenn Sie eine Seite als bestimmtes Gerät anzeigen lassen, können Sie sich noch besser in die Situation hineinversetzen, indem Sie die Gerätehardware um die Seite herum anzeigen lassen.
Im Menü für die Geräteausrichtung können Sie Ihre Seite aufrufen, wenn verschiedene System-UI-Elemente wie die Navigationsleiste und die Tastatur aktiv sind.
Auch die Desktopversion wurde verbessert. Dank der Zoomfunktion des Gerätemodus können Sie Computerbildschirme emulieren, die größer sind als der Bildschirm, auf dem Sie gerade arbeiten, z. B. ein 4K-Display (3.840 × 2.160 Pixel).
Sie können das Netzwerk direkt über die Benutzeroberfläche des Gerätemodus drosseln, ohne zum Bereich „Netzwerk“ wechseln zu müssen.
Quelldiffs
Wenn Sie das Design einer Website iterieren, kann es leicht passieren, dass Sie den Überblick über Ihre Änderungen verlieren. Um dies zu beheben, werden in den Entwicklertools visuelle Hinweise im Bereich „Zeilennummer“ des Bereichs „Quellen“ verwendet, damit Sie Ihre Änderungen im Blick behalten können. Gelöschte Zeilen sind rot, geänderte Zeilen lila und neue Zeilen grün hervorgehoben.
Auf dem neuen Tab „Schnellquelle“ können Sie Ihre Änderungen auch 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, springt der Tab „Schnellquelle“ automatisch zur Definition in der Quelle und hebt sie hervor.
Aktivieren Sie den Test Quellen-Diff in Chrome Canary, um ihn noch heute auszuprobieren.
Echtzeit-Sass-Bearbeitung
Hier ist ein kleiner Einblick in einige der bevorstehenden wichtigen Verbesserungen am Sass-Bearbeitungsablauf. Diese Funktionen befinden sich noch in der experimentellen Phase. Wir melden uns in einem späteren Beitrag bei dir, wenn du sie ausprobieren kannst.
Mit den DevTools können Sie Sass-Variablen jetzt wie gewünscht aufrufen und bearbeiten. Wenn Sie auf einen Wert klicken, der aus einer Sass-Variablen kompiliert wurde, gelangen Sie auf dem neuen Tab „Schnellinfos“ zur Definition der Variablen.
Wenn Sie einen Wert bearbeiten, der aus einer Sass-Variablen kompiliert wurde, wird nicht nur die ausgewählte Eigenschaft, sondern auch die Sass-Variable aktualisiert.
Progressive Web-Apps
In der Liste der Web- und Chrome-Vorträge auf der Google I/O 2016 sehen Sie, dass ein großes Thema in der Webentwicklung auftaucht: Progressive Web-Apps.
Mit der Entwicklung des Progressive Web App-Modells werden die DevTools ständig weiterentwickelt, um Entwicklern die Tools zur Verfügung zu stellen, die sie für die Erstellung hervorragender progressiver Web-Apps benötigen. Wir haben festgestellt, dass beim Erstellen und Entwickeln dieser modernen Anwendungen oft spezielle Anforderungen zu erfüllen sind. Deshalb haben wir in DevTools einen ganzen Bereich für die Entwicklung von Progressive Web-Anwendungen eingerichtet. Wenn Sie Chrome Canary öffnen, sehen Sie, dass das Steuerfeld „Ressourcen“ durch das Steuerfeld „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“ 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.
Im Bereich „Speicherinhalt löschen“ können Sie alle Arten von Daten löschen, um eine Seite mit einem leeren Speicher zu sehen.
JavaScript
Die Grenze zwischen Frontend und Backend zu überschreiten, ist ein schwieriger Teil der Full-Stack-Webentwicklung. Wenn Sie feststellen, dass Ihr Backend beim Debuggen einer Webanwendung den Statuscode 500 zurückgibt, haben Sie die Grenzen der Nützlichkeit von DevTools erreicht. Sie müssen den Kontext ändern und Ihre Backend-Entwicklungsumgebung starten, um das Problem zu beheben.
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 auch Google Chrome antreibt), wollten wir es möglich machen, Node.js über die DevTools zu debuggen. Dank V8, DevTools und der Google Cloud Platform für Node.js-Teams können Sie jetzt alle leistungsstarken Debugging-Funktionen von DevTools verwenden, um eine Node.js-Anwendung zu untersuchen. Die Funktion ist bereits in den Node.js-Nightly-Builds verfügbar. Die DevTools-Integration wird jedoch noch optimiert, bevor sie in einer Hauptversion enthalten ist. Das Entfernen von Fehlern in Ihrer Node.js-Anwendung ü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 der Node Inspector bieten zwar eine GUI-basierte Fehlerbehebung, die neue Node.js-DevTools-Integration wird jedoch immer auf dem neuesten Stand gehalten und bietet die neuesten DevTools-Fehlerbehebungsfunktionen wie die asynchrone Stack-Fehlerbehebung, Blackbox-Debugging und ES6-Unterstützung.