WhatsApp

12 Chrome-Erweiterungen für Entwickler und Designer

Anonim

Heute teile ich mit Ihnen meine kuratierte Liste mit 12 Chrome-Erweiterungen für Designer und Entwickler. Ich freue mich, dass dies mein Fachgebiet ist, also fangen wir gleich an.

1. Der große Hosenträger

The Great Suspender ist eine kostenlose und Open-Source-Erweiterung für Google Chrome, die den von Chrome verwendeten Speicherplatz minimiert. Dazu werden inaktive Registerkarten automatisch gesperrt.Unter der Haube entfernt es die ruhenden Webseiten von ihren Grafiken, JS usw.

The Great Suspender Chrome Extension

2. UX-Check

UX Check Die Chrome-Erweiterung hilft Ihnen, Usability-Probleme durch eine schnelle und einfache heuristische Bewertung zu erkennen.

Der Arbeitsablauf ist einfach. Klicken Sie auf das Symbol, um Nielsen's Ten Heuristics in einem Seitenbereich zu starten, wie mit Chrome Dev Tools . Sie können auf alle Elemente klicken, die die Bewertung nicht bestehen, um Notizen hinzuzufügen, Screenshots zu machen und sie zur einfachen Weitergabe als .docx-Datei zu exportieren.

UX Check Chrome-Erweiterung

3. Augentropfen

Eye Dropper ist meiner Meinung nach das großartigste Tool zur Farbauswahl.Es verfügt über 2 Registerkarten – Eyedropper und Cooler Picker. Mit dem Pipettenwerkzeug können Sie Farben von jeder Webseite auswählen, während Sie mit dem Farbauswahlwerkzeug benutzerdefinierte Farben auswählen können.

Farben, die auf Webseiten oder auf der Registerkarte „Farbauswahl“ ausgewählt wurden, werden automatisch in einer Palette gespeichert, die Sie als CSV-Datei herunterladen können. Außerdem zeigt Eye Dropper alle Farben in RGB-, HSL-, HEX-Codes und nach Namen an und unterstützt Tastaturkürzel.

Eye Dropper Chrome-Erweiterung

4. FontFace Ninja

FontFace Ninja kann Informationen zu allen Schriftarten auf jeder Website anzeigen. Es enthält Download-Links für kostenlose Schriftarten und eine Option, um die Preise kostenpflichtiger Schriftarten anzuzeigen.

FontFace Ninja bietet auch Optionen zur Verwendung des Dunkelmodus, zum Erkennen von Schriftarten in Bildern (Beta) und zum Anzeigen von Lesezeichenoptionen.

FontFace Ninja Chrome-Erweiterung

5. Seitenlineal

Seitenlineal ist eine minimalistische Linealerweiterung, mit der Sie Breiten und Höhen auf Webseiten messen können. Es bietet mehrere Tastenkombinationen, Navigation durch über- und untergeordnete Elemente, Messrichtlinien und Lokalisierung in 10 Sprachen.

Seitenlineal-Chrome-Erweiterung

6. Facebook-Video-Downloader

FB Down kann ganz einfach Videos von Facebook und jeder anderen Seite mit Videowiedergabe herunterladen. Sie können damit alle gängigen Medienformate herunterladen, einschließlich bestimmter urheberrechtlich geschützter Videos (wenn Sie das Video ohne Audio herunterladen).

FB Down fungiert als Link-Sniffer auf Webseiten und das Symbol leuchtet auf, wenn herunterladbare Inh alte erkannt werden.

Facebook Video Downloader Chrome-Erweiterung

7. PerfektPixel

PerfectPixel von WellDoneCode ist die beste Erweiterung zum Erstellen pixelgenauer Websites. Sie können damit Bilder als Overlays festlegen, die Sie mit der Entwicklungsseite vergleichen können. Es unterstützt Tastaturkürzel, halbtransparente Bildüberlagerung und mehr.

PerfectPixel Chrome-Erweiterung

8. TinEye

TinEye ist das perfekte umgekehrte Bildsuchwerkzeug und das erste, das anstelle von Schlüsselwörtern, Metadaten oder Wasserzeichen eine Bildidentifikationstechnologie implementiert. Es erstellt eindeutige digitale Signaturen für Bilder und vergleicht dann die Signaturen mit denen in seinem Index.

TinEye gibt nicht nur ähnliche Bilder in seinen Suchergebnissen zurück, sondern exakte Übereinstimmungen, ausgenommen beschnittene, in der Größe geänderte und bearbeitete Versionen.

TinyEye Chrome-Erweiterung

9. CSS-Pfeffer

CSS Pepper ermöglicht es Ihnen, CSS (auch von versteckten Objekten) zu extrahieren und schöne Styleguides auf gut organisierte Weise zu erstellen. Dies ermöglicht es Designern und Entwicklern, Zeit mit der Arbeit am Design zu verbringen, anstatt Code zu durchsuchen.

CSS Pepper Chrome-Erweiterung

10. Was läuft

WhatRuns informiert Sie über alles, was auf einer Website ausgeführt wird, einschließlich Frameworks, Designs, Schriftarten, CMS usw.

Außerdem können Sie Websites folgen, damit die Erweiterung Sie benachrichtigt, wenn neue Technologien hinzugefügt werden.

WhatRuns Chrome-Erweiterung

11. Muzli

Muzli ist eine kostenlose Erweiterung, die Tausende von schönen, inspirierenden Designs in Form eines neuen Tab-Ersatzes direkt in Ihren Browser bringt .

Jedes Mal, wenn Sie einen neuen Tab öffnen, füllt Muzli ihn mit einigen der schönsten Designs aus über 120 Quellen, darunter InVision, Muzli, Dribble, Product Hunt, CNN, CSS Author usw.! Dies ist ein Juwel für Designer.

Muzli Chrome-Erweiterung

12. Maße

Dimensions ist eine kostenlose Open-Source-Erweiterung, die Ihnen eine intelligente Möglichkeit bietet, Abstände zwischen Seitenelementen zu messen.

Finden Sie die Abmessungen von Bild- und HTML-Elementen, indem Sie mit der Maus relativ ziehen und darüber schweben. Sie können auch Tastaturkürzel verwenden, um zu arbeiten – denken Sie daran, am Ende der Liste der Chrome-Erweiterungen ein Tastaturkürzel festzulegen, um die Erweiterung umzusch alten und das beste Erlebnis zu genießen.

Dimensions-Chrome-Erweiterung

Es gibt andere Erweiterungen, die Sie kennen sollten, z. Checkbot zielt darauf ab, Ihren SEO-Ruf und die allgemeine Geschwindigkeit und Sicherheit Ihrer Website zu verbessern, indem es auf defekte Links, unsichere Seiten, ungültiges HTML/CSS/JS, doppelte Titel und andere prüft Probleme, die Sie während der Entwicklung möglicherweise nicht bemerken.

Und Check My Links das durch Ihre Webseiten kriecht, um sicherzustellen, dass Sie keine defekten Links haben – dieses ist kostenlos, aber nicht so robust.

Haben Sie coole Erweiterungen für Designer und Entwickler, die wir kennen sollten? Fügen Sie sie im Kommentarbereich unten hinzu.