25 Sehr nützliche Google Chrome-Erweiterungen für Designer und Entwickler

Google Chrome war ein recht spätes Spiel der Browser-Kriege, aber es war ein über Nacht Erfolg, der sofort zum Favoriten der Mac- und Windows-Nutzer wurde. Durch die minimale und äußerst praktische Benutzeroberfläche bis hin zum soliden Webkit Core und dem robusten Erweiterungssystem ist Chrome eine der besten Möglichkeiten, um auf das Web zuzugreifen.

Für alle Chrome-Liebhaber gibt es eine erstaunliche Sammlung von 25 äußerst nützlichen Google Chrome-Erweiterungen für Designer und Entwickler. Egal, ob Sie nach einer schnellen Möglichkeit suchen, Ihre Seite zu überprüfen oder ein benutzerdefiniertes Raster-Overlay zu erstellen, wir haben das Tool für Sie.

Firebug Lite

Firebug Lite bietet die umfassende visuelle Darstellung, die wir in Firebug gewohnt sind, wenn es um HTML-Elemente, DOM-Elemente und Schachtelung von Box-Modellen geht. Es bietet einige coole Funktionen wie das Prüfen von HTML-Elementen mit der Maus und Live-CSS-Bearbeitung.

Stilvoll

Diese Erweiterung macht es einfach und macht Spaß, den visuellen Stil einer Webseite oder Website komplett neu zu gestalten. Möchten Sie eine graue Version von YouTube oder eine schwarze Version von Google erstellen? Stilvoll ist deine Antwort.

Stilvoll können Sie Benutzerstile einfach verwalten. Hinzufügen, Löschen, Aktivieren, Deaktivieren und Organisieren mit wenigen Mausklicks, kein zu bearbeitender Code, keine zu findende Konfiguration. Die Webseite von Stylish, userstyles.org, beherbergt Zehntausende von Benutzerstilen, die von anderen Stylish-Benutzern erstellt wurden, und die Sie ausprobieren können.

CSS Reloader

CSS Reloader ist eine Browsererweiterung, mit der Sie CSS neu laden können, ohne die Seite selbst neu zu laden. Klicken Sie einfach auf eine kurze Verknüpfung und die Seite wird mit den Stiländerungen aktualisiert.

Speed ​​Tracer (von Google)

Speed ​​Tracer ist ein Tool, mit dem Sie Leistungsprobleme in Ihren Webanwendungen erkennen und beheben können. Es visualisiert Metriken, die von untergeordneten Instrumentierungspunkten im Browser abgerufen werden, und analysiert sie, während Ihre Anwendung ausgeführt wird. Die Benutzeroberfläche ist ein benutzerfreundliches Dashboard mit relevanten Informationen und Grafiken, mit denen Sie Ihre Apps optimieren können.

Live-CSS-Editor

Diese Erweiterung stellt auf jeder HTML-Seite ein Textfeld bereit, damit Sie CSS frei schreiben und die Ergebnisse sofort sehen können. Es ist ein einfaches Werkzeug, aber es ist sehr hilfreich, um Ideen zu entwickeln und Fehler zu beheben.


Voliere Bildschirmaufnahme

Dies ist ein wirklich hübsches kleines Tool, das jede Webseite erfasst und automatisch in einem der vielen professionellen Tools von Aviary.com für Kreative öffnet. Sie haben Zugriff auf Photoshop-ähnliche Werkzeuge, mit denen Sie Ihr Bild nach Belieben bearbeiten können: zuschneiden, skalieren, drehen usw.

Lorem Ipsum Generator

Nur ein einfacher Lorem-Ipsum-Generator, der direkt in Ihren Browser integriert ist. Äußerst nützlich, wenn Sie Modelle erstellen und Fülltext benötigen.

Aktualisieren Sie den Affen

Aktualisieren Sie eine Seite automatisch in einem festgelegten Intervall. Überwachen Sie die Seite auf Änderungen und lassen Sie sich bei Änderungen benachrichtigen. Dies ist offensichtlich das perfekte Werkzeug für Webentwickler, die Codeänderungen im Browser beobachten möchten, ohne die Seite ständig manuell zu aktualisieren.

Fenstergröße ändern

Diese Erweiterung passt das Fenster des Browsers an, um verschiedene Auflösungen zu emulieren. Wenn Sie in den responsive Webdesign-Zug springen, sollten Sie diese Erweiterung ausprobieren, damit Sie Ihre Designs schnell in verschiedenen gängigen Größen bewerten können.

Google Font Previewer für Chrome

Ich bin ein großer Fan von Google Fonts, dem kostenlosen Tool zum Anwenden von benutzerdefinierten Webfonts über CSS. Mit dieser Erweiterung können Sie Google-Schriftarten schnell auf bestimmte CSS-Selektoren anwenden. So erhalten Sie eine schnelle Vorschau, wie die Schrift in Ihrem Design aussehen wird, bevor Sie Ihre Dateien aktualisieren.

ruul

ruul - ein unglaublich einfaches Bildschirmlineal zum Anordnen und Messen von Typ, Zeilenhöhe, Strichen und fast allem im Web. Perfekt für die Analyse vorhandener Designs.

Überprüfen Sie Meine Links

'Check My Links' findet schnell alle Links auf einer Webseite und prüft jede für Sie. Es wird hervorgehoben, welche gültig sind und welche gebrochen sind. Ich kann Ihnen nicht sagen, wie oft ich dumme Fehler gemacht habe, als wenn ich vergessen habe, meine Links zu überprüfen, um sicherzustellen, dass alle funktionieren. Dieses einfache Tool automatisiert diesen lästigen Prozess und hilft Ihnen zu erkennen, was Sie beheben müssen.

Comps

Wenn Sie Websites mit Photoshop-Comps codieren möchten, vergleichen Sie die beiden ständig, um zu sehen, ob Sie auf dem richtigen Weg sind. Mit dieser Erweiterung können Sie Bilder von Ihrem lokalen Computer laden und auf Ihrer Website einblenden, um Ihren Code mit einem bestimmten Design zu vergleichen.

Die Gitter

Mit dieser Erweiterung können Sie für jede Seite ein benutzerdefiniertes Raster-Overlay erstellen. Es hat einige Optionen und ist sehr nützlich bei der Erstellung von pixelgenauen gitterbasierten Layouts.

Graustufen

Mit dieser Erweiterung können Sie Ihre Seiten in Graustufen anzeigen lassen. Auf diese Weise können Sie mögliche Probleme mit Farben erkennen, die nicht genügend Kontrast haben. Der Kontrast ist ein wesentlicher Bestandteil des Designs, der die Ästhetik und Benutzerfreundlichkeit für typische und farbenblinde Benutzer verbessert.

Lineale, Hilfslinien, Pipette und Farbauswahl

Für UI-Entwickler. Wählen Sie mit dem Pipettenwerkzeug eine beliebige Farbe von der Webseite aus. Lineale, Hilfslinien und Raster auf der Seite anzeigen.

Pendel

Pendule ist eine große Sammlung von Entwicklertools für Chrome. Sie können Code anzeigen und überprüfen, Stile deaktivieren, verwendete Farben anzeigen, Bilder ausblenden, Kennwörter anzeigen und vieles mehr.

WhatFont

WhatFont ist ein fantastisches Tool, das Sie in vielen Browsern finden können. Es ist schnell, einfach, super attraktiv und zeigt nicht nur den Namen der Schriftart, sondern auch die Größe und die Zeilenhöhe an.

Palette für Chrome

Ein ordentliches kleines Werkzeug, mit dem Sie schnell Farben aus einem beliebigen Bild ziehen und sofort einfarbige Schemata erstellen können.

Führungen

Halten Sie Ihre Elemente mit den Guides im Einklang! Überprüfen Sie Entfernungen, Ausrichtungen und mehr, um sicherzustellen, dass Ihre Websites pixelgenau sind.

HTML Instant

HTML Instant ist ein einfacher und einfacher Doppelfenster-Editor, mit dem Sie rechts HTML, CSS oder JavaScript eingeben und links sofort eine Live-Vorschau sehen können.

HTML-Validierung

Eine schnelle und einfache Möglichkeit, die aktuelle Seite mithilfe von w3.org zu überprüfen.

SEO & Website-Analyse

SEO & Website Analysis by WooRank ist eine Erweiterung für Google Chrome, die eine umfassende SEO-Analyse bietet, die mehr als 50 SEO- und Usability-Kriterien abdeckt.

Browser-Kompatibilitätsdetektor

Browserübergreifende Kompatibilität ist das größte Problem bei der Entwicklung von Websites. Mit diesem Tool können Sie mögliche problematische Bereiche in Ihrem Code schnell identifizieren.

Neo Vision

Neo Vision bietet Syntaxhervorhebung beim Anzeigen von Quelldateien. Der coole Teil ist, dass es mehrere anpassbare Designs gibt, mit denen Sie den Code nach Ihren Wünschen gestalten können.

Was ist Ihre bevorzugte Google Chrome-Erweiterung?

Nachdem Sie unsere Sammlung von Google Chrome-Erweiterungen für Designer und Entwickler gesehen haben, hinterlassen Sie einen Kommentar und lassen Sie uns wissen, welche Erweiterungen Sie bevorzugen. Haben Sie auch eine der oben genannten Erweiterungen ausprobiert? Was denkst du über sie?