Edge Developer Tools im Vergleich zu Chrome Developer Tools

In diesem Tutorial lernst du die Microsoft Edge Developer Tools kennen, die in vielerlei Hinsicht den Google Chrome Developer Tools ähnlich sind. Du wirst entdecken, wie du die Tools öffnen und effektiv nutzen kannst, sowie die Unterschiede zwischen den beiden Browser-Entwicklungstools.

Wichtigste Erkenntnisse

Die Edge-DevTools bieten eine nahezu identische Benutzeroberfläche wie die Chrome-Dev-Tools, wenn es um die grundlegenden Funktionen geht. Die Unterschiede liegen hauptsächlich in der Benutzeroberfläche und wenigen zusätzlichen Funktionen, während die Kernwerkzeuge und Shortcuts weitgehend gleich geblieben sind.

Schritt-für-Schritt-Anleitung

Um die Edge-DevTools zu öffnen, stehen dir verschiedene Optionen zur Verfügung. Eine Möglichkeit ist das Drücken von F12. Wenn du auf einem Mac arbeitest, kannst du die Tastenkombination Command + Option + I verwenden. Windows-Nutzer können alternativ auch die Kombination Control + Shift + I verwenden. Möchtest du die DevTools über das Kontextmenü öffnen, klickst du mit der rechten Maustaste auf den Header der Webseite und wählst "Untersuchen".

Die Oberfläche der Edge-DevTools wird dir sofort vertraut vorkommen, wenn du bereits mit den Chrome-Dev-Tools gearbeitet hast. Die Tabs sind da, die Icons sehen etwas anders aus, und die zusätzlichen Tools erreichst du über ein „Plus“-Symbol in der oberen Leiste. In Chrome wurden diese zusätzlichen Tools über das Hauptmenü zugänglich gemacht.

Wenn du ein neues Tab in den Edge-DevTools hinzufügen möchtest, klickst du einfach auf das Plus-Symbol. So kannst du zum Beispiel das Animationstool hinzufügen. Dieses wird dann oben in der Tab-Leiste angezeigt, ähnlich wie in den Chrome-Entwicklertools.

Ein "Welcome"-Tab ist ebenfalls vorhanden, ähnlich wie die "What's New"-Seite in Chrome. Du kannst dir hier eine Übersicht über die Funktionen der Dev-Tools anzeigen lassen. Ich empfehle dir, diesen Tab durchzusehen, um gegebenenfalls nützliche Tipps und Tricks zu entdecken, die wir im Kurs noch nicht behandelt haben.

Ein weiteres nützliches Feature der Edge-DevTools ist die Möglichkeit, die Tab-Leiste nach links zu verschieben. Dies ermöglicht eine vertikale Anordnung der Tabs. Die Icons erscheinen dann als Tooltipps, was Platz spart und mehr Raum für die Werkzeuge selbst bietet.

Die designtools selbst können über verschiedene Einstellungen modifiziert werden, die den Chrome-Einstellungen ähneln. Du kannst die Aufklappmenüs, die Dokumentation und die Aktivitätsleiste anpassen. So behältst du die gewohnte Arbeitsumgebung.

Eines der wenigen Unterschiede ist das zusätzliche Symbol für Azure DevOps in den Edge-Tools, das in Chrome nicht vorhanden ist. Dies ist besonders nützlich für Entwickler, die in der Azure-Umgebung arbeiten.

Sobald du dich in den jeweiligen Tabs befindest, wirst du feststellen, dass die Struktur und die Funktionen in beiden Tools nahezu identisch sind. Du kannst die Stile, berechneten Layouts und alles andere, was du in Chrome gewohnt bist, auch in Edge benutzen.

Die Feature-Updates können sich jedoch leicht unterscheiden. Wenn Chrome ein neues Feature hinzufügt, kann es sein, dass dieses in Edge etwas später verfügbar ist oder umgekehrt. Daher ist es ratsam, regelmäßig zu überprüfen, welche neuen Funktionen in den verschiedenen Tools hinzugefügt werden.

Das war eigentlich alles, was du über die Edge-DevTools wissen musst. Wenn du mit den Chrome Developer Tools bereits vertraut bist, wirst du dich auch schnell in den Edge Dev Tools zurechtfinden.

Zusammenfassung

In diesem Tutorial hast du die Ähnlichkeiten und Unterschiede zwischen den Google Chrome und Microsoft Edge Developer Tools kennengelernt. Du weißt jetzt, wie du die Tools öffnest und welche Funktionen dir zur Verfügung stehen, um effizient an deinen Webprojekten zu arbeiten.