Cele mai bune 11 extensii de dezvoltare web pentru Chrome

11 besten Webentwicklungserweiterungen für Chrome

⌛ Reading Time: 5 minutes

Bei der Entwicklung einer Website müssen Sie eine Checkliste mit vielen komplexen Anforderungen erstellen. Unabhängig davon, ob es sich um Farb- oder Schriftschemata, Probleme mit dem CSS-Layout oder die Reaktionsfähigkeit der Website auf verschiedenen Geräten handelt, ist es wichtig, stets über neu auftretende Probleme informiert zu sein. Im Folgenden finden Sie einige der besten Webentwicklungserweiterungen für Google Chrome (und andere Chromium-basierte Browser).

1. Farbwähler Pipette

Stellen Sie sich das Farbschema einer zufälligen Webseite vor und möchten Sie es in Ihrem eigenen Projekt verwenden? Eine Chrome-Erweiterung namens Farbauswahl „Pipette“ Mit dieser Option können Sie die Farben punktgenau und mit einer einstellbaren Zoomfunktion extrahieren.

Erweiterungen wie diese erfordern auf allen Websites die Erlaubnis, die Farbextraktion durchzuführen. Wenn Sie etwas erweiterte Funktionen wünschen, gibt es eine ähnliche Tool namens ColorZilla Dies wird mit einem Verlaufsgenerator, einem Paletten-Viewer und einem Farbverlauf geliefert.

2. Ein-Klick-Screenshot der ganzen Seite

Das Erstellen eines ganzseitigen Web-Screenshots ist eine Notwendigkeit der täglichen Arbeit. Manchmal ist es der beste Weg, Ihre Designänderungen zu kommunizieren, die gesamte Website so zu erfassen, wie sie ist. Mit einer Erweiterung namens „Ein-Klick-Screenshot der ganzen SeiteSie können es genau erreichen.

Während der Bildschirmaufnahme wird Ihr fertiges Bild in einem neuen Fenster geöffnet, sobald es abgeschlossen ist.

Chrome Web One Click Ganzseitiger Screenshot 1

Der gesamte Webseitenbildschirm steht jetzt im PNG-Format zum Download zur Verfügung. Sie können auch eine Reihe von Effekten auf den Bildbildschirm anwenden, darunter Filter, Zeichnen über die Webseite, Hinzufügen von Text und mehr.

Wenn Sie einfach den gesamten Screenshot eines sichtbaren Bildschirms benötigen, verwenden Sie diese Erweiterung stattdessen.

Screenshot 1 der gesamten Chrome Web-Seite

3. EditThisCookie

Webentwickler benötigen Zugriff auf Cookie-Manager, um Cookies hinzuzufügen, zu löschen, zu bearbeiten, zu schützen und zu blockieren. EditThisCookie ist eine nützliche Erweiterung, mit der Sie nach Belieben mit Cookies arbeiten und diese im JSON-Format exportieren oder importieren können. Dies hilft Ihnen, die Website gesund zu halten, indem Sie alte Cookies entfernen und das maximale Extraktionsdatum eines Cookies begrenzen.

Chrome Web Editthiscookie 1

4. ModHeader

ModHeader ist eine der beliebtesten Chrome-Erweiterungen zum Ändern von HTTP-Headern für Webseiten. Mit nur einem oder zwei Klicks können Sie die Änderung des Headers basierend auf der URL oder dem Ressourcentyp aktivieren. Das Beste daran ist, dass Sie mehrere Profile erstellen und den geänderten Headern unterschiedliche Werte hinzufügen können. Alle Änderungen können auf nur eine Registerkarte oder eine gesamte Site beschränkt sein.

Chrome Web Modheader 1

5. UX-Prüfung

Wir alle brauchen von Zeit zu Zeit eine heuristische Auswertung der laufenden Website. Dies wird leicht gemacht mit UX Check, eine Erweiterung, die alle UX-bezogenen Rückmeldungen in einem Seitenbereich anzeigt. Nachdem Sie auf ein Element geklickt haben, das nicht mit einer von Ihnen bewerteten Heuristik übereinstimmt, können Sie Notizen hinzufügen und Screenshots machen. Schließlich können alle Änderungen im DOCX-Format exportiert werden.

Chrome Web Ux Check 1

6. Window Resizer

Webentwickler müssen ihre Webseiten für verschiedene Bildschirmabmessungen emulieren. Mit Fenster Resizerkönnen Sie diese Auswertungen einfach für Laptops, Tablets, Smartphones und alle Bildschirmabmessungen Ihrer Wahl vornehmen.

Chrome Web Window Resizer

Das Tool bietet einige coole Funktionen wie “Drehen” und “Live-Messung” sowie eine Reihe von visuellen Anpassungsfunktionen. Wenn Sie eine wirklich reaktionsschnelle Website erstellen möchten, stellen Sie sicher, dass Sie deren Erscheinungsbild für alle Bildschirmabmessungen überprüft haben.

7. Lorem Ipsum Generator

Um den Auftrag auf einer Webseite schnell zu beenden, benötigen Sie Standardtext. Eine Erweiterung namens Lorem Ipsum Generator bietet mehrere Standardtextoptionen mit unterschiedlichen Absätzen und Sätzen pro Absatz. Sie können Textfragmente oder ganzen Text mit der Option „Automatische Auswahl“ auswählen. Die endgültige Vorlage sieht aufgrund der Variationsmöglichkeiten im Text elegant aus.

Chrome Web Lorem Ipsum Generator 1

8. BuiltWith Technology Profiler

BuiltWith ist ein klassische Erweiterung Erfahren Sie mehr über alle zugrunde liegenden Technologien, die eine Website unterstützen. Mit nur einem Klick wird ein Profil erstellt, mit dem Sie die neuesten Add-Ons und Instrumente kennenlernen, mit denen sich die Website von anderen abhebt. Auf diese Weise können Sie die Funktionen für Ihren eigenen Gebrauch replizieren.

Chrome Web Builtwith 1

9. WhatFont

WhatFont ist eine der schnellsten und einfachsten Möglichkeiten, verschiedene Schriftarten auf einer Webseite zu identifizieren. Sie müssen nur in der Nähe des Textes schweben, um die vollständigen Details zu erhalten. Es unterstützt erweiterte Vorlagen wie TypeKit und Google FontAPI.

Chrome Web Whatfont 1

10. CheckMyLinks

Manchmal benötigen wir eine objektive Zusammenfassung aller Links zu einer Website. CheckMyLinks ist eine beliebte Erweiterung, um gültige, ungültige und fehlerhafte Links zusammenzufassen. Die Linkergebnisse für jede laufende Website werden sofort in einem Seitenbereich angezeigt. Dieses Tool ist äußerst praktisch für Stichproben in letzter Minute, bevor Ihre Website oder veröffentlichte Änderungen online gehen.

Chrome Web Checkmylinks 1

11. Pestizid

Erwarten Sie Probleme mit dem CSS-Layout auf Ihrer Website? Pestizid Mit dieser Option können Sie diese Probleme beheben, indem Sie jedem Seitenelement einen Überblick geben. Durch Halten der Strg Mit der Taste können Sie die Elementinformationen anzeigen und die Platzierung des Elements auf der Seite analysieren.

Chrome Web Pestizid 1

Es gibt viele andere beliebte Web-Erweiterungen, die wichtige Details in Website-Anwendungen verwalten. Zum Beispiel, JSON Viewer hilft denen, die mit JSON-Dateien arbeiten. Es gibt eine HTML-Baumgenerator Dies gibt einen Baum aller Elemente in einer Website.

Abgesehen von den oben genannten gibt es auch zahlreiche Chrome-Erweiterungen, um Ihre Browsing-Geschwindigkeit zu verbessern. Schau sie dir an!

Verbunden: