WhatsApp

12 Firefox-Add-ons für Entwickler & Designer

Anonim

Erst kürzlich haben wir einen Beitrag zu den 12 Google Chrome-Erweiterungen für Entwickler und Designer veröffentlicht, und während einige dieser Erweiterungen auf Firefox verfügbar sind , ich würde hier keine wiederholen.

Ebenso sind einige der unten aufgeführten Erweiterungen auf Chrome verfügbar, betrachten Sie solche Apps also als Bonus für die jeweiligen Browser.

1. HTML-Validator

HTML Validator durchläuft Ihren Code, um sicherzustellen, dass er den HTML-Standardkonventionen entspricht. Es zeigt die Anzahl der erkannten Fehler auf dem Symbol in der Symbolleiste an.

HTML Validator Firefox Addon

2. Oktobaum

Als Entwickler gehe ich bei der Suche hin und wieder mehrere Codepages auf GitHub durch, um zu sehen, wie andere Entwickler bestimmte Probleme gelöst haben . Wenn Sie wie ich sind, werden Sie Octotree nützlich finden.

Octotree zeigt GitHub-Code in einem Baumformat an. Auf diese Weise können Sie Codezeilen durchsuchen, ohne die Quelldateien herunterzuladen.

Octotree zeigt GitHub-Code im Baumformat

3. HTTPS überall

HTTPS Everywhere verschlüsselt die Daten, die Sie mit allen wichtigen Webseiten austauschen, auch wenn diese kein HTTPS verwenden.

Wenn Sie also auf Seiten weitergeleitet werden, die kein https verwenden, können Sie sicher sein, dass Ihre Online-Kommunikation sicher ist.

4. Seitenleistungstest

Seitenleistungstest gibt Ihnen Statistiken zu Ihren Webseiten, indem deren Geschwindigkeit und Ladeleistung gemessen werden. Sie können die Ergebnisse des Diagramms speichern, um es mit nachfolgenden Tests zu vergleichen.

Seitenleistungstest

5. Benutzernap

Mit

Usersnap können Sie Screenshots von Websites erstellen und diese durch Hinzufügen von Markierungszeichnungen und Kommentaren kommentieren. Es wird auch mit einem Pixellineal geliefert und kann direkt in verschiedene Projektmanagement-Tools integriert werden, darunter Slac, Trello und JIRA.

Diese Liste ist ohne Usersnap nicht vollständig, da es einen effektiven Feedbackprozess ermöglicht. Es ist jedoch ein kostenpflichtiger Dienst mit einer 14-tägigen kostenlosen Testversion.

Usersnap

6. Javascript aussch alten

JavaScript deaktivieren gibt Ihnen, wie der Name schon sagt, die Möglichkeit, JavaScript auf Websites oder nur auf bestimmten Registerkarten zu deaktivieren. Sie können es so anpassen, dass es einen standardmäßigen JS-Status von ein/aus und ein standardmäßiges Deaktivierungsverh alten nach Domäne/Registerkarte usw. hat.

Javascript aussch alten

7. Checkliste für Webentwickler

Die Web Developer Checklist-Erweiterung bietet Ihnen einen Überblick darüber, wie benutzerfreundlich Ihre Website gemäß den besten Design- und Entwicklungspraktiken ist.

Wenn Sie auf das Symbol klicken, werden Sie über die SEO Ihrer Website, benutzerfreundliche URLs, Favicon usw. informiert, wobei Häkchen daneben angezeigt werden, um ein Passieren anzuzeigen.

Checkliste für Webentwickler

8. Reagieren Sie auf Entwicklertools

Mit dem scheinbar endlosen Anstieg der Popularität von React werden fast jeden Tag React-Entwickler geboren und das React-Team kümmert sich um sie.

React Developer Tools gibt Ihnen die Möglichkeit, einen React-Baum zusammen mit seinem Zustand, Requisiten, Hierarchie usw. zu inspizieren, um ihn zu aktivieren , starten Sie die Firefox-Entwicklungstools und wechseln Sie zum React-Tab.

Mit den Vue.js devtools gibt es auch eine Version für Vue Entwickler.

React-Entwicklertools

9. ColorZilla

ColorZilla ist ein hervorragendes Tool für Entwickler und Grafikdesigner, um Farben von verschiedenen Webseiten auszuwählen.

Es enthält auch eine Pipette, einen Verlaufsgenerator, einen Palettenbrowser und einen Farbverlauf.

ColorZilla

10. Evernote Web Clipper

Mit

Evernote Web Clipper können Sie Screenshots von Webseiten erstellen und diese automatisch in Ihrem Evernote speichernKonto, von dem aus Sie Anmerkungen machen und mit Teammitgliedern teilen können.

Evernote Web Clipper

11. Cookie-Manager

Cookie Manager ist eine sicherheitsbewusste Erweiterung, mit der Sie Cookies in allen anzeigen, hinzufügen, bearbeiten, löschen und suchen können Domain.

Noch cooler am Cookie Manager ist, dass Sie Cookies zwischen Domains exportieren und importieren können.

Cookie-Manager

12. Live-Editor für CSS und LESS

Live Editor für CSS und LESS ermöglicht es Ihnen, CSS/LESS-Code direkt in Ihren Browser zu schreiben. Ihr Code wird sofort wirksam und auf Site-Ebene im lokalen Speicher Ihres Browsers gespeichert.

Der In-Page-Editor bietet Funktionen zur automatischen Vervollständigung, Verschönerung, Linter usw. Sie sollten es sich ansehen.

Live-Editor für CSS

Gefällt Ihnen eine der aufgelisteten Erweiterungen oder haben Sie eine Liste, die wir verwenden können? Der Kommentarbereich befindet sich unten.