15 Best Browser Extensions für Entwickler (2019)

Die größte Änderung für 2018 war die umfassende Überarbeitung von FireFox und damit die Funktionsweise von Add-Ons in diesem Browser. Viele beliebte Add-Ons werden daher nicht mehr gewartet oder sind nicht mehr verfügbar.

Die meisten Add-Ons für Firefox sind auch als Erweiterungen für Google Chrome verfügbar. In diesem Artikel versuchen wir, browserübergreifenden Add-Ons / Erweiterungen den Vorzug zu geben, was in diesem Zusammenhang bedeutet, dass sie mit Firefox, Chrome und Chromium funktionieren. Außerdem bevorzugen wir kostenlose Erweiterungen, von denen nicht bekannt ist, dass sie Ihre Informationen an Dritte weitergeben und nicht durch Werbeeinnahmen unterstützt werden. Wir werden uns mehr auf Erweiterungen konzentrieren, die Sie nicht auf eine bestimmte Entwicklungstechnologie beschränken.

Wenige Entwickler würden einen Vorteil bei der Verwendung von Microsoft Edge als Entwicklungsbrowser sehen, aber für Tests nach der Entwicklung ist dies in Ordnung. Es ist zu erwarten, dass Besucher der 4-Website nur ein wenig mehr als 100 verwenden, obwohl diese Zahl leicht ansteigen wird, da mehr Benutzer den Internet Explorer aufgeben.

Obwohl es weitaus mehr Chrome-Benutzer als Firefox-Benutzer gibt, bevorzugen die IT-Leute Firefox, weshalb es mehr und bessere Erweiterungen für Entwickler in Firefox gibt.

Werfen wir einen Blick auf die besten Browsererweiterungen für Entwickler und warum Sie sie vielleicht Ihrem Browser hinzufügen möchten.

1. Mit gebaut

Wenn Sie sich auf einer wirklich gut gemachten Site befinden und wissen möchten, wie diese erstellt wurde, können Sie mit dieser Erweiterung viel Zeit und Mühe sparen, wenn Sie im Quellcode herumgraben. Download links: Chrom / Chrom, Firefox

2. Axt

Dies ist ein Audit-Tool für die Zugänglichkeit. Es ist immer am besten, zu versuchen, Ihre Seiten so zugänglich wie möglich zu machen, und ax hilft Ihnen dabei, zu vermeiden, dass Sie versehentlich ein Segment von Benutzern von Ihrer Website ausschließen. Download links: Chrom / Chrom, Firefox

3. ColorZilla

Ein Oldie, aber immer noch ein Bonbon: Mit dieser Erweiterung können Sie Farben direkt von einer Seite aus abtasten, Farbcodes abrufen, Farbverläufe erstellen und mehr. Download links: Chrom / Chrom, Firefox

4. Web-Entwickler

Fügt Ihrem Browser einige nützliche Extras hinzu, um CSS, Formulare, Bilder und Informationen zu steuern. Eine der beliebtesten Erweiterungen, die jemals gemacht wurden. Download links: Chrom / Chrom, Firefox

5. Woo Rang

Analysieren Sie jede Webseite auf SEO-Daten. Bietet einen leistungsstarken Bericht mit allen SEO-Interna, einschließlich einer Gesamt-SEO-Bewertung, Verbesserungsvorschlägen, Keyword-Cloud und vielem mehr. Download links: Chrom / Chrom, Firefox

6. Tab2QR

Generieren Sie einen QR-Code der Seite, auf der Sie sich gerade befinden, und Sie können die Seite mit Ihrem Telefon besuchen, indem Sie den QR-Code scannen. Gut geeignet, um responsive Sites zu testen, auch wenn Sie sie nicht erstellt haben. Download links: Chrom / Chrom, Firefox

7. HTTP Request Maker

Dies kann sehr nützlich sein, um PHP-Formularantworten zu testen, bei denen Sie das Formular nicht wirklich senden möchten (was möglicherweise zusätzliche Verarbeitung auslöst, die Sie nicht testen müssen). Mit diesem Tool können Sie mühelos HTTP-Anforderungen fälschen. Obwohl die Chrome- und Firefox-Erweiterungen denselben Namen haben und dieselben Aktionen ausführen, werden sie von verschiedenen Entwicklern erstellt und sind nicht exakt gleich. Download links: Chrom / Chrom, Firefox

8. Seitenleistungstest

Erhalten Sie schnell einen Bericht darüber, wie sich Ihre Seite in den verschiedenen Phasen ihrer Reise zu Ihrem Browser verhält. Es ist eine Art erweiterte Version von Tracert. Dieses ist momentan nur für Firefox verfügbar. Es gibt ähnliche Erweiterungen für Chrome und Chromium, sie sind jedoch nicht so reich an Funktionen wie diese. Download links: Firefox

9. Word Count Tool

Dies kann tatsächlich mehr als der Name vermuten lässt, da es Ihnen auch sagen wird, wie viele Zeichen und wie viele Sätze sich in einem ausgewählten Textblock (oder der gesamten Seite) befinden. Download links: Chrom / Chrom, Firefox

10. Web Developer Checkliste

Stellen Sie mit diesem Tool sicher, dass Sie die besten Richtlinien für die Webentwicklung befolgen, und zeigen Sie auf, wo Ihre Standards möglicherweise nachgegeben haben. Download links: Chrom / Chrom, Firefox

11. Image Map Editor

Eine von drei hervorragenden Erweiterungen des deutschen Entwicklers Heinz-Jürgen Boms, der genau das tut, was der Name sagt. Sie können eine Imagemap direkt im Browser erstellen, indem Sie einfach die Bereiche eines Bildes nachzeichnen, die Sie zuordnen möchten. Download links: Firefox

12. Erweiterter Frame-Editor

Eine weitere Erweiterung von Heinz-Jürgen Boms. Dies ist wirklich ein CSS-Styling-Tool, mit dem Sie einen Frame direkt im Browser erstellen können, indem Sie dessen Attribute angeben. Es lohnt sich die Dokumentation bevor Sie anfangen, es zu benutzen. Download links: Firefox

13. Responsive Helfer für Bootstrap

Dies ist eine sehr einfache, kleine Erweiterung, mit der Sie schnell erkennen können, ob Ihre Haltepunkte korrekt funktionieren und welche Bootstrap-Ebene der aktuelle Modus ist. Natürlich benötigen Sie diese Erweiterung nur, wenn Sie tatsächlich in Bootstrap arbeiten. Die Chrome-Version wurde von Jonathan Defraiteur und die Firefox-Version von Kevin Bon entwickelt. Download links: Chrom / Chrom, Firefox

14. Probieren Sie es selbst HTML5 Editor

Wenn Sie es vorziehen, die Dinge einfach zu halten und alle Ihre Aufgaben von einem Ort aus erledigen zu lassen, ist diese Erweiterung genau das Richtige für Sie. Dieser kontextabhängige Editor ist reich an Funktionen und arbeitet direkt im Browser und unterstützt HTML, CSS und JavaScript. Es ist alles andere als perfekt, aber für eine schnelle und schmutzige Bearbeitung ohne die Mühe, eine separate Anwendung zu öffnen, wird die Arbeit erledigt. Download links: Firefox

15. Röntgenbrille

Technisch gesehen handelt es sich nicht um eine Erweiterung, sondern um ein Bookmarklet. Aber es funktioniert so gut, wir konnten es nicht von der Liste lassen. Obwohl es von Mozilla hergestellt wurde, funktioniert es in Chrome gleichermaßen, da beide Browser vollständig standardkonform sind. Um sie verwenden zu können, müssen Sie Ihre Lesezeichenleiste sichtbar machen. Besuchen Sie dann die Download-Seite, die Sie über die untenstehenden Links erreichen, und ziehen Sie die Schaltfläche "Röntgenbrille" auf die Lesezeichenleiste. Besuchen Sie einfach eine beliebige Website, rufen Sie Ihr X-Ray Goggles-Lesezeichen auf, wählen Sie ein Element auf der Seite aus, und Sie können den Code dafür bearbeiten. Download links: Chrom / Chrom, Firefox

Headerbild mit freundlicher Genehmigung von

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.