Wenn Sie als Designer einige nützliche Tools benötigen, um Ihre Webentwicklungsprojekte zu beschleunigen, zusammenzuarbeiten oder zu prüfen, bietet Chromeextension eine Vielzahl von Tools.
Diese Liste umfasst einige der beliebtesten und einige der beliebtesten Argumentieren Sie als notwendig - Tools und Chrome-Erweiterungen, dass jeder Benutzer, der Konstruktionsarbeiten ausführt, diese in seiner Tasche haben sollte.
1. DomFlags
DOM-Flags sind a Einfach zu verwendende Chrome-Erweiterung, die Entwicklern eine neue Möglichkeit bietet, mit Browser-Tools zu arbeiten. Es ermöglicht Entwicklern, das Gestalten von Elementen zu beschleunigen.
Wenn Sie für jedes Element Tastenkombinationen verwenden, können Sie Ihre Navigation mit einem Lesezeichen versehen.
Wir alle haben die Schwierigkeit, sehr detaillierte Elemente zu überprüfen, und es ist leicht, sich zu verirren.
Mithilfe von DOM-Flags können Sie Stilelemente verfolgen. Dazu gehört auch eine Funktion, mit der Komponenten automatisch auf ihre Richtigkeit überprüft werden. Dies wird dazu beitragen, den Workflow und die Implementierung von DevTools zu beschleunigen.
Mithilfe von DOM-Flags können Sie Änderungen nachverfolgen. Konzentrieren Sie sich weiterhin auf die Elemente, mit denen Sie arbeiten.
2. Sizzy
Sizzy gibt 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 einer beliebigen Anzahl von Geräten und Bildschirmgrößen. Sie können sogar eine Gerätetastatur simulieren und dann zwischen dem Landschafts- und dem Hochformatmodus wechseln.
Wenn Sie eine Chrome-Erweiterung installieren, wird Ihrer Symbolleiste eine Schaltfläche hinzugefügt, über die beim Klicken die aktuelle URL auf der Sizzy-Plattform geöffnet wird. Die Erweiterung blockiert alle "x-frame-optionen " - Header, sodass Sie sich jede Website online ansehen können.
Sizzy ist ein Open-Source-Projekt und Sie können das gesamte Projekt sehen Code Hier.
3. Checkbot
Checkbot kann Ihr testen Website für Sicherheitsprobleme und überprüfen Sie auch die Ladegeschwindigkeit Ihrer Website-Seite. Es wird Designern die Möglichkeit geben, typische Fehler zu identifizieren und Verbesserungen der Websitesicherheit, der Suchmaschine und der Websitegeschwindigkeit zu empfehlen.
Mithilfe von mehr als 50 Best-Practice-Metriken wird eine Website auf Best-Practice-SEO, fehlerhafte Links überprüft. Duplizieren von Inhalten und mehr. Das Tool validiert auch CSS, JS und HTML.
Checkbot erkennt Designer- und Codierungsfehler in Echtzeit und erspart Ihnen den Aufwand, Ihre Arbeit wiederholt überprüfen zu müssen.
Wenn Sie nach einem qualitativ hochwertigen Tool suchen, das fehlerhafte Seitenverknüpfungen behebt, eindeutige Inhalte und Seitentitel sicherstellt und direkte Ketten beseitigt, ist dieses Tool hilfreich.
Für Designer kann es Ihnen helfen, Ihre CSS- und JS-Werte zu minimieren Geben Sie außerdem Empfehlungen zur Minimierung des CSS und des durchschnittlichen Browser-Caches.
4. GistBox Clipper
GistBox ist eine der hilfreichsten Chrome-Erweiterungen für Webdesigner.
GistBox kann GitHub Gist aus jedem Codeblock auf der angezeigten Webseite erstellen.
In der oberen rechten Ecke eines Codeblocks befindet sich eine kleine Schaltfläche, über die Sie den Code im Hauptfenster speichern können.
Das können Sie Erstellen Sie neue Gists mit einem rechten Mausklick und speichern Sie Codeblöcke zur späteren Überprüfung und Verwendung.
Durch die Integration in GitHub können Designer und Entwickler Codeblöcke sammeln und bearbeiten oder für die spätere Verwendung 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 mit Tags versehen, beschriftet und kategorisiert werden können.
Mit dieser Erweiterung können Sie ein Pipetten-Tool auswählen, mit dem die Farbe von jeder Webseite extrahiert und auf der ColorZilla-Pinnwand gespeichert wird
Mit dieser Funktion können Sie schnell Farbpaletten für die spätere Verwendung entwickeln und sicherstellen, dass Sie bei Webdesign und -entwicklung farbkonsistent arbeiten.
ColorZilla fungiert auch als Farbanalysator und CSS Verlaufseditor, damit Sie ein Bild in CSS konvertieren können.
6. WhatFont
ThisChrome Extension ist eine Echtzeitersparnis für diejenigen, die ihre bevorzugten Schriftarten verwenden und sie in ihr eigenes Webdesign-Projekt integrieren möchten.
Mit der WhatFont Chrome-Erweiterung können Entwickler nahezu jede Schriftart auf jeder Webseite schnell analysieren und identifizieren.
Die Erweiterung ist gut entwickelt und muss nur Inspektionswerkzeuge öffnen. Die Erweiterung funktioniert nur, indem Sie mit der Maus über die Schriftart fahren.
Darüber hinaus identifiziert die Erweiterung auch den Dienst, der für die Wartung von a verwendet wird Die Seiten wurden in Schriften umgewandelt und unterstützen Google Font API und Typekit.
7. LightShot
LightShot ist eine schnelle Methode Screenshot-Tool, mit dem Sie die gesamte oder einen Teil einer Seite erfassen und entweder hochladen oder herunterladen oder an einen Drittanbieter senden können.
Von LightShot aufgenommene Screenshots können verwendet und in sozialen Medien geteilt oder gedruckt werden.
Sie können den ausgewählten Teil des Bildschirms mit Anmerkungen versehen und Text, Pfeile und weitere Elemente hinzufügen. Aber eines der brillantesten Merkmale dieses einfachen Tools für Webdesigner ist, dass Sie durch Auswahl eines Bilds eine vollständige Google-Bildsuche für ähnliche Bilder online durchführen können.
LightShot kann in mehreren Sprachen konfiguriert werden.
p>Die Erweiterung ist in reinem JavaScript geschrieben und funktioniert auch unter Windows, Chromebook, Linux und Mac OS. Sie können auch als Desktopanwendung darauf zugreifen, was sie zu einer hervorragenden Wahl für Webdesigner macht, die von mehreren Geräten abhängig sind.
8. Genialer Screenshot
Awesome Screenshot ist wie Lightshot eine Erweiterung für die Bildschirm- und Bildaufnahme.
Sie unterscheidet sich jedoch in vielerlei Hinsicht von Lightshot. Awesome Screenshot kann so konfiguriert werden, dass alle Ihre Screenshots mit Ihrem Google-Laufwerk verbunden werden.
Hiermit können Sie Screenshots von Elementen erstellen, die außerhalb Ihrer Ansicht liegen, um die gesamte Seite zu erfassen. Das Komma für zusätzliche Bearbeitungs- und Anmerkungswerkzeuge ermöglicht das Zuschneiden und Bearbeiten von Bildern innerhalb der Erweiterung. Oder mithilfe zusätzlicher AwesomeScreenshot-Anwendungen.
Sie können seine Funktionen erweitern, indem Sie die Anwendung Chrome auch für den Desktop installieren. Die Erweiterung ermöglicht auch das Aufzeichnen und Teilen von Videos, sodass Sie mit anderen Entwicklern oder Designern zusammenarbeiten können, wenn Sie an einer beliebigen Site arbeiten.
Sie können einem Screenshot zusätzliche Bilder hinzufügen sowie blaue oder nicht angezeigte Elemente löschen an andere.
9. Cache löschen
Der Cache löschen Chrome Extension ist ein schnelles und einfaches Tool, mit dem Sie Cookies und den Cache der Seite löschen können, die Sie erneut aufrufen. Sie müssen nicht mehr zur Einstellungsseite Ihres Browsers navigieren, um einige einfache Seitenelemente zu löschen.
Für Webdesigner, die mehrere Änderungen vornehmen und diese in Echtzeit anzeigen möchten, ist dies ein hervorragendes Tool Dadurch wird die Frustration beim Betrachten alter Daten weitgehend beseitigt.
Es kann vorkommen, dass Sie den Cache und die Cookies löschen müssen, das Navigieren zu den Chrome-Einstellungen ist jedoch mühsam. Mit Cache löschen können Sie Ihren Cache sowie globale oder lokale Cookies auf Knopfdruck löschen.
Mit Cache löschen können Sie konfigurieren, welche Elemente Sie von der Seite löschen möchten. Zu den Variablen gehören Cash, Downloads, alle Systeme, Formulardaten, at Cash, Indexdatenbank, Plugin-Daten, Kennwörter und mehr.
10. Webentwickler Google ChromeExtension
Mit der Google Chrome-Erweiterung für Webentwickler können Entwickler und Designer ihre Webseiten auf einfache Weise prüfen, analysieren und auf Verstöße gegen Best-Practice-Design, Codierung, Benutzerfreundlichkeit und Suchmaschinenoptimierung überprüfen.
Dies ist ein großartiges All-in-One-Tool Das Durchsuchen unserer Ressourcen ist nicht schwer, stellt jedoch eine Menge nützlicher Informationen für Webdesigner bereit, die auch für Suchmaschinenoptimierungselemente innerhalb einer Website oder Seite verantwortlich sind.
Die Erweiterung installiert die Symbolleiste mit mehreren Webentwickler-Tools.
Mit dem Tool erhalten Sie Angaben zu Seitengröße, Breite und Abmessungen, die im Widerspruch zur bewährten Vorgehensweise bei der Verwendung mehrerer Geräte stehen. Sie können eingebettetes JavaScript überprüfen und Ihre Website durch eine Simulation verschiedener Geräte anzeigen.
Die Erweiterung funktioniert gut unter Windows, Linux und Mac OS. Zusätzlich zu Kodierungs- und Entwurfsproblemen bietet es Einblicke in Metatag-Informationen, Antwort-Header, Farbinformationen und topografische Informationen.
Sie können die Hauptfunktionen des Tools sowie dessen volle Funktionen für Entwickler überprüfen Chris Pedericks Website.
Zweifellos gibt es eine Vielzahl weiterer hochwertiger und nützlicher Chrome-Erweiterungen, die von Webdesignern oder Entwicklern verwendet werden könnten.
In dieser Liste werden einige der beliebtesten und nützlichsten Tools aufgeführt. Haben Sie Empfehlungen für Tools, die ich für nützlicher oder besser halte als die in dieser Liste aufgeführten? Lassen Sie es uns wissen.