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 nun einen Blick auf die besten Browsererweiterungen für Entwickler und warum Sie sie möglicherweise zu 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 Tool zur Überprüfung der Barrierefreiheit. Es ist immer am besten, Ihre Seiten so zugänglich wie möglich zu gestalten, und ax hilft Ihnen dabei, zu vermeiden, dass versehentlich ein Benutzersegment von Ihrer Website ausgeschlossen wird. 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, wenn Sie das Formular eigentlich nicht absenden möchten (was möglicherweise eine zusätzliche Verarbeitung auslöst, die Sie nicht testen müssen). Mit diesem Tool können Sie HTTP-Anfragen mühelos fälschen. Beachten Sie, dass die Chrome- und Firefox-Erweiterungen zwar denselben Namen haben und dieselben Aufgaben ausführen, jedoch von verschiedenen Entwicklern erstellt wurden und nicht genau gleich sind. Download links: Chrom / Chrom, Firefox

8. Seitenleistungstest

Erhalten Sie schnell einen Bericht über die Leistung Ihrer Seite in den verschiedenen Phasen ihrer Reise zu Ihrem Browser. Es ist so etwas wie eine fortgeschrittenere Version von Tracert. Dieses ist derzeit nur für Firefox verfügbar. Es gibt ähnliche Erweiterungen für Chrome und Chromium, aber sie bieten nicht so viele 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 Richtlinien für die beste Webentwicklungspraxis einhalten, damit Sie feststellen können, wo Ihre Standards möglicherweise verfehlt sind. 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 ordnungsgemäß funktionieren und auf welchem ​​Bootstrap-Level sich der aktuelle Modus befindet. Natürlich benötigen Sie diese Erweiterung nur, wenn Sie tatsächlich in Bootstrap arbeiten. Die Chrome-Version wurde von Jonathan Defraiteur entwickelt und die Firefox-Version wurde von Kevin Bon entwickelt. Download links: Chrom / Chrom, Firefox

14. Probieren Sie es selbst HTML5 Editor

Wenn Sie es lieber einfach halten und Ihre gesamte Arbeit von einem Ort aus erledigen möchten, ist diese Erweiterung genau das Richtige für Sie. Dieser kontextsensitive Editor ist reich an Funktionen und funktioniert direkt im Browser. Er 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, erledigt es die Arbeit. Download links: Firefox

15. Röntgenbrille

Technisch gesehen handelt es sich hier nicht um eine Erweiterung, sondern um ein Bookmarklet. Aber es funktioniert so gut, dass wir es nicht von der Liste streichen konnten. Obwohl es von Mozilla stammt, funktioniert es in Chrome genauso gut, da beide Browser vollständig standardkonform sind. Um es zu verwenden, 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. Dann besuchen Sie einfach eine beliebige Website, aktivieren Sie Ihr X-Ray Goggles-Lesezeichen, 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.