Für einen Entwickler kann es hektisch sein, zahlreiche dedizierte Tools für jede Aufgabe zu verwenden. Webbrowser-Add-Ons können Sie jedoch produktiver machen, indem sie den Zugriff auf verschiedene Funktionen von einer Browserplattform aus ermöglichen.
Alle Top-Browser sind mit Erweiterungen für Profis ausgestattet. Und wenn Sie Microsoft Edge verwenden, können Ihre Entwicklungsaufgaben mit einigen Browser-Add-Ons einfacher werden. Hier besprechen wir die besten Microsoft Edge-Add-Ons, die Webentwickler verwenden sollten.
React Developer Tools ist ein DevTools-Add-On für den Webbrowser. Es werden zwei neue Registerkarten mit den Namen Komponenten und Profiler in Ihren Edge DevTools hinzugefügt. Das Open-Source-Add-On benötigt Ihre Erlaubnis, um auf den React-Baum einer Seite zuzugreifen.
Die Registerkarte Komponenten zeigt die React-Stammkomponenten der Seite zusammen mit den Unterkomponenten an. Wählen Sie eine beliebige Komponente aus der Baumstruktur aus, um ihre aktuellen Requisiten, den Status und die Hooks im rechten Bereich zu überprüfen und zu bearbeiten.
Sie können dieses Add-on auch verwenden, um herauszufinden, ob eine Anwendung React.js enthält oder nicht. Auf der Registerkarte „Profiler“ können Entwickler Leistungsinformationen aufzeichnen.
Wenn Sie GitHub-Code analysieren möchten, kann das Octotree-Add-on die Erfahrung der GitHub-Codeüberprüfung und -exploration verbessern. Es zeigt Ihnen einen IDE-ähnlichen Codebaum und lässt Sie Datei- und Ordnersuchen durchführen.
Dieses leistungsstarke Add-On ist in der Lage, mit Repositories jeder Größe zu arbeiten. Außerdem unterstützt es private Repositories und ermöglicht es Ihnen, Pull-Requests, Repo, Dateien und Probleme mit Lesezeichen zu versehen.
Sie können auch die PRO-Version dieses Add-Ons abonnieren, um einige zusätzliche Funktionen zu erhalten. Dazu gehören Unterstützung für mehrere GitHub-Konten und GitHub Enterprise, mehrere Registerkarten, Einstellungen für Code-Schriftarten, Pull-Request-Code-Review, Dateisymboldesigns und Andockposition ändern.
Accessibility Insights for Web ist ein Browser-Add-On für Microsoft Edge, mit dem Sie Barrierefreiheitsprobleme in verschiedenen Webanwendungen und Websites finden und beheben können. Damit können Sie die Einhaltung von rund 50 Barrierefreiheitsbestimmungen überprüfen.
Dank der klaren Anweisungen und eines visuellen Helfers können Sie schnell wichtige Probleme beim Tastaturzugriff erkennen, darunter Tastaturfallen, fehlende Tabstopps und falsche Tabulatorreihenfolge.
Es hilft Ihnen auch, einen zweistufigen Prozess durchzuführen, um häufige, aber schwerwiegende Barrierefreiheitsprobleme innerhalb weniger Minuten zu lokalisieren. Sie benötigen jedoch Microsoft Edge Insider v.75 oder höher, um dieses Add-on zu verwenden.
Die Analyse des HTML-Codes einer Seite ist eine häufige Aufgabe eines Entwicklers. Mit Hilfe des Add-Ons Design Analysis können Sie eine HTML-Seite analysieren, indem Sie verschiedene Komponenten dieser Seite aktivieren und deaktivieren.
Verwandt: Coole HTML-Effekte, die jeder zu seinen Websites hinzufügen kann
Damit können Sie internes und externes (einschließlich Druck- und Handheld-) CSS deaktivieren und Bilder und Hintergrund ausblenden Bilder, Bild-Alt-Attribute anzeigen, Gliederungsüberschriften, Rahmen, externe Links, Tabellen, schwebende Elemente und bald.
Außerdem enthält dieses Add-On verschiedene Tools, mit denen Sie versteckte Elemente anzeigen und neu laden können Bilder und externes CSS, Quellcode anzeigen, Seiten linearisieren und alle Links als besucht oder markieren nicht besucht.
Dieses Add-on speichert oder teilt keine personenbezogenen Daten. Alle für das Funktionieren erforderlichen Informationen bleiben auf Ihrem Gerät.
Mit dem Add-on „Als MHTML speichern“ können Entwickler die aktuelle Webseite im MHTML (MIME HTML)/MHT-Format speichern. Das Add-On verfügt über eine Symbolleistenschaltfläche für eine mühelose Verwendung. Es speichert alle Online-Links in einem Offline-Format.
MHTML ist ein Archivdateiformat, das den Inhalt der Webseite für die Offline-Anzeige speichert. Der Dateityp integriert während des Prozesses alle Ressourcen wie Bilder, Applets und Flash-Animationen in HTML-Dokumente.
Das Add-On verfügt über zwei verschiedene Tools, mit denen Sie den Webseiteninhalt der Seite bearbeiten können, bevor Sie ihn in der MHTML-Datei speichern.
Sie können den Designmodus für Aufgaben wie das Ändern des Textformats in Fett und Kursiv, das Hinzufügen eines Bildes oder das Entfernen von Inhalten auswählen. Oder Sie können einen Abschnitt der Seite auswählen und dieses Add-On bitten, daraus ein neues Dokument zu erstellen.
Entwickler haben eine unverzichtbare Beziehung zu Cookies. Cookie-Editor ist ein leistungsstarkes Add-on, mit dem Sie die Standard-Cookie-Operationen während der Webseiten-Entwicklungs- und Testphase durchführen können.
Dieses Add-on verfügt über eine benutzerfreundliche Oberfläche, mit der Sie die Cookies manuell verwalten können. Mit seiner Hilfe können Sie Cookies schnell erstellen, bearbeiten und löschen, während Sie auf dem Tab bleiben.
Mit einem Klick löscht der Cookie-Editor alle Cookies der aktuellen Seite. Es kann auch Cookies in einem Textformat importieren/exportieren.
Node.js V8 ist ein Add-On, das Sie mit Edge DevTools verwenden können, um Ihren Node.js-Entwicklungszyklus zu optimieren. Es kann den Lebenszyklus von Fenstern/Registerkarten von Edge DevTools verwalten, sodass Sie mehr Zeit haben, sich auf das Debuggen Ihres Codes zu konzentrieren.
Verwandt: Was ist Rubber Duck Debugging?
Mit dem Node.js V8-Add-On können Sie lokale und Remote-Debugging-Sitzungen überwachen und gleichzeitig die DevTools-Schnittstelle sowohl manuell als auch automatisch steuern. Sie können es auch verwenden, um VSCode-Knotenprozesse zu debuggen und die Dauer zwischen den Tests des v8 Inspector anzupassen.
Mit seiner Hilfe können Sie Edge DevTools automatisch in einem Tab oder Fenster öffnen und schließen und DevTools beim Start aktivieren oder inaktiv machen. Seine Inspektionsfunktion erspart Ihnen das Kopieren und Einfügen der DevTools-URL, indem die generierte URL beim Ausführen des Knotens automatisch erkannt wird.
BugReplay ist in erster Linie ein Add-On, das für Screencasts und Netzwerk-Debugging verwendet wird. Es hilft Ihnen, Ihren Bildschirm synchron mit JavaScript-Konsolennachrichten und Netzwerkverkehr aufzuzeichnen. Dank dieses Add-Ons müssen Sie lediglich die Schritte zum Erfassen von Fehlern in Echtzeit nachvollziehen.
Es ist nicht erforderlich, dass ein Entwickler mit den Endbenutzern oder den Support-Mitarbeitern hin und her kommuniziert. Sie können anhand der aufgezeichneten Informationen nahtlos herausfinden, wann und wo der Fehler aufgetreten ist, und das Problem in kürzester Zeit beheben.
Das Aufzeichnen des Fehlers wird mit dem BugReplay-Add-on zum Kinderspiel. Sie können den Fehler auch überprüfen, bevor Sie ihn mit Ihren Kollegen teilen. Das Add-On bietet auch die Möglichkeit, es öffentlich zu machen.
Wählen Sie Ihre bevorzugten Edge-Add-Ons für die Entwicklung
Indem Sie diese Liste von Microsoft Edge-Add-Ons durchgehen, können Sie diejenigen auswählen, die Ihnen bei der Web- und App-Entwicklung helfen. Denken Sie daran, dass Microsoft Edge auch andere Add-Ons für normale Benutzer hat. Sie können Mainstream-Erweiterungen für andere Aufgaben wie die Passwortverwaltung durchsuchen und finden.
Es kann schwierig sein, sich all Ihre verschiedenen Passwörter zu merken. Hier sind die neun besten Microsoft Edge-Add-Ons für eine mühelose Passwortverwaltung.
Lesen Sie weiter
- Programmierung
- Microsoft Edge
- Browser-Erweiterungen
- Web Entwicklung
Tamal ist freiberuflicher Autor bei MakeUseOf. Nach dem Sammeln umfangreicher Erfahrungen in Technologie, Finanzen und Wirtschaft Prozesse in seinem vorherigen Job in einem IT-Beratungsunternehmen, hat er vor 3 Jahren das Schreiben als Vollzeitberuf erlernt. Obwohl er nicht über Produktivität und die neuesten technischen Nachrichten schreibt, liebt er es, Splinter Cell zu spielen und Netflix/Prime Video anzuschauen.
Abonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich anzumelden