Top 10 Chrome-Erweiterungen und -Tools für Webdesigner

Wenn Sie als Designer nützliche Tools benötigen, um Ihre Webentwicklungsprojekte zu beschleunigen, zusammenzuarbeiten oder zu prüfen, bietet die Chrome - Erweiterung eine Vielzahl von Tools.

Diese Liste enthält einige der beliebtesten – und einige würden für notwendig halten – Tools und Chrome-Erweiterungen(tools and Chrome extensions) , die jeder Benutzer, der Designarbeiten durchführt, in seiner Ausrüstungstasche haben sollte.

1. DomFlags

DOM Flags ist eine einfach zu verwendende Chrome- Erweiterung, die Entwicklern eine neue Möglichkeit bietet, mit Browser-Tools zu arbeiten. Es ermöglicht Entwicklern, die Aufgabe des Stylings von Elementen zu beschleunigen.

Mit Tastaturkürzeln für jedes Element können Sie Ihre Navigation mit einem Lesezeichen versehen.

Wir alle haben die Schwierigkeit erlebt, hochdetaillierte Elemente zu inspizieren, und es ist leicht, sich zu verirren.

DOM-Flags ermöglichen es Ihnen, Styling-Elemente zu verfolgen und beinhalten eine Funktion zur automatischen Prüfung von Komponenten mit Genauigkeit. Dies wiederum trägt dazu bei, den Workflow und die Implementierung von DevTools zu beschleunigen.(DevTools)

Mit DOM Flags(DOM Flags) können Sie Änderungen nachverfolgen. Und konzentrieren Sie sich auf die Elemente, mit denen Sie arbeiten.

2. Heiß

Sizzy bietet Designern und Entwicklern eine einfache Möglichkeit, ihre Websites in mehreren Ansichtsfenstern zu testen.

Sizzy bietet eine einfache Möglichkeit, Ihr Design in Echtzeit zu überprüfen. Es bietet eine interaktive Ansicht beliebig vieler Geräte und Bildschirmgrößen. Sie können sogar eine Gerätetastatur simulieren und dann zwischen Quer- und Hochformat wechseln.

Durch die Installation einer Chrome -Erweiterung wird Ihrer Symbolleiste eine Schaltfläche hinzugefügt, die beim Klicken die aktuelle URL in der Sizzy- Plattform öffnet. Die Erweiterung blockiert alle „ x-frame-options “-Header, sodass Sie sich jede Website online ansehen können.

Sizzy ist ein Open-Source-Projekt, und Sie können den gesamten Code hier(here) sehen .

3. Checkbot

Checkbot kann Ihre Website auf Sicherheitsprobleme testen und auch die Ladegeschwindigkeit Ihrer Website prüfen. Es bietet Designern die Möglichkeit, typische Fehler zu identifizieren und Verbesserungen der Website-Sicherheit, der Suchmaschine und der Website-Geschwindigkeit zu empfehlen.

Anhand von mehr als 50 Best-Practice-Metriken wird eine Website auf Best-Practice -SEO , defekte Links, doppelte Inhalte und mehr geprüft. Das Tool validiert auch CSS , JS und HTML .

Checkbot erkennt Designer- und Programmierfehler in Echtzeit und erspart Ihnen die Mühe, zurückgehen und Ihre Arbeit wiederholt überprüfen zu müssen.

Wenn Sie nach einem qualitativ hochwertigen Tool suchen, das defekte Seitenlinks repariert, eindeutige Inhalte und Seitentitel sicherstellt und Weiterleitungsketten eliminiert, wäre dieses Tool nützlich.

Für Designer kann es Ihnen helfen, Ihr CSS und JS zu minimieren, sowie Empfehlungen geben, wie Sie Ihr CSS minimieren und das Browser-Caching nutzen können.

4. GistBox-Clipper

GistBox ist eine der hilfreichsten Chrome -Erweiterungen für Webdesigner.

GistBox kann aus jedem Codeblock auf der angezeigten Webseite einen GitHub-Gist erstellen.(GitHub Gist)

In der oberen rechten Ecke eines Codeblocks sehen Sie eine kleine Schaltfläche, die beim Drücken ein Popup öffnet, mit dem Sie den Code im Gist speichern können .

Sie können mit einem rechten Mausklick neue Gists erstellen und Codeblöcke zur späteren Überprüfung und Verwendung speichern.

Die Integration mit GitHub ermöglicht es Designern und Entwicklern, Codeblöcke zu sammeln und sie zu manipulieren oder sie für die spätere Verwendung zu kategorisieren. Dies macht es zu einem praktischen und effizienten Chrome- Erweiterungstool.

5. ColorZilla

ColorZilla ist eine unglaublich nützliche Chrome - Erweiterung zum Sammeln von Hex-Codes, die für einzelne Webdesign-Projekte markiert, beschriftet und kategorisiert werden können.

Es ermöglicht Ihnen, ein Pipettenwerkzeug auszuwählen, das die Farbe von jeder Webseite extrahiert und in der ColorZilla- Zwischenablage speichert.

Damit können Sie schnell Farbpaletten für die spätere Verwendung entwickeln und sicherstellen, dass Sie Farben in Webdesign und -entwicklung konsistent verwenden.

ColorZilla fungiert auch als Farbanalysator und CSS - Verlaufseditor, sodass Sie ein Bild in CSS konvertieren können .

6. WhatFont

 Diese Chrome(Chrome Extension) -Erweiterung ist eine echte Zeitersparnis für diejenigen, die ihre Lieblingsschriftarten verwenden und in ihr eigenes Webdesign-Projekt integrieren möchten.

Mit der Chrome-Erweiterung WhatFont(WhatFont Chrome) können Entwickler fast jede Schriftart auf jeder Webseite schnell analysieren und identifizieren.

Die Erweiterung ist gut entwickelt und anstatt Inspektionswerkzeuge öffnen zu müssen, funktioniert die Erweiterung, indem Sie einfach mit der Maus über die Schriftart schwenken.

Darüber hinaus identifiziert die Erweiterung auch den Dienst, der zum Bereitstellen einer Pages Go- Schriftart verwendet wird, und unterstützt Google Font API und Typekit.(Google Font API and Typekit.)

7. LightShot

LightShot ist ein schnelles Screenshot-Tool, mit dem Sie die gesamte oder einen Teil einer Seite erfassen und entweder hochladen oder herunterladen oder an ein Ziel eines Drittanbieters senden können.

Mit LightShot(LightShot) aufgenommene Screenshots können verwendet und in sozialen Medien geteilt oder gedruckt werden.

Sie können den ausgewählten Teil des Bildschirms kommentieren und Text, Pfeile und mehr hinzufügen. Aber vielleicht ist eine der brillantesten Funktionen dieses einfachen Tools für Webdesigner, dass Sie durch Auswählen eines Bildes eine vollständige Google -Bildsuche nach ähnlichen Bildern online durchführen können.

LightShot kann in mehreren Sprachen konfiguriert werden.

Die Erweiterung ist in reinem JavaScript geschrieben und funktioniert auch für Windows , Chromebook , Linux und Mac OS . Es kann auch als Desktop-Anwendung(desktop application) aufgerufen werden, was es zu einer ausgezeichneten Wahl für Webdesigner macht, die auf mehrere Geräte angewiesen sind.

8. Toller Screenshot

Wie Lightshot ist Awesome Screenshot eine Bildschirm- und Bilderfassungserweiterung.

Es unterscheidet sich jedoch in einigen Punkten von Lightshot . Awesome Screenshot kann so konfiguriert werden, dass alle Ihre Screenshots mit Ihrem Google -Laufwerk verbunden werden.

Es ermöglicht Ihnen, die Elemente zu scannen, die sich außerhalb Ihrer Sicht befinden, um die gesamte Seite zu erfassen. Es verfügt über zusätzliche Bearbeitungs- und Anmerkungswerkzeuge. Komma ermöglicht das Zuschneiden und Bearbeiten von Bildern innerhalb der Erweiterung ... oder mit der Verwendung zusätzlicher Awesome Screenshot-Anwendungen

Sie können die Funktionen erweitern, indem Sie auch die Chrome- Anwendung für den Desktop installieren. Die Erweiterung ermöglicht auch das Aufnehmen und Teilen von Videos, sodass Sie bei der Arbeit an einer beliebigen Website mit anderen Entwicklern oder Designern zusammenarbeiten können.

Sie können einem Screenshot zusätzliche Bilder hinzufügen sowie Elemente blau markieren oder löschen, die Sie anderen lieber nicht zeigen möchten.

9. Cache leeren

Die Chrome-Erweiterung „Cache(Cache Chrome Extension) löschen“ ist ein schnelles und einfaches Tool, mit dem Sie Cookies und den Cache der Seite löschen können, die Sie gerade ansehen. Es entfällt die Notwendigkeit, zur Einstellungsseite Ihres Browsers zu navigieren, um ein paar einfache Seitenelemente zu löschen.

Für Webdesigner, die mehrere Änderungen vornehmen und diese in Echtzeit anzeigen möchten, ist dies ein hervorragendes Tool, das einen Großteil der Frustration beim Betrachten alter Daten beseitigt.

Es gibt Zeiten, in denen Sie Ihren Cache und Ihre Cookies löschen müssen, aber das Navigieren zu den Chrome- Einstellungen ist mühsam. Mit Cache löschen können Sie Ihren Cache sowie globale oder lokale Cookies auf Knopfdruck löschen.

Mit Cache löschen(Cache) können Sie konfigurieren, welche Elemente Sie von der Seite löschen möchten. Zu den Variablen(Variables) gehören Cash , Downloads, alle Systeme, Formulardaten, at Cash , Indexdatenbank, Plugin-Daten, Passwörter und mehr.

10. Google Chrome-Erweiterung für Webentwickler

Die Google Chrome-Erweiterung für Webentwickler(Web Developer Google Chrome Extension) ermöglicht es Entwicklern und Designern, ihre Webseiten auf einfache Weise zu prüfen, zu analysieren und auf Verstöße gegen Best-Practice-Design, Codierung, Benutzerfreundlichkeit und Suchmaschinenoptimierung zu überprüfen.

Es ist ein großartiges All-in-One-Tool, das beim Durchsuchen unserer Ressourcen nicht schwer ist und dennoch eine Menge nützlicher Informationen für das Webdesign bereitstellt. Es ist auch für die Elemente der Suchmaschinenoptimierung innerhalb einer Website oder Seite verantwortlich.

 Die Erweiterung installiert die Symbolleiste mit mehreren Webentwickler-Tools.

Das Tool gibt Ihnen Hinweise zu Seitengröße, -breite und -abmessungen, die im Widerspruch zur bewährten Verwendung auf mehreren Geräten stehen. Es ermöglicht Ihnen, eingebettetes JavaScript zu überprüfen und Ihre Website über eine Simulation verschiedener Geräte anzuzeigen.

Die Erweiterung funktioniert gut unter Windows , Linux und Mac OS . Neben Codierungs- und Designproblemen wird es auch Einblicke in Meta-Tag-Informationen, Antwort-Header, Farbinformationen und topografische Informationen geben.

Auf der Website des Entwicklers Chris Pedericks(Chris Pedericks’ website) können Sie die Hauptfunktionen des Tools sowie seinen vollen Funktionsumfang einsehen .

Zweifellos gibt es eine Fülle anderer hochwertiger und nützlicher Chrome -Erweiterungen, die Webdesigner oder Entwickler verwenden könnten.

Diese Liste zeigt einige der beliebtesten und nützlichsten Tools. Haben Sie Empfehlungen für Tools, von denen Sie denken, dass ich nützlicher oder besser als die in dieser Liste bin? Lass uns wissen.



Björn Franke

About the author

Ich bin ein Softwareentwickler mit über 10 Jahren Erfahrung auf den Plattformen Windows 11 und 10. Mein Fokus lag auf der Entwicklung und Wartung hochwertiger Software für Windows 7 und Windows 8. Ich habe auch an einer Vielzahl anderer Projekte gearbeitet, einschließlich, aber nicht beschränkt auf Chrome, Firefox, Xbox One und Dateien.


Related posts