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

Wenn Sie ein Designer sind, der etwas Nützliches braucht Tools zur Beschleunigung, Zusammenarbeit oder Überprüfung Ihrer Webentwicklungsprojekte, Chrome Erweiterung hat eine Vielzahl von Werkzeugen.

Diese Liste enthält einige der beliebtesten - und einige würden für notwendig erachten - Tools und Chrome-Erweiterungen dass jeder Benutzer, der Designarbeit leistet, in seiner Kit-Tasche haben sollte.

1. DomFlags

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

DOM Flags ist eine einfach zu verwendende Chrome-Erweiterung Dies bietet Entwicklern eine neue Möglichkeit, mit Browser-Tools zu arbeiten. Es erlaubt Entwickler beschleunigen die Gestaltung von Elementen.

Verwenden Sie Tastenkombinationen für jedes Element kann Ihre Navigation mit einem Lesezeichen versehen.

Wir haben alle die Schwierigkeit erlebt sehr detaillierte Elemente prüfen, und es ist leicht, verloren zu gehen.

Mit DOM-Flags können Sie Stilelemente verfolgen Enthält eine Funktion zur automatischen Prüfung von Komponenten. Das in Dadurch wird der Workflow und die Implementierung von DevTools beschleunigt.

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

2. Sizzy

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

Sizzy gibt Designern und Entwicklern eine einfache Möglichkeit So können Sie ihre Websites in mehreren Ansichtsfenstern testen.

Sizzy bietet eine einfache Möglichkeit, Ihre Daten zu überprüfen Design in Echtzeit. Es bietet eine interaktive Ansicht von beliebig vielen Geräten und Bildschirmgrößen. Sie können sogar eine Gerätetastatur simulieren und dann zwischen ihnen wechseln Landschafts- und Porträtmodi.

Durch die Installation einer Chrome-Erweiterung wird Ihrer Symbolleiste eine Schaltfläche hinzugefügt. Wenn Sie darauf klicken, wird die aktuelle URL in der Sizzy-Plattform geöffnet. Die Erweiterung wird alle blockieren “ x-Frame-Optionen Kopfzeilen, damit Sie jede Website online sehen können.

Sizzy ist ein Open Source-Projekt, und Sie können den gesamten Code sehen Hier .

3. Checkbot

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

Checkbot kann Ihre Site auf Sicherheit testen Probleme und überprüfen auch die Ladegeschwindigkeit Ihrer Website. Es wird zur Verfügung stellen Designer mit der Möglichkeit, typische Fehler zu erkennen und Verbesserungen zu empfehlen in Website-Sicherheit, Suchmaschine und Geschwindigkeit der Website.

Mit mehr als 50 Best-Practice-Metriken prüft eine Website auf bewährte Suchmaschinenoptimierung, fehlerhafte Links, doppelten Inhalt und Mehr. Das Tool überprüft auch CSS, JS und HTML.

Checkbot greift Designer- und Coder-Fehler auf In Echtzeit können Sie sich die Mühe sparen, Ihre Arbeit erneut überprüfen zu müssen wiederholt.

Wenn Sie nach einem qualitativ hochwertigen Werkzeug suchen, behebt defekte Seitenlinks, sorgt für eindeutigen Inhalt und Seitentitel und beseitigt diese Ketten umleiten Dieses Werkzeug wäre nützlich.

Für Designer kann es Ihnen dabei helfen, Ihre CSS und JS sowie Empfehlungen zur Minimierung von CSS und Browser-Caching nutzen.

4. GistBox Clipper

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

GistBox ist eines der hilfreichsten Chrome Erweiterungen für Webdesigner.

GistBox kann ein erstellen GitHub Gist von einem beliebigen Codeblock auf der angezeigten Webseite.

In der rechten oberen Ecke eines beliebigen Codes In diesem Block sehen Sie eine kleine Schaltfläche, die bei Betätigung ein Popup-Fenster zulässt Damit können Sie den Code in der Gist speichern.

Sie können neue Gists mit einer rechten Maus erstellen Klicken Sie auf und speichern Sie Codeblöcke für eine spätere Prüfung und Verwendung.

Durch die Integration in GitHub können Designer und Entwickler, um Codeblöcke zu sammeln, zu manipulieren oder für zu kategorisieren später verwenden. Dies macht es zu einem bequemen und effizienten Chrome-Erweiterungswerkzeug.

5. ColorZilla

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

ColorZilla ist ein unglaublich nützliches Chrome Erweiterung zum Sammeln von Hex-Codes, die markiert, gekennzeichnet und kategorisiert werden können für individuelle Webdesign-Projekte.

Hier können Sie ein Pipettenwerkzeug auswählen Dadurch wird die Farbe aus einer beliebigen Webseite extrahiert und im ColorZilla gespeichert Zwischenablage.

Mit ihm können Sie schnell Farbe entwickeln Paletten für die spätere Verwendung und um sicherzustellen, dass Sie Farbe verwenden konsequent in Webdesign und -entwicklung.

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

6. WhatFont

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

Diese Chrome Extension ist eine echte Zeitersparnis für diejenigen, die ihre nutzen möchten Lieblingsschriften und integrieren sie in ihr eigenes Webdesign-Projekt.

Mit der WhatFont Chrome-Erweiterung können Entwickler dies tun analysieren und identifizieren Sie nahezu jede Schriftart auf jeder Webseite.

Die Erweiterung ist gut entwickelt und eher als die Inspektionswerkzeuge öffnen zu müssen, funktioniert die Erweiterung nur durch Winken die Maus über der Schrift.

Nicht nur das, sondern auch die Erweiterung identifiziert den Dienst, der zum Bereitstellen einer Pages-Guss-Schriftart verwendet wird, und wird unterstützt Google Font API und Typekit.

7. LightShot

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

LightShot ist ein schnelles Screenshot-Tool ermöglicht es Ihnen, die gesamte oder einen Teil einer Seite zu erfassen und entweder hochzuladen oder Laden Sie es herunter oder senden Sie es an einen Drittanbieter.

Von LightShot aufgenommene Screenshots können verwendet werden auf sozialen Medien geteilt oder gedruckt werden.

Sie können Text, Pfeile und mehr mit Anmerkungen versehen und hinzufügen zum ausgewählten Teil des Bildschirms. Aber vielleicht einer der brillantesten Das einfache Tool für Webdesigner besteht darin, ein Bild auszuwählen Sie können dann eine vollständige Google-Bildersuche nach ähnlichen Bildern durchführen online.

LightShot kann in mehreren konfiguriert werden Sprachen.

Die Erweiterung ist in reinem JavaScript geschrieben und funktioniert auch für Windows, Chromebook, Linux und Mac OS. Es kann auch als Desktopanwendung Dies macht es zu einer ausgezeichneten Wahl für Webdesigner, die auf mehrere Geräte angewiesen sind.

8. Großartiger Screenshot

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

Wie bei Lightshot ist Awesome Screenshot ein Bildschirm und Bilderfassungserweiterung.

Es unterscheidet sich von Lightshot jedoch in einer Anzahl der Möglichkeiten. Awesome Screenshot kann konfiguriert werden, um alle Ihre zu verbinden Screenshots mit Ihrem Google-Laufwerk.

Sie können diese Elemente scannen welche außerhalb Ihrer Ansicht liegen, um die gesamte Seite zu erfassen. Es hat Zusätzliche Komma-Tools für das Bearbeiten und Annotieren ermöglichen das Zuschneiden und das Bild Bearbeitung alles innerhalb der Erweiterung .. oder mit der Verwendung von zusätzlichen Awesome Screenshot-Anwendungen

Sie können seine Funktionen durch die Installation von erweitern Chrome-Anwendung auch für den Desktop. Die Erweiterung ermöglicht auch Video Erfassen und Freigeben, damit Sie mit anderen Entwicklern zusammenarbeiten können Designer, wenn Sie auf einer Website arbeiten.

Sie können einem Screenshot weitere Bilder hinzufügen sowie blaue oder löschende Elemente, die Sie anderen nicht zeigen möchten.

9. Cache löschen

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

Die Clear Cache Chrome-Erweiterung ist eine schnelle und Ein einfaches Tool, mit dem Sie Cookies löschen und den Cache der von Ihnen verwendeten Seite löschen können anschauen. Dadurch entfällt die Notwendigkeit, zur Einstellungsseite Ihres zu navigieren Browser, um einige einfache Seitenelemente zu löschen.

Für Webdesigner, die mehrere erstellen Bearbeitungen und möchten sie in Echtzeit anzeigen, ist dies ein hervorragendes Werkzeug Beseitigen Sie die Frustration beim Betrachten alter Daten.

Manchmal müssen Sie Ihren Cache leeren und Cookies, aber das Navigieren zu den Chrome-Einstellungen ist langwierig. Cache löschen ermöglicht es Ihnen Löschen Sie Ihren Cache sowie globale oder lokale Cookies auf Knopfdruck.

Cache löschen ermöglicht es Ihnen, welche zu konfigurieren Elemente, die Sie von der Seite löschen möchten. Zu den Variablen gehören Bargeld, Downloads, alle Systeme, Formulardaten, bei Cash, Indexdatenbank, Plugin-Daten, Passwörter und Mehr.

10. Web Developer Google Chrome Erweiterung

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

Die Google Chrome-Erweiterung für Webentwickler ermöglicht Entwicklern und Designern die einfache Prüfung, Analyse und Überprüfung ihres Webs Seiten für Verstöße gegen das Best-Practice-Design, die Codierung, die Benutzerfreundlichkeit und die Suche Motoroptimierung.

Es ist ein großartiges All-in-One-Tool, das nicht schwer ist Beim Durchsuchen unserer Ressourcen erhalten Sie eine Vielzahl von Informationen, die für das Webdesign nützlich sind ist auch verantwortlich für Suchmaschinenoptimierungselemente innerhalb einer Website oder Seite.

Das Erweiterung installiert die Symbolleiste mit mehreren Webentwickler-Tools.

Das Tool gibt Ihnen Hinweise auf der Seite Größe, Breite und Abmessungen, die zu Konflikten mit der Best Practice führen mehrere Geräte. Sie können damit eingebettetes JavaScript überprüfen und Ihr anzeigen Website durch Simulation verschiedener Geräte.

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

Sie können die Hauptfunktionen des Tools sowie die vollständigen Funktionen des Entwicklers überprüfen Chris Pedericks-Website .

Zweifellos gibt es eine Fülle anderer Hochs Qualität und nützliche Chrome-Erweiterungen, die Webdesigner oder Entwickler sein könnten benutzen.

Diese Liste zeigt einige der beliebtesten und nützliche Werkzeuge. Haben Sie Empfehlungen für Tools, von denen Sie glauben, dass sie nützlicher oder besser als die in dieser Liste? Lass uns wissen.

Loading ..

Recent Posts

Loading ..