👨🏾‍🍳 🙋🏽 🤰🏻 Browsererweiterungen, die von jedem Webentwickler benötigt werden 🛃 💇🏼 🧜

Moderne Browser sind nicht nur großartige Webbrowser-Apps.

Browser sind auch Plattformen, die Webentwicklern eine Menge nützlicher Tools bieten, mit denen sie großartige Websites erstellen können. Neben den integrierten Tools stehen dem Entwickler eine Vielzahl von Browser-Erweiterungen zur Verfügung. Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, hat seiner Meinung nach die besten Erweiterungen ausgewählt, die Programmierern helfen sollen, eine Vielzahl von Aufgaben zu lösen, mit denen sie konfrontiert sind. Dies sind hauptsächlich Erweiterungen für Google Chrome.

Entwicklungswerkzeuge für React / Redux und Vue.js.

React und Vue.js sind bekannte Front-End-Entwicklungstools. Um so effizient wie möglich mit ihnen arbeiten zu können, lohnt es sich, die entsprechenden Browsererweiterungen zu installieren.

Die Erweiterung React Developer Tools erweitert die Funktionen von Entwicklertools. Mithilfe dieser Funktion können Sie Komponenten reagieren, an Komponenten übergebene Eigenschaften und den Status von Komponenten untersuchen. Dies kann einem React-Entwickler echte Vorteile bringen.

Reagieren

Sie auf Entwicklertools Wenn Sie beim Arbeiten mit dem Status der Anwendung auf Probleme stoßen, hilft Ihnen möglicherweise die Redux DevTools- Erweiterung. Es kann verwendet werden, um mit Zuständen zu arbeiten, die auf unterschiedliche Weise angeordnet sind, und es funktioniert besonders gut, wenn es mit Redux verwendet wird. Hier ist übrigens ein Tipp für Sie. Installieren Sie diese Erweiterung und besuchen Sie eine Website wie airbnb.com. Es verwendet React / Redux, sodass Sie mithilfe von Redux DevTools herausfinden können, wie die Verwaltung des Status der Seiten auf dieser Site funktioniert. Für mich ist es also sehr informativ.

Vue.js devtools ist dasselbe wie React Developer Tools, jedoch für Vue.js. Diese Erweiterung ist sehr praktisch zum Debuggen von Vue-Komponenten und für alle nützlich, die dieses Framework verwenden.

Vue.js devtools

Jsonview

Haben Sie jemals auf die Idee gekommen, dass in den Browsern anderer Programmierer die JSON-Daten klar und genau aussehen, aber nicht in Ihren? Vielleicht ist der springende Punkt, dass andere die JSONView- Erweiterung verwenden . Diese Erweiterung formatiert JSON-Daten sehr schnell und genau. JSONView ist definitiv eine meiner Lieblingsbrowser-Erweiterungen.

Jsonview

Bibliotheksschnüffler

Library Sniffer ist ein großartiges Tool für alle, die schnell herausfinden möchten, mit welchen Tools, Bibliotheken oder Frameworks die von ihnen angezeigten Seiten erstellt wurden. Mithilfe von Library Sniffer können Sie beispielsweise herausfinden, mit was eine Site erstellt wurde: WordPress, Drupal, React, Vue.js, AngularJS ...

Bibliotheksschnüffler

CSS Scan 2.0

CSS Scan 2.0 ist eine nützliche Erweiterung, mit der Entwickler CSS einfach durch Bewegen des Mauszeigers über Seitenelemente untersuchen und kopieren können. Es stimmt, er hat ein Minus. Tatsache ist, dass Sie eine Lizenz kaufen müssen, um damit zu arbeiten.

CSS Scan 2.0

Diese Erweiterung bietet eine kostenlose Alternative - CSS Peeper . Es ist hauptsächlich für Designer gedacht und nicht für diejenigen, die Code schreiben.

Web-Entwickler

Mit der Web Developer- Erweiterung können Sie Ihren Browser mit einem Bedienfeld ausstatten, das viele verschiedene Tools enthält. Mit ihrer Hilfe können Sie beispielsweise JavaScript auf Seiten deaktivieren, den Speicherort der Seite steuern und mit Bildern arbeiten. Diese Erweiterung ist für Chrome und Firefox verfügbar.

Web-Entwickler

Whatfont

WhatFont ist eine ziemlich kleine Erweiterung, mit der Sie die auf Webseiten verwendeten Schriftarten identifizieren können. Um herauszufinden, für welche Schriftart das Textfragment ausgelegt ist, müssen Sie die Erweiterung aktivieren und den Mauszeiger über dieses Fragment bewegen. Wie Sie sehen, ist die Arbeit mit ihm äußerst einfach. Es kann wie die vorherige Erweiterung von Personen verwendet werden, die in Chrome arbeiten, und von Personen, die in Firefox arbeiten.

Whatfont

Colorzilla

Die ColorZilla-Erweiterung kann sowohl in Chrome als auch in Firefox verwendet werden. Es bietet dem Entwickler ein Werkzeug zum Erstellen von Farbprüfungen, ein Werkzeug zum Auswählen von Farben, einen Verlaufsgenerator und andere nützliche Werkzeuge zum Arbeiten mit Farben. Sie können damit beispielsweise herausfinden, welche Farbe ein Pixel auf einer Webseite hat. Es speichert den Verlauf der Arbeit mit Farben und enthält ein Werkzeug zum Anzeigen von Paletten.

Colorzilla

Spektrum

Die Zugänglichkeit von Inhalten ist ein wichtiger Aspekt der modernen Webentwicklung. Tatsache ist, dass viele Menschen nur eingeschränkt in der Lage sind, mit Webseiten zu interagieren. Eine solche Einschränkung ist Color Vision Deficiency (CVD). Es beeinflusst die Fähigkeit einer Person, bestimmte Farben zu unterscheiden. Mit der Spectrum- Erweiterung können Sie Websites auf ihre Eignung für Personen mit verschiedenen Arten von CVD untersuchen.

Spektrum

Site-Palette

Mit der Erweiterung " Site-Palette" können Sie die auf der Site verwendeten Farben von der Site extrahieren und als Farbpalette anordnen. Es unterstützt verschiedene Möglichkeiten zum Generieren von Paletten, ermöglicht das Ausgeben von Paletten durch Ausgabe eines speziellen Links, unterstützt das Drucken von Paletten und das Konvertieren in PDF-Dateien. Dies ist nicht auf die Site-Palette beschränkt.

Site-Palette

Toby

Die Toby- Erweiterung wurde entwickelt, um Browser-Registerkarten so zu organisieren, dass Sie im Laufe der Arbeit nicht viele Registerkarten offen halten müssen. Dies ist eine Art Registerkartenbedienfeld, das einfach mit der Maus zu bedienen ist. Diese Erweiterung kann sich positiv auf die Produktivität des Webentwicklers auswirken.

Toby

Talend API Tester

Talend API Tester ist eine großartige Erweiterung, mit der Sie über einen Browser mit verschiedenen APIs arbeiten können. Dies können APIs sein, die auf REST-, SOAP- und HTTP-Technologien basieren. Dies ähnelt beispielsweise Postman. Die kostenlose Version der Erweiterung unterstützt die Ausführung aller Arten von HTTP-Anforderungen, den sicheren Datenaustausch und die Authentifizierung.

Talend API Tester

Vollseiten-Bildschirmaufnahme

Wollten Sie schon immer schnell und ohne unnötige Bewegungen einen vollständigen Screenshot der angezeigten Seite erstellen? In diesem Fall kann die Erweiterung Full Page Screen Capture hilfreich sein . Damit können Sie Screenshots des gesamten Inhalts der Seiten im PDF-Format oder als Bild erhalten. Es kann sogar mit Elementen arbeiten, die das Scrollen unterstützen, und mit Elementen iframe.

Vollseiten-Bildschirmaufnahme

Zusammenfassung

Wir haben ungefähr ein Dutzend Browsererweiterungen für Webentwickler überprüft. Wir hoffen, dass Sie unter ihnen etwas finden, das Ihnen nützlich ist.

Liebe Leser! Welche Browsererweiterungen verwenden Sie für die Webentwicklung?

Browsererweiterungen, die von jedem Webentwickler benötigt werden