In meinem Browser sind ungefähr 30 Erweiterungen installiert, die das Leben und Arbeiten im Internet vereinfachen. In diesem Artikel möchte ich 10 relevante Google Chrome-Erweiterungen für den Schriftsetzer freigeben, die ich bei der Entwicklung von Websites ständig verwende.
1. PerfectPixel
Ein Beispiel für die Verwendung von PerfetPixel bei der Entwicklung neuer Blöcke unter www.wrike.com
Das Layout der Site von Pixel zu Pixel bereitet sowohl Anfängern als auch erfahrenen Profis Schwierigkeiten. PerfectPixel überlagert das Layoutbild über dem Layout im Browser. In den Erweiterungseinstellungen können Sie die Transparenz und das Layout des Layouts anpassen, sodass Sie alle erforderlichen Größen und Einrückungen berücksichtigen können. Die Verwendung dieses Plugins vereinfacht das Layout und reduziert die Anzahl der Änderungen beim Einreichen eines Projekts. In meinen Erweiterungen steht PerfectPixel aufgrund seiner Funktionalität und Benutzerfreundlichkeit an erster Stelle.
Link zum Installieren der Erweiterung
2. Wappalyzer
Wappalyzer-Fallstudie unter collaborate.wrike.com/2019/london
Es ist immer interessant, welche Tools und Technologien auf den Websites verwendet werden. Wappalyzer bietet Informationen zu CMS, JS-Frameworks, CSS-Bibliotheken, Analysetools und vielem mehr. Stellen Sie sich vor, die Animation auf der Site ist eine kostenlose CSS-Bibliothek, die Sie in Ihrem Projekt verwenden können. Dadurch wird die Suchzeit für das erforderliche Tool verkürzt und die von der Site verwendeten Technologien berücksichtigt.
Link zum Installieren der Erweiterung
3. HTML5 Outliner
Header-Hierarchie unter habr.com/de/company/wrike
HTML 5 Outliner zeigt eine Liste der Header auf einer Site-Seite an. Die Erweiterung hilft, Überschriften zu strukturieren und Verstöße in der Hierarchie zu identifizieren. Beispielsweise zeigt HTML 5 Outliner im Abschnitt tag eine Warnung über das Fehlen des h2- Tags an. Dies ist eine der schnellen und bequemen Methoden, um die korrekte Verwendung von Überschriften im Layout zu bestimmen.
Link zum Installieren der Erweiterung
4. Wireframify
Wireframify-Fallstudie unter www.wrike.com
Designer entwerfen Websites mithilfe eines Drahtgitters - einer Reihe von Linien, Blöcken und Signaturen. Mit diesem Ansatz können Sie eine Projektarchitektur erstellen, die auf dem Einzug, der Größe und der Position der Blöcke auf der Seite basiert. Wireframify enthält eine alternative Form der Site in Form eines Drahtgitters, um eine fehlerhafte Verwendung zu vermeiden:
- negative Marge;
- Ausrichtung der Elemente mittels Polsterung;
- Einrückung mit CSS-Eigenschaften links, rechts;
Link zum Installieren der Erweiterung
5. PageLiner
PageLiner-Fallstudie unter www.wrike.com/apps
Im Grafikeditor können Sie die Elemente ausrichten oder das Site-Raster mithilfe von Hilfslinien anzeigen. Der Schriftsetzer kann diese Funktionalität im Browser mit PageLiner aktivieren . Die Erweiterung zeigt ähnliche Hilfslinien an wie in demselben Adobe Photoshop. Mit PageLiner ist das Ausrichten von Elementen viel einfacher.
Link zum Installieren der Erweiterung
6. Webentwickler
Liste der Webentwicklerfunktionen
Web Developer fügt dem Browser eine zusätzliche Symbolleiste hinzu. Darin befinden sich 10 Registerkarten: Deaktivieren, Cookies, CSS, Formulare, Bilder, Informationen, Verschiedenes, Gliederung, Größenänderung und Tools. Mit der Erweiterungsfunktion können Sie:
- Deaktivieren Sie CSS, JS und Bilder.
- Überprüfen Sie die Gültigkeit von HTML, CSS.
- CSS-Stile bearbeiten;
- Testen Sie HTML-Formulare
- Anzeigen der erforderlichen Informationen Meta-Tags;
- Ändern Sie die Größe des Browserfensters
- Leeren Sie den Cache.
Web Developer bleibt eine beliebte Erweiterung unter Entwicklern. Es kann im wirklichen Leben mit Multitool verglichen werden: Sie haben immer die notwendigen Werkzeuge zur Hand.
Link zum Installieren der Erweiterung
7. Benutzer-CSS
Benutzer-CSS-Beispiel unter www.wrike.com/customers
Stellen Sie sich vor, Sie wollten CSS direkt im Browser reparieren, mussten danach aber die Seite neu laden. Alle Ihre Erfolge sind verschwunden und Sie müssen erneut Änderungen vornehmen. Verwenden Sie Benutzer-CSS , um Ihre Stile zu speichern. Keine Sorge mehr, dass CSS verschwindet. Mit der Funktionalität der Erweiterung können Sie das geschriebene CSS testen, wenn Sie zu anderen Seiten wechseln.
Link zum Installieren der Erweiterung
8. StyleURL
Fallstudie von StyleURL unter Wrike www.wrike.com/customers
Benutzer-CSS ersetzt das Browser-Entwicklerfenster nicht. Wenn Sie es gewohnt sind, in devtools zu arbeiten und gleichzeitig nach dem Aktualisieren des Browsers keine Änderungen verlieren möchten, installieren Sie StyleURL . Die Erweiterung speichert Ihre Änderungen und bietet die Möglichkeit, die Arbeit in einer separaten Datei zu speichern oder auf github gist hochzuladen.
Link zum Installieren der Erweiterung
9. Siteimprove Accessibility Checker
Siteimprove Accessibility Checker-Fallstudie unter www.wrike.com/newsroom
Siteimprove Accessibility Checker ist ein Tool, das HTML auf Übereinstimmung mit den Barrierefreiheitsstandards überprüft, um allen den Zugriff auf Inhalte zu ermöglichen. Die Erweiterung zeigt Fehler mit detaillierten Informationen an. In der Beschreibung für sie finden Sie Fußnoten aus WCAG 2 und direkte Links zu detaillierten Artikeln zur Barrierefreiheit.
Link zum Installieren der Erweiterung
10. Tabsbook
Tabsbook Beispiel
Jeder arbeitet auf seine Weise mit Lesezeichen. Es gibt diejenigen, die Links für den schnellen Zugriff auf Websites speichern, und diejenigen, die Lesezeichen zum Speichern nützlicher Informationen verwenden. Mit Tabsbook können Sie Ihre Lesezeichen in eine Wissensdatenbank verwandeln. Die Erweiterungsoberfläche zeigt eine baumartige Ordnerstruktur für die einfache Navigation Ihrer Lesezeichen an. Alle Daten werden in der Cloud gespeichert, sodass Sie von jedem Gerät aus darauf zugreifen können.
Link zum Installieren der Erweiterung
Erweiterungen sind für alle Anfänger und erfahrenen Profis nützlich, die nichts über sie wussten. Schreiben Sie in die Kommentare, welche Erweiterungen Sie verwenden.
Weitere nützliche Browsererweiterungen finden Sie unter den Top 10- Links von Chrome-Plugins für Designer und Nützliche Google Chrome-Erweiterungen für Programmierer.