Top 15 Google Chrome-Erweiterungen für Webdesigner 2020

Google Chrome ist der bekannteste Webbrowser, den es gibt, und das nicht, weil er allein von Google entwickelt wurde. Es ist ein solider Marktführer in den Marktanteilslisten von Webbrowsern mit einem Vorsprung von mehr als 45% vor dem nächsten Konkurrenten: Mozilla Firefox. Mit WebKit (Safari), dem iOS-Äquivalent von Chrome, hat es sich einen Vorsprung auf dem Markt für mobile Webbrowser gesichert. Chrome ist bekannt für seine solide und stabile JavaScript-Engine, die unzählige Technologien antreibt. Vor allem basiert das Node.js-Framework auf einer Engine, die Google Chrome antreibt.

Chrome bekommt alle möglichen Reputationen; Einige wenige machen den Mangel an Sicherheit und detaillierten Tools dafür verantwortlich. Aber wenn es um das Gesamtbild geht, ist es schwierig, sich einen besseren Browser als Chrome vorzustellen. Geschwindigkeit, Skalierbarkeit, Leistung und Dinge wie Entwicklertools halten sowohl Webdesigner als auch Webentwickler bei der langfristigen Strategie an Chrome fest.

Es gab viele Diskussionen über die Sicherheit und den Datenschutz von Google Chrome-Erweiterungen. Worauf es jedoch ankommt, ist eine sorgfältige Auswahl von Erweiterungen von vertrauenswürdigen Entwicklern und Startups, die der Community tatsächlich etwas Gutes liefern möchten. Die Erweiterung der Funktionen von Chrome hat Entwicklern die notwendigen Toolkits und Funktionen zur Verfügung gestellt, um Erweiterungen zu erstellen, die dazu beitragen können, die Produktivität zu steigern und, was noch wichtiger ist, die Zugänglichkeit für die Erstellung von Dingen im Browser zu verbessern.

Front-End-Entwickler gehören zu den größeren Gewinnern bei der Verwendung von Chrome, da es eine sehr flüssige IDE-ähnliche Erfahrung beim Erstellen von Websites und Apps für den Browser und das mobile Web bietet. Wir werden die besten fünfzehn Google Chrome-Erweiterungen für Designer behandeln, von denen einige auch für Entwickler nützlich sein könnten. Die Liste ist unvoreingenommen und basiert auf Untersuchungen, die Designer heute in einigen der beliebtesten Community-Foren im Internet geteilt haben.

User-Agent-Umschalter

Ein User-Agent ist der Fingerabdruck, den Sie bei jeder neuen Anfrage an eine Seite senden. Die Website kann dann Ihren User-Agent erkennen und Ihnen die entsprechende Version der Website gemäß Ihren Browserfunktionen bereitstellen. Dies ist die Standardmethode für Websites, um festzustellen, ob jemand eine Website von einem Desktop- oder Mobilgerät aus durchsucht. Mit der User-Agent Switcher-Erweiterung können Sie Ihren User-Agent auf jeden anderen Browser oder jedes mobile Gerät umstellen, sodass Sie schnell mit der Darstellung Ihrer Designs auf diesen Geräten und Browsern experimentieren können. Es ist eine winzige Erweiterung, die viel Leistung bietet, um Entwicklern zu helfen, die Produktivität zu steigern, indem sie Zeit sparen, da sie hin und her wechseln müssen.

GoFullPage

Wenn Sie an einem Webdesign arbeiten oder den Vollbildmodus einer Website aufnehmen möchten, um Ihren Kunden zu präsentieren, ist GoFullPage der richtige Weg. Diese einfach zu verwendende Chrome-Erweiterung für Webdesigner ist ziemlich selbsterklärend. Kurz gesagt, das Tool erfasst die aktuell angezeigte Seite vollständig. Sie drücken einfach auf die Schaltfläche und das war's, Sie müssen keine anderen Optionen überprüfen. Darüber hinaus können Sie auch die Tastenkombination verwenden, damit GoFullPage funktioniert.

Sie werden sehen, dass diese Erweiterung die Seite Teil für Teil erfasst und dann eine neue Registerkarte öffnet, von der aus Sie ein Bild (PNG, JPG) oder PDF herunterladen können. Natürlich können Sie es einfach per Drag & Drop auf Ihren Desktop ziehen. Egal, ob es sich um einen einfachen Blog oder eine komplexe Website oder einen Online-Shop handelt, GoFullPage erfasst alles ohne Schwitzen.

Rettungszeit

Wenn es um die Arbeit am Webdesign geht, ist Zeit wichtig. Schließlich möchten Sie nicht zu viel Zeit damit verbringen, sich auf Ablenkung zu konzentrieren, wenn Sie stattdessen so viel mehr Qualitätsarbeit leisten können. Dank RescueTime, einer Chrome-Erweiterung, können Sie die Zeit verfolgen, die Sie den ganzen Tag in Chrome verbringen. Waren Sie produktiv oder unproduktiv? RescueTime hilft Ihnen dabei, die Dinge herauszufinden, damit Sie Ihre Zeit entsprechend einteilen können.

Es geht nicht nur um die Zeiterfassung jeder Website, auf der Sie verbringen. RescueTime kategorisiert Seiten auch als „sehr produktiv“ und „sehr ablenkend“. Darüber hinaus erkennt es sogar, wenn Sie sich vom Computer entfernen – in diesem Fall stoppt es die Verfolgung. Wenn Sie sich jemals gefragt haben, was Sie jeden Tag in Chrome tun, hilft Ihnen RescueTime dabei, ein besseres Gefühl dafür zu bekommen, wie viel Zeit Sie mit der Arbeit verbringen und wie viel Zeit Sie „nur überprüfen“.

Cache leeren

Obwohl Chrome über eine eigene Funktion verfügt, können Sie das Löschen des Caches mit der Clear Cache-Erweiterung beschleunigen. Sie können es mit einem einzigen Klick zu Chrome hinzufügen und sofort verwenden. Beim Löschen des Caches fordert das Tool keine zusätzlichen Bestätigungen an, erstellt keine Popups und anderes. Wenn Sie jedoch alle Daten global entfernen möchten, ist eine zusätzliche Erlaubnis erforderlich. Schließlich möchte man nicht aus Versehen alles reinigen.

Darüber hinaus können Sie ganz einfach angeben, was genau Sie löschen möchten, z. B. App-Cache, Cookies, Downloads, Formulardaten, Verlauf, lokaler Speicher, die Liste geht weiter. Sie können auch festlegen, welche Domäne beim Löschen von Daten eingeschlossen oder ausgeschlossen werden soll. Clear Cache unterstützt auch Zeiträume. Schnell und unkompliziert, und das ist das Wichtigste, wenn Sie Ihren Workflow durch das Dach steigern möchten.

Herrscher

Möchten Sie ein virtuelles Lineal haben, mit dem Sie Elemente auf Websites messen können? Wenn dies der Fall ist, ist Ruler die praktische Chrome-Erweiterung, die den Zauber vollbringt. Als Webdesigner kann dieses Tool sehr hilfreich sein, wenn Sie die Größe jedes Elements herausfinden, da Sie alles und alles auf jeder Seite mit nur Ihren Mausfähigkeiten messen können.

Sie können das Lineal zur Site hinzufügen und Elemente in Pixeln messen. Darüber hinaus können Sie Ihren Mauszeiger auch als Lineal verwenden, mit dem Sie bestimmte Formen zeichnen können, die Sie messen möchten. Auf der Seite selbst finden Sie alle notwendigen Angaben zur Größe und Dimension in Pixeln. Fügen Sie einfach die Erweiterungen hinzu und klicken Sie auf die Schaltfläche, die in der oberen rechten Ecke angezeigt wird. Das war's, Sie haben jetzt ein virtuelles Lineal, das Seiten, Elemente und Komponenten misst.

Fenster-Resizer

Mit mehr als 500.000 aktiven Benutzern in allen Technologie-Communitys hilft die Window Resizer-Erweiterung Designern, verschiedene Arten von Auflösungen zu fälschen, um besser zu verstehen, wie diese Auflösungen mit Ihren Designs interagieren. Der Aufbau einer Website, die für die Mehrheit der Bevölkerung funktioniert, ist unerlässlich. Und diese Erweiterung hilft Ihnen zu erkennen, wo Fehler auftreten können, sodass Sie alle erforderlichen Codeänderungen umgehend vornehmen können. Sie können die Breite und Höhe Ihres Browserfensters schnell ändern, die Position, an der es sich befindet, und es gibt eine eingebaute Shortcode-Funktion, die Ihre Fähigkeit, verschiedene Bildschirmauflösungen während der Live-Codierung zu überprüfen, erheblich verbessert.

WhatFont

Bei Millionen von aktiven Websites und vielen neuen Websites, die wir jeden Tag besuchen, gibt es immer etwas, das uns ins Auge springt, ein bestimmtes Widget oder eine dynamische Funktion oder eine bestimmte Schriftart, die einfach hervorragend aussieht, aber wir können es nicht bestimme den Namen dafür. Mit der WhatFont-Erweiterung sind Sie in der Lage, Schriftarten auf jeder beliebigen Website-Seite schnell zu untersuchen und schnell den Namen der Schriftart zu erfahren, damit Sie Ihre Suche danach beginnen können. Abgesehen davon hilft WhatFont auch zu verstehen, welche Art von Diensten verwendet werden, um Schriftarten bereitzustellen, falls sie von Premium- oder kostenlosen Diensten wie Google Fonts oder Typekit stammen.

Registerkarte Paketierer

Designer und sogar Entwickler haben alle Mühe, ihre Registerkarten sauber und organisiert zu halten. Bei unserer Designarbeit suchen wir ständig nach anderen Quellen, Nachforschungen, Inspirationsarbeiten und Beispielen, wie wir unsere Designs perfektionieren können, und diese Registerkarten stapeln sich ziemlich schnell! Mit Tab Packager können Sie jetzt auf einfache Weise alle Ihre Tabs in einer einzigen URL verpacken und dann über diese URL darauf zugreifen. Dies verbessert die Produktivität, da wir kontinuierlich zu unserer Liste zurückkehren und schnell greifen können, was wir benötigen, anstatt durch die Registerkarten zu blättern und zu erraten, woraus jede Registerkarte besteht.

CSS-Shack

Photoshop ist nicht das einzige Werkzeug, das mit Ebenen umgeht. Tatsächlich muss sich jeder Frontend-Entwickler mit Ebenen in seinen CSS-Konfigurationen auseinandersetzen. Diese Chrome-Erweiterung für Webdesigner hilft Ihnen, Stilebenen zu erstellen und diese Ebenen dann für einen einfacheren Zugriff in Ihre CSS-Dateien zu exportieren. Mit wenigen Klicks können Sie schnell Designs, Wireframes oder einfache Elemente wie Schaltflächen erstellen. Ob zufälliges Experimentieren und Sandbox-Testen oder ein vollständiger Styleguide, den Sie erstellen möchten, CSS-Shack bietet die Tools, die Ihnen in diesen Abteilungen helfen.

Leitfaden für flache Farben

Erstellen Sie ein neues Webdesign mit dem FLAT-Styleguide, sind sich aber nicht sicher, welche Farbcodes Sie verwenden sollen? Mit der einfach zu bedienenden Flat Colors Guide-Erweiterung verschwinden diese Sorgen schnell. Installieren Sie die Erweiterung und klicken Sie einfach auf die Schaltfläche Erweiterungen, um die Farben zu laden, die normalerweise in FLAT-Designs verwendet werden.

ColorZilla

ColorZilla hat Millionen von aktiven Benutzern im Mozilla-Browser. Und schließlich ist auch eine Google Chrome-Erweiterung verfügbar, die bereits mehr als 800.000+ aktive Nutzer angesammelt hat. Mit ColorZilla können Sie die Farben auf jeder Seite schnell beurteilen. Und Sie können diese Farben verwenden, um sie zu optimieren und in jedes andere Tool zu laden, das Sie zum Erstellen Ihrer Designs verwenden. Greifen Sie ganz einfach auf die Farben einzelner Pixel innerhalb der Seite zu, sodass Sie in jeder Situation die richtige Tiefe für Ihre Farben haben. Shortcuts ermöglichen eine schnellere Farbmanipulation und -optimierung.

Stylebot

Stylebot ist ein Live-Bearbeitungstool zum Bearbeiten des CSS-Codes jeder Website und jedes Elements, das Sie gerade durchsuchen. Mit CSS können Sie schnell einzelne Elemente auswählen und das Aussehen ändern. Ändern Sie alles, was Sie möchten, mit automatisierten integrierten Tools oder schreiben Sie Ihr eigenes CSS. Dies hilft Ihnen, mehr über CSS zu erfahren. Außerdem erhalten Sie einen Einblick in die Funktionsweise der Live-Bearbeitung und wie viel schneller Sie die gewünschten Änderungen an Ihren Designs vornehmen können. Mit mehr als 150.000+ Benutzern ist dies die Erweiterung, die jeder Webdesigner in seinem Toolkit haben sollte.

Viel Spaß mit CSS

EnjoyCSS ist ein Webdesign-Suite-Studio direkt in Ihrem Browser! Es ist ein direkter CSS3-Generator, mit dem Sie die UI-Einstellungen jedes Elements Ihrer Wahl verwalten können. Erstellen Sie Übergänge, transformieren Sie Elemente, arbeiten Sie mit Verläufen, Schatten und vielem mehr. EnjoyCSS verfügt auch über eine Bibliothek mit vorgefertigten Transformationen, die Sie direkt auf Ihre Elemente anwenden können.

Emmet LiveStyle

Emmet LiveStyle aktualisiert sofort Ihr Webseiten-Stylesheet, während Sie CSS-, LESS- oder SCSS-Dateien in Ihrem Texteditor bearbeiten. Kein Speichern von Dateien oder Neuladen von Seiten: pures Echtzeit-Erlebnis! Und dies ist das erste Tool, das Updates von DevTools richtig zurück in den Quellcode überträgt. Viele Rezensionen für diese Erweiterung erwähnen, dass sie sich ihren Webdesign-Workflow ohne dieses Tool nicht vorstellen können.

Web-Entwickler

Mozilla Firefox hat seine eigenen Entwicklertools, genau wie Google Chrome. Was in den letzten Jahren passiert ist, ist, dass viele Firefox-Benutzer auf Chrome umgestiegen sind. Aber es fühlt sich immer noch so an, als ob eine bestimmte Funktionalität in bestimmten Abteilungen fehlt oder fehlt. Einer der größten Verluste für Leute, die wechseln, ist der Verlust der Mozilla-Entwicklertools. Und da die Nachfrage so groß war, haben sich ein paar Entwickler zusammengetan und einen exakten Spiegel der Firefox Dev Tools für Chrome gebaut. Mit bereits mehr als einer Million aktiven Nutzern ist diese Erweiterung ein boomender Erfolg sowohl für etablierte als auch für aufstrebende Designer, die ihr Browser-Toolkit für die Arbeit mit Webdesigns in Live-Umgebungen erweitern möchten.