Der folgende Artikel hilft Ihnen dabei: 16 Chrome Erweiterungen für Entwickler, die das Codieren weniger ermüdend machen
Das Jonglieren zwischen Hunderten von Registerkarten und das Schreiben von perfektem Code ohne Fehler ist für Entwickler eine alltägliche Herausforderung. Es ist immer eine anspruchsvolle Aufgabe, den richtigen Inhalt, die richtige Schriftart, die richtige Farbe, die richtigen Webseitenabmessungen und andere Bücher und Ecken zu finden.
Daraus ergibt sich die Verantwortung, so schnell wie möglich Qualitätscode bereitzustellen. Aber wer möchte schon von Millionen von Codes, Anwendungen und Software überhäuft werden? Dedizierte Chrome-Erweiterungen machen Entwicklern das Leben einfacher. Sie müssen nicht mehr von einem Bildschirm zum anderen springen und Dinge mit wenigen Klicks erledigen.
Heute stellen wir eine Reihe von Chrome-Erweiterungen vor, die Sie bei der Frontend- und Backend-Codeverwaltung unterstützen. Dadurch sparen Sie nicht nur Zeit, sondern steigern auch Ihre Produktivität. Sie können mehrere Erweiterungen nahtlos umgehen und viel schneller erledigen.
Hier ist eine Liste von Chrome Erweiterungen für Entwickler, mit denen Sie eine bestimmte Schriftart, Webseitenabmessungen, Farbpalette, Seitengeschwindigkeit und andere Details bestimmen können, die die Produktivität steigern und den Prozess mühelos machen.
- WhatFont
- Fenster-Resizer
- CSS-Viewer
- Lorem-Ipsum-Generator
- Geisterwesen
- Wappalyzer
- JSON-Viewer
- ColorZilla
- Maße
- Seitenlineal
- Web-Entwickler
- EditThisCookie
- Sitzungsfreund
- Daily.dev
- Testen Sie den IE
- Leuchtturm
1. WhatFont
| Benutzer | 2000000+ |
| Bewertungen | 4,0 |
WhatFont macht das Finden der richtigen Schriftart einfach und kostenlos. Eine Person kann Schriftarten auf Online-Sites leicht identifizieren. Obwohl Firebug und Webkit Inspector für Entwickler recht einfach zu verwenden sind, können Sie mit diesem Plugin Webschriftarten überprüfen, indem Sie mit der Maus darüber fahren.
Es ist so einfach und unkompliziert. Warum die Registerkarten wechseln, um die richtige Schriftart zu finden, wenn Sie sie mit einem einzigen Klick direkt auf Ihrem Bildschirm anzeigen können? Einige der von WhatFont bereitgestellten Funktionen sind:
- Es ermöglicht dem Benutzer, die Schriftarten verschiedener Webseiten zu identifizieren, indem er einfach mit der Maus darüber fährt.
- Ermöglicht es dem Benutzer außerdem, Schriftarten zu finden, die Dienste im Zusammenhang mit dieser Webschriftart bereitstellen.
2. Fenster-Resizer
| Benutzer | 7.00.000+ |
| Bewertungen | 4.3 |
Die Window Resizer-Erweiterung ändert die Größe des Browserfensters, um verschiedene Auflösungen zu reproduzieren. Dies ist für Webdesigner und Entwickler von großem Vorteil, da sie ihre Layouts mit verschiedenen Browserauflösungen testen können. Die Liste der Auflösungen kann bearbeitet werden (hinzufügen/löschen/neu anordnen).
Sie können die Breite/Höhe des Fensters, seine Position, das Symbol (Telefon, Tablet, Laptop, Desktop) und sogar testen, ob die geänderten Abmessungen für das gesamte Fenster oder nur für das Ansichtsfenster gelten. Diese kostenlose Erweiterung umfasst außerdem anpassbare globale Tastenkombinationen, die Möglichkeit zum Exportieren und Importieren Ihrer Einstellungen und vieles mehr. Einige der von Window Resizer bereitgestellten Funktionen sind:
- Window Resizer kann auch im Offline-Modus ausgeführt werden.
- Bietet eine vollständige Liste der Auflösungen für eine bessere Sicht auf das Fenster.
3. CSS-Viewer
| Benutzer | 10.000+ |
| Bewertungen | 4.4 |
Möchten Sie das CSS für eine Schaltfläche oder ein bestimmtes HTML-Element auf einer Webseite sehen?
Mit dieser Erweiterung können Sie dies jetzt tun. Mit diesem CSS-Viewer können Sie sofort den verwendeten CSS-Code sehen, wenn Sie auf eine Schaltfläche/ein Bild/einen Text auf einer Webseite klicken. Dies ist ein schneller und unkomplizierter Ansatz zum Organisieren des CSS-Codes für ein bestimmtes Website-Element. Mit diesem CSS-Viewer können Sie den auf einer Website verwendeten CSS-Code überprüfen. Einige der vom CSS Viewer angebotenen Funktionen sind:
- CSS Viewer ist mit Google Drive kompatibel.
- Es kann auch im Offline-Modus funktionieren.
4. Lorem-Ipsum-Generator
| Benutzer | 40.000+ |
| Bewertungen | 3.7 |
Der Lorem Ipsum Generator generiert schnell Standardtexte, die zu Ihren Designs passen. Die Standardeinstellungen sind sofort einsatzbereit, Sie können jedoch schnell einige Variablen anpassen, um den genauen Text für Ihre Bedürfnisse zu erhalten.
Um echten Text zu simulieren, wird jeder Satz zufällig generiert. Es erstellt elegant und effizient Standardtext oder Lorem Ipsum. Es ist für den schnellen Einsatz optimiert, lässt sich aber gleichermaßen anpassen. Einige der großartigen Funktionen des Lorem Ipsum Generators Chrome Erweiterung sind:
- Sie können zwischen 1 und 5 Absätzen mit 1 bis 20 Sätzen pro Absatz und optionaler Absatz-Tag-Ummantelung oder anderen Optionen zum Kopieren von Zeilenumbrüchen in die Zwischenablage wählen.
- Hat einen schnellen und problemlosen Arbeitsablauf.
5. Geisterwesen
| Benutzer | 2.000.000+ |
| Bewertungen | 4.6 |
Ghostery – Privacy Ad Blocker ist ein All-in-One-Plugin zum Schutz der Privatsphäre. Es ist das erste Unternehmen, das Blocklist- und KI-gestützte Anti-Tracking-Technologie integriert. Es ist ein effektives Datenschutz-Plugin. Blockieren Sie Werbung, deaktivieren Sie Tracker und beschleunigen Sie Websites. Der integrierte Werbeblocker in Ghostery entfernt Werbung von Webseiten, um die Unordnung zu reduzieren und es Ihnen zu ermöglichen, sich auf die gewünschten Inhalte zu konzentrieren.
Ghostery hilft Ihnen zu kontrollieren, wer Ihre Daten sammelt, indem es Ihnen ermöglicht, Tracker auf den von Ihnen besuchten Websites anzuzeigen und zu blockieren. Die Smart Blocking-Funktion von Ghostery optimiert die Seitenleistung, indem sie Tracker automatisch blockiert und entsperrt, um den Seitenqualitätsstandards zu entsprechen. Einige der von Ghostery bereitgestellten Funktionen sind:
- Es bietet mehrere Anzeigeoptionen und Einblicke in das Dashboard, um viele relevante Informationen auf dem Display bereitzustellen.
- Ghostery bietet seinen Kunden auch In-App-Käufe an.
6. Wappalyzer
| Benutzer | 2.000.000+ |
| Bewertungen | 4.6 |
Wappalyzer ist ein Technologie-Profiler, der Ihnen zeigt, welche Technologien zum Erstellen von Websites verwendet werden. Erfahren Sie mehr über das CMS, das Framework, die E-Commerce-Plattform, die JavaScript-Bibliotheken und andere Funktionen einer Website.
Wappalyzer ist mehr als nur ein CMS oder Framework-Detektor: Es entdeckt über tausend Technologien in Dutzenden Kategorien, darunter Programmiersprachen, Analysen, Marketingtools, CRM, CDN und andere. Einige der von Wappalyzer bereitgestellten Funktionen sind:
- Es ist mit mehr als einem Gerät kompatibel.
- Kann die auf der Webseite verwendeten Technologien auf einen Blick erkennen.
7. JSON-Viewer
| Benutzer | 1.000.000+ |
| Bewertungen | 4.6 |
JSON Viewer ist der optisch ansprechendste und anpassungsfähigste Open-Source-JSON/JSONP-Highlighter zum Drucken von JSON und JSONP. Die Syntaxhervorhebung ist mit 27 integrierten Themen und reduzierbaren Knoten einfach. Sie können den Inhalt überprüfen, um festzustellen, ob es sich um JSON handelt oder nicht. Die URL ist unter solchen Umständen irrelevant. Um die Roh-/Hervorhebungsversion anzuzeigen, steht eine einfache Umschalttaste zur Verfügung.
Sie können damit Zeilennummern anzeigen, Ihr Thema ändern, die Tabulatorgröße ändern, eine maximale JSON-Größe zum Hervorheben festlegen, JSON nach Schlüsseln sortieren und vieles mehr. Sie erhalten außerdem einen Notizblock, einen neuen Ort, an dem Sie JSON eingeben/einfügen und über eine Schaltfläche oder eine Tastenkombination unbegrenzt formatieren können. Einige der von JSON Viewer bereitgestellten Funktionen sind:
- Es analysiert den Bericht inhaltsbasiert und ist URL-unabhängig.
- JSON Viewer kann auch im Offline-Modus arbeiten.
8. ColorZilla
| Benutzer | 3.000.000+ |
| Bewertungen | 4.4 |
ColorZilla ist eine beliebte Firefox-Entwicklererweiterung, mit der Sie an jeder Stelle Ihres Browsers eine Farbmessung durchführen, diese sofort ändern und in ein anderes Programm einfügen können. Es verfügt über eine leistungsstarke Pipette, einen Farbwähler, einen Farbverlaufsgenerator und vieles mehr. Zu seinen Merkmalen gehören:
- Mit einer Pipette können Sie die Farbe jedes Pixels auf der Seite bestimmen.
- Bietet das Tool für die erweiterte Farbauswahl und aktiviert außerdem die Farbpalette für die Website mit dem Webseiten-Farbanalysator.
- Zeigt Elementinformationen wie Tag-Name, Klasse, ID, Größe usw. an und bietet außerdem die Möglichkeit, Farben aus Flash-Objekten auszuwählen.
9. Abmessungen
| Benutzer | 3.00.000+ |
| Bewertungen | 4.2 |
Dimensions ist ein Bildschirmvermessungstool für Designer. Es überwacht den Abstand zwischen den Aufwärts-/Abwärts- und Links-/Rechtsbewegungen Ihres Mauszeigers, bis er eine Grenze erreicht. Es eignet sich ideal zum Messen von Abständen zwischen Komponenten auf einer Webseite.
Bei Fotos funktioniert es nicht gut, da die Farben von Pixel zu Pixel stark variieren. Alles, was Sie im Browser sehen, kann problemlos zwischen den folgenden Elementen gemessen werden: Fotos, Eingabefelder, Schaltflächen, Videos, GIFs, Text und Symbole.
Darüber hinaus können Sie PNGs oder JPEGs per Drag & Drop hineinziehen Chrome, können Sie sie schnell messen. Es handelt sich um eine von GitHub gehostete Open-Source-Anwendung. Darüber hinaus können Benutzer durch Drücken von ALT die Größe eines verknüpften Bereichs mit einem einzigen Klick messen. Merkmale der Dimensionen sind:
- Dimensions ist eine auf GitHub gehostete Open-Source-Anwendung, die bei Bedarf auch problemlos auf Firefox portiert werden kann.
- Verfügt über mehrere Tastenkombinationen, um dem Benutzer den Gesamtvorgang zu erleichtern.
10. Seitenlineal
| Benutzer | 1.00.000+ |
| Bewertungen | 3.9 |
Mit dem Page Ruler-Plugin können Sie Abstände (in Pixel) auf einer Webseite messen. Wenn Sie Ihre Maus über die Seite bewegen, wird ein rechteckiges Lineal gezeichnet. Die Breite, Anfangs- und Endhöhe des Lineals sind alle mit passenden Maßeinheiten in Pixeln beschriftet. Das Rechteck verkleinert sich, wenn Sie den Cursor bewegen, und alle Zahlen werden aktualisiert.
Sie müssen nur einmal die Schaltfläche in der Symbolleiste berühren, um die Erweiterung zu aktivieren. Um die Erweiterung zu deaktivieren, drücken Sie erneut die Symbolleistenschaltfläche. Auf Desktop-PCs funktioniert dieses Addon mit Mausklicks. Auf Touch-fähigen Geräten können Sie Touch verwenden, um das Rechteck innerhalb der Seite zu zeichnen. Einige der von Page Ruler bereitgestellten Funktionen sind:
- Es unterstützt den Offline-Anwendungsmodus.
- Das Unternehmen stellt ein separates Formular zur Verfügung, um mehr über die Spezifikationen der Benutzer zu erfahren und auch einen Fehler zu melden, wenn dieser gefunden wird, damit sofort Maßnahmen ergriffen werden können.
11. Webentwickler
| Benutzer | 1.000.000+ |
| Bewertungen | 4.5 |
Die Web Developer-Erweiterung fügt dem Browser eine Symbolleistenschaltfläche hinzu, die mehrere Webentwickler-Tools für Bilder, Umrisse, Größenänderung und vieles mehr enthält. Sie erhalten benutzerdefinierte Einstellungen wie die Deaktivierung von Javascript, Plugins, Popups und Benachrichtigungen.
Es handelt sich um ein Komplettpaket zum Anpassen Ihrer Chrome-Seite nach Ihren Wünschen. Mit den erweiterten Funktionen, die Ihnen zur Verfügung stehen, können Sie die Funktionalität direkt auf Ihrer Chrome-Webseite verbessern. Einige der von Web Developer bereitgestellten Funktionen sind:
- Kann auch in der Firefox-Plattform verwendet werden.
- Verfügt über eine integrierte Konsole mit mehreren Layouts.
12. EditThisCookie
| Benutzer | 2.000.000+ |
| Bewertungen | 4.4 |
Wie der Name schon sagt, hilft Ihnen diese Erweiterung, sich mit den Cookies zurechtzufinden. EditThisCookie ist ein Cookie-Manager, mit dem Cookies hinzugefügt, gelöscht, bearbeitet, durchsucht, geschützt und blockiert werden können.
Sie können Cookies löschen, ein neues Cookie hinzufügen, Cookies erstellen, Cookies durchsuchen, Cookies schützen (schreibgeschützte Cookies) und Cookies blockieren (Cookie-Filter). Darüber hinaus können Sie Cookies in JSON, Netscape-Cookie-Dateien (ideal für Widget und Curl) und Perl::LPW exportieren. Darüber hinaus ermöglicht es:
- Stellt Cookies beim JSON-Import bereit
- Begrenzen Sie das maximale Ablaufdatum jedes Cookies und steigern Sie die Leistung, indem Sie veraltete Cookies entfernen
13. Sitzungsfreund
| Benutzer | 1.000.000+ |
| Bewertungen | 4.8 |
Session Buddy ist eine Erweiterung, die als Ihr Sitzungsmanager fungiert. Hier werden die geöffneten Tabs als Sammlungen gespeichert, die später problemlos wiederhergestellt werden können. Es hilft Ihnen, Datenmüll zu reduzieren und Speicher freizugeben. Darüber hinaus können Sie alle Tabs problemlos wiederherstellen, wenn es aufgrund mehrerer intensiver Sitzungen zu Abstürzen kommt.
Durch die verbesserte Sichtbarkeit wird die Tab-Verwaltung mit dieser Erweiterung einfacher. Sie müssen lediglich mit ein paar Klicks navigieren, um Ihre Tabs mühelos zu verwalten. Einige Funktionen von Session Buddy sind:
- Steigern Sie die Leistung, indem Sie den Speicher leeren und Unordnung vermeiden.
- Alle Registerkarten können von einem einzigen Ort aus verwaltet werden.
14. Daily.dev
| Benutzer | 1.00.000+ |
| Bewertungen | 4.9 |
täglich. dev ist die am schnellsten wachsende Online-Entwickler-Community, die über die neuesten Entwickler-Neuigkeiten auf dem Laufenden bleibt. Erhalten Sie alle Ihre Lieblingsinformationen aus über 400 Quellen an einem Ort.
Anders ausgedrückt: Verschwenden Sie keine Zeit mehr mit der Suche nach qualitativ hochwertigen Artikeln. Installieren Sie einfach daily.dev, öffnen Sie einen neuen Tab und schon kann es losgehen. Es handelt sich um ein kostenloses Plugin, mit dem Sie mühelos und ohne Anmeldung auf dem Laufenden bleiben können. Dieses Add-on beinhaltet die folgenden Funktionen:
- Mehrere Streams, um Sie auf dem Laufenden zu halten und Beiträge zum späteren Lesen zu speichern
- Stimmen Sie für die Artikel ab, die Ihnen am besten gefallen haben, und ermöglichen Sie dem Benutzer gleichzeitig, aktuelle Themen mit anderen Entwicklern zu diskutieren.
- Am häufigsten besuchte Websites – Navigieren Sie von Ihrem neuen Tab aus direkt zu Ihren Lieblingswebsites.
15. Testen Sie den IE
| Benutzer | 30.000+ |
| Bewertungen | 1.8 |
Testen Sie alle Versionen von Edge und Internet Explorer (IE6 – IE11) mit Test IE und zeigen Sie eine Vorschau an. Mit einem einfachen Klick können Sie die bevorzugte Internet Explorer-Version auswählen und eine Testsitzung in Browser Live starten. Um zu beginnen, müssen Sie zunächst ein BrowserStack-Konto erstellen.
Ohne den Aufwand, ein internes Labor für Geräte und VMs einzurichten und zu warten, können Entwickler und Qualitätsingenieure interaktiv in über 1.200 echten Mobil- und Desktop-Browsern und Betriebssystemen auf Abruf testen und debuggen.
Interne Entwicklungs- und Staging-Umgebungen sowie lokale Ordner mit HTML-, CSS- und JavaScript-Dateien können von Benutzern auf Remote-Browsern getestet werden.
Diese Tests sind für alle älteren Internet Explorer-Versionen (IE6 – IE11), die neuesten Beta- und Entwicklungsversionen (Edge, Safari, ChromeFirefox, Opera und Yandex) sowie eine große Auswahl an echten iOS- und Android-Geräten.
Sie können die Reaktionsfähigkeit Ihrer Ideen auch schnell bewerten, indem Sie mit einem einzigen Klick Screenshots erstellen. Funktionen von Test IE sind:
- Alle lokalen Ordner können getestet werden, einschließlich des Ordners, der CSS- und HTML-Dateien enthält.
- Alle Browser verfügen über die Option des vorinstallierten Debugging-Tools von Entwicklertools.
16. Leuchtturm
| Benutzer | 90.000+ |
| Bewertungen | 4.5 |
Lighthouse ist ein automatisiertes Open-Source-Tool zur Verbesserung der Leistung, Qualität und Genauigkeit Ihrer Online-Anwendungen. Wenn Lighthouse eine Seite prüft, führt es entsprechende Tests durch, um einen Bericht über die Leistung der Seite zu erstellen. Von hier aus können Sie anhand der fehlgeschlagenen Tests ermitteln, was Sie zur Verbesserung Ihrer App tun können. Einige der Merkmale des Leuchtturms sind:
- Die von Lighthouse generierten Berichte umfassen Dinge wie Leistung, Zugänglichkeit, SEO, Best Practices, Progressive Web App usw.
Abschluss
Alle Erweiterungen in der kuratierten Liste werden entweder häufig verwendet oder von fortgeschrittenen Programmierern geliebt. Sie können sie alle in die Hände bekommen und sehen, welches in Ihren Tech-Stack zu passen scheint und nützliche Zwecke erfüllt. Sie möchten nicht, dass Ihr Arbeitsbereich durch unnötige Erweiterungen überfüllt wird.
Probieren Sie alle aus oder beginnen Sie mit einigen, um die besten Erweiterungen für Ihre Anforderungen auszuwählen. So wie jeder Workflow einen dedizierten Tech-Stack erfordert, können Sie einen bestimmten Erweiterungs-Stack auswählen und kuratieren, um Ihre Arbeitsleistung zu verbessern.
FAQs
Was sind die besten Chrome-Erweiterungen für Entwickler?
Einige der besten Chrome-Erweiterungen für Entwickler sind Colorzilla, Githunt, WhatFont usw.
Was ist die am häufigsten verwendete Google-Erweiterung?
Zu den am häufigsten verwendeten Google-Erweiterungen gehören WhatFont, daily.dev, LambdaTest usw.
Welcher Browser ist besser für Entwickler?
Der von Entwicklern am meisten bevorzugte Browser ist Chromium.
Was ist das Coolste Chrome Verlängerung?
Einige der coolsten Chrome Erweiterungen sind Google Kalender, Grammarly, Loom und viele andere.
