Entdecken Sie die 15 besten Browser-Erweiterungen für Entwickler

Wenn Sie einen Dienst über einen Link auf dieser Seite abonnieren, verdient Reeves and Sons Limited möglicherweise eine Provision. Siehe unsere Ethikerklärung.

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 werden wir versuchen, den Vorzug zu geben browserübergreifend Add-Ons/Erweiterungen, was in diesem Kontext bedeutet, dass sie auf Firefox, Chrome und Chromium funktionieren. Wir bevorzugen auch kostenlose Erweiterungen, von denen nicht bekannt ist, dass sie Ihre Eingaben weiterleitenformatan Dritte weitergegeben und werden nicht durch Werbeeinnahmen unterstützt. Wir konzentrieren uns mehr auf Erweiterungen, 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 zur Steuerung von CSS, Formularen, Bildern usw. hinzuformatIon. Eine der beliebtesten Erweiterungen aller Zeiten. 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 befinden, und Sie können die Seite mit Ihrem Telefon besuchen, indem Sie einfach den QR-Code scannen. Gut zum Testen responsive Websites, 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. Bootstrapping Responsive Helfer

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 Monika Pola

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.

Kommentare 0 Antworten

Hinterlassen Sie uns einen Kommentar

E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder sind MIT * gekennzeichnet. *

Rating *

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.