Entwicklertools im neuen Microsoft Edge

Der neue Chromium-basierte Browser von Microsoft hat kürzlich seine zweite öffentliche stabile Version veröffentlicht, in der Edge 80 mit vollständiger ARM64-Unterstützung sowie verbesserten Tools vorgestellt wird, mit denen Sie Webinhalte erstellen und bearbeiten können. Wie frühere Versionen des jetzt älteren Edge behält der neue Browser von Microsoft die bekannte F12-Verknüpfung zum Starten der Entwicklertools bei, die entweder an den Browser oder in einem separaten Bereich angehängt sind.

Es lohnt sich, sich mit den neuen Dingen vertraut zu machen, denn obwohl es Ähnlichkeiten mit Legacy Edge gibt, arbeiten Sie jetzt in einer Chromium-Welt und es gibt viel mehr Gemeinsamkeiten mit Chrome und anderen Chromium-basierten Browsern. Das ist keine schlechte Sache. Es ist einfacher, Fähigkeiten zwischen Browsern zu übertragen. Wenn Sie Chrome als Entwicklungsbrowser verwendet haben, ist es einfach, mit der Arbeit am neuen Edge zu beginnen. Microsoft hat jedoch einige eigene Änderungen vorgenommen und arbeitet daran, die Erfahrung der Edge-Entwickler auf Visual Studio-Code auszudehnen, damit Sie JavaScript-Anwendungen in einer einzigen Umgebung entwickeln und testen können.

Eine plattformübergreifende Entwicklererfahrung

Mit dem neuen Edge, der unter Windows 7 und macOS verfügbar ist, und mit einer in der Entwicklung befindlichen Linux-Version können Sie auf verschiedenen Plattformen auf dieselben Entwicklungstools zugreifen. Sie erhalten dieselben Inspektoren, Debugger und Konsolen, sodass Sie problemlos dieselben Tests ausführen können, wo immer Sie arbeiten und auf welchem ​​Betriebssystem Sie auch arbeiten. Ein Entwickler, der mit Edge unter Windows vertraut ist, sollte in der Lage sein, zu einem Mac zu wechseln, um Code zu testen, ohne auf die Hilfe eines Mac-Entwicklers warten zu müssen.

Wie bei Legacy Edge können Sie mit den neuen Chromium-basierten Edge-Entwicklungstools HTML, CSS und JavaScript auf Ihrer Website mit einem JavaScript-Debugger und einer Konsole zum Anzeigen der Konsolenprotokollierungsausgabe von JavaScript untersuchen. Mit den Tools können Sie schnell eine Browser-Symbolleiste einschalten, die Geräteansichtsmodi hinzufügt. So haben Sie die Möglichkeit, Responsive Design zu testen, ohne einen Entwicklungs-PC zu verlassen.

Verwenden der Edge-Entwicklertools

Die Entwicklertools von Edge befinden sich in neun verschiedenen Bereichen, die Ihnen jeweils unterschiedliche Einblicke in Ihre Webanwendung bieten. Am wahrscheinlichsten verwenden Sie die erste: die Elementansicht.

Dies führt einen Drilldown in HTML und CSS durch und zeigt, welche Elemente auf einer Seite von welchen Codeabschnitten generiert werden. Wenn Sie auf ein Element in Ihrem Browserfenster zeigen, wird der relevante Code hervorgehoben, um das zu debuggende HTML oder CSS zu isolieren. Ein Bereich zeigt HTML an. Das andere zeigt das aktuelle CSS mit den aktuell angewendeten Stilen und den verwendeten Ereignis-Listenern. Sie können sehen, welche CSS-Regeln derzeit verwendet werden und welche ignoriert werden.

Der Bereich "Elemente" ist auch als Visual Studio-Codeerweiterung verfügbar und bietet neben der HTML-Bearbeitung auch eine Layoutprüfung. Auf diese Weise können Sie schnell feststellen, wie sich Änderungen in Ihrem Code auf Ihre Seitenlayouts auswirken. Sie können sogar Code an eine Browserinstanz anhängen und so direkten Zugriff auf alle geöffneten HTML-Dokumente erhalten.

Vorbereitungen für PWAs

Eines der nützlicheren Tools ist das Leistungsfenster. Von hier aus können Sie Ihre Browseraktivitäten aufzeichnen. Sobald eine Testsequenz abgeschlossen ist, können Sie die Zeitleiste des Tools verwenden, um die von Ihrer App verwendeten Ressourcen zu profilieren. Es wird am besten in Verbindung mit den Netzwerk- und Speicher-Tools verwendet, insbesondere wenn Sie viel JavaScript verwenden. Das Verständnis der Leistung einer Webanwendung ist besonders wichtig, wenn Sie sie als PWA (progressive Webanwendung) verwenden möchten. In diesem Anwendungsbereich werden Tools zum Untersuchen der wichtigsten Komponenten einer PWA hinzugefügt, einschließlich lokaler Speicher- und Servicemitarbeiter.

Da Edge das Identifizieren und Installieren von PWAs erleichtert, lohnt es sich, diese Tools, insbesondere den Anwendungsbereich, genauer zu untersuchen. Mit einem Dashboard-ähnlichen Erscheinungsbild erhalten Sie auf schnelle Weise einen detaillierten Überblick darüber, was in Ihren Anwendungen geschieht und wie sie außerhalb des Browsers funktionieren. Mit dem Anwendungstool können Sie untersuchen, wie die integrierten Dienste von Edge, z. B. der Zahlungshandler, funktionieren.

Verwenden von Plug-Ins in Edge DevTools

Ein weiteres Merkmal des Wechsels zu einer Chromium-basierten Entwicklererfahrung ist die Unterstützung von Plug-Ins von Drittanbietern. Einige sind bereits im eigenen Add-On-Store von Edge verfügbar (derzeit jedoch nur über private Deep Links zum Store). Wenn Sie für eine größere Auswahl die Unterstützung von Drittanbieter-Stores in Edge aktiviert haben, haben Sie Zugriff auf alle Erweiterungen im Chrome Web Store. Hier gibt es eine Menge, einschließlich Tools, die gezielte Unterstützung für bestimmte JavaScript-Frameworks hinzufügen oder beim Debuggen helfen. Dazu gehören Facebooks React, der Open-Source-gRPC, Tools für die Arbeit mit GraphQL-APIs und die Unterstützung von Lintern wie Webhint.

Die Entwickler-Plug-In-Spezifikation von Chromium ist öffentlich und jeder kann seine eigenen Entwicklertools erstellen und veröffentlichen, entweder intern oder für die ganze Welt. Da die Plug-Ins von Edge ein gemeinsames Format mit anderen Chromium-Browsern haben, kann dasselbe Plug-In über andere Browser-Stores bereitgestellt werden, was die Tool-Entwicklung vereinfacht.

Das Hinzufügen einer Erweiterung zu den Entwicklertools entspricht dem Hinzufügen einer Erweiterung zum Browser. Navigieren Sie zu einem Geschäft, klicken Sie auf das Tool, das Sie hinzufügen möchten, und lassen Sie es herunterladen und installieren. Es wird im Browser installiert, und Sie möchten möglicherweise das Erweiterungssymbol im Browser-Menü ausblenden, bevor Sie die Entwicklertools öffnen, um eine neue Registerkarte anzuzeigen. Wenn Sie Webhint über eine Site ausführen, werden eine Reihe wichtiger Kennzahlen angezeigt, die Hinweise zu wichtigen Funktionen wie Barrierefreiheit oder zur Unterstützung von PWA-Funktionen geben.

Es ist gut zu sehen, dass die Anpassung endlich Teil der Edge-Tools ist. Wir alle verwenden unterschiedliche Toolchains. Es ist ein sehr entwicklerfreundlicher Ansatz, Ihnen das zu geben, was Sie zur Unterstützung der von Ihnen verwendeten Technologien benötigen. Als Microsoft die Umstellung auf Chromium für seinen Browser ankündigte, gab es an, dass einer der Gründe darin bestand, Entwicklern die Funktionen zur Verfügung zu stellen, die sie zum Erstellen der gewünschten Anwendungen benötigen. Dies hätte bedeuten können, dass nur die Browserunterstützung für HTML5, CSS und JavaScript verbessert wurde. Daher ist es ein willkommener Schritt, Edge über alle unterstützten Betriebssysteme hinweg alle Chromium-Entwicklertools zur Verfügung zu stellen.

Änderungen von Microsoft an der Entwicklererfahrung von Chromium

Es ist wichtig zu bedenken, dass Microsoft bei der Chromium-Entwicklung noch ein relativ junger Partner von Google ist. Trotzdem hat es seit seinem Beitritt zum Projekt eine beträchtliche Anzahl von Beiträgen geleistet, einschließlich der Unterstützung von Barrierefreiheitsfunktionen, um Entwicklertools für eine möglichst breite Community verfügbar zu machen. Mit etwa 170 Änderungen, die Tools wie Bildschirmleseprogramme unterstützen, gibt es hier viel zu mögen, da barrierefreie Entwicklertools zur Entwicklung barrierefreier Webanwendungen und -dienste führen.

Weitere neue Funktionen sind derzeit in den Edge-Einstellungen hinter experimentellen Flags verborgen, einschließlich der Unterstützung zusätzlicher Sprachen. Wenn Sie diese Funktion aktivieren und eine der 10 unterstützten Sprachen verwenden, entspricht die Lokalisierung der Entwicklertools der Lokalisierung Ihres Browsers.