Steigern Sie die Produktivität Ihrer Webentwickler

Zuletzt aktualisiert am 13. Oktober 2020

Wenn Sie wie ich gerne Webentwicklung betreiben, sollten Sie wissen, wie wichtig es ist, großartige Tools in Ihrem Webbrowser zu haben, die Ihre Arbeit vereinfachen und Ihre Produktivität steigern. Das ist der Fall bei Google Chrome und dem umfassenden Angebot der Chrome-Erweiterungen, das die Produktivität Ihrer Webentwickler steigern wird.

Ja, Firefox ist ein ausgezeichneter Browser für die Webentwicklung, und die Firefox Developer Edition ist fantastisch für das Debuggen und Testen von CSS. Chrome verfügt jedoch über eine lange Liste von Toolerweiterungen, die Unterstützung für die neuesten Webfunktionen und Entwicklertools bieten, die es unter vielen Webentwicklern zu einem Favoriten für die Steigerung der Produktivität von Webentwicklern machen.

Der Chrome Marketplace bietet einige der besten Erweiterungen, ob alt oder neu, um Entwicklern beim Entwickeln und Testen einer Website oder Zielseite zu helfen. Im Folgenden werden Sie einige der besten Erweiterungen kennen, die ich als „Must-Have“ in Ihrer Web-Entwickler-Toolbox vorschlage.

Chrome-Erweiterungen, die die Produktivität Ihrer Webentwickler steigern

Tag-Assistent

Tag Assistant hilft bei der Fehlerbehebung bei der Installation verschiedener Google-Tags, einschließlich Google Analytics, Google Tag Manager usw. Mit Tag Assistant können Sie überprüfen, ob Sie verschiedene Google-Tags korrekt auf Ihrer Seite installiert haben. Navigieren Sie einfach zu einer beliebigen Seite, und Tag Assistant teilt Ihnen mit, welche Tags vorhanden sind, meldet alle gefundenen Fehler und schlägt Verbesserungen vor, die an Ihrer Implementierung vorgenommen werden können. Die meisten Google-Tags werden überprüft, einschließlich Google Analytics, Adwords Conversion Tracking, Google Tag Manager usw.

Was läuft

Entdecken Sie, was eine Website betreibt – Frameworks, Analysetools, WordPress-Plugins, Schriftarten – Sie nennen es. Die WhatRuns-Erweiterung ist nur einen Klick entfernt, damit Sie Technologien finden, die auf jeder von Ihnen besuchten Website verwendet werden. Es erkennt sogar die neuen und kommenden Tools und Dienste von Entwicklertools und Werbenetzwerken bis hin zu WordPress-Plugins und -Designs. Nicht nur das – Sie können Websites folgen, damit Sie benachrichtigt werden, wenn sie neue Technologien verwenden oder vorhandene entfernen.

Vue.js-Entwicklungstools

Sein Name ist sehr eindeutig. Es ist eine Chrome- und Firefox-DevTools-Erweiterung zum Debuggen von Vue.js-Anwendungen. Damit können Sie die Vue.js-Komponentenhierarchien in den Chrome Developer Tools überprüfen. Sie erhalten eine neue Registerkarte in Ihren Chrome DevTools: „Vue“.

React-Entwicklertools

Wie die Vue.js-Devtools ist React Developer Tools eine Chrome- und Firefox-DevTools-Erweiterung für die Open-Source-React-JavaScript-Bibliothek. Damit können Sie die Hierarchien der React-Komponenten in den Chrome-Entwicklertools überprüfen. Sie erhalten zwei neue Registerkarten in Ihren Chrome DevTools: „Komponenten“ und „Profiler“. Die Registerkarte Komponenten zeigt Ihnen die Root-React-Komponenten, die auf der Seite gerendert wurden, und die Unterkomponenten, die sie letztendlich gerendert haben. Indem Sie eine der drei Komponenten auswählen, können Sie ihre aktuellen Requisiten und ihren Status im rechten Bereich prüfen und bearbeiten. In den Breadcrumbs können Sie die ausgewählte Komponente, die Komponente, die sie erstellt hat, die Komponente, die diese erstellt hat, usw. überprüfen.

JSON-Viewer Genial

Diese Erweiterung unterstützt Sie bei der Visualisierung der JSON-Antwort von jeder Website- oder API-Anfrage in Ihrem Browser. Es stellt Ihnen fantastische JSON Prettify-Erlebnisse vor. Es hat viele einzigartige Eigenschaften, die es großartig machen. Es hilft Entwicklern, JSON zu formatieren oder zu verschönern und zu den Eigenschaften in einer grafischen Ansicht zu wechseln. Es verfügt über ein benutzerfreundliches und interaktives Diagramm, das Ihre Serverantwort oder Ihr bereitgestelltes JSON im Eingabebereich in der grafischen Ansicht darstellt.

META SEO-Inspektor

Nützlich, um die auf Webseiten gefundenen Metadaten zu untersuchen, die normalerweise beim Surfen nicht sichtbar sind. Metadaten sind nicht nur die üblichen HTML-Meta-Tags, sondern die XFN-Tags, verschiedene Mikroformate, das kürzlich eingeführte kanonische Attribut, die No-Follow-Links usw. Diese Erweiterung richtet sich hauptsächlich an Webentwickler, die das HTML ihrer Website überprüfen müssen Befolgen Sie die Google-Richtlinien für Webmaster, aber auch für diejenigen, die neugierig auf Seiteninhalte sind, die normalerweise nicht sichtbar sind, aber interessante Website-Eigenschaften offenbaren können. Es hat auch eine Druck-/Exportoption, mit der Sie den Bericht drucken oder als PDF speichern oder die Daten in Ihr bevorzugtes Tool kopieren/einfügen können.

Schnellanzeige im HTML-Stil

Schneller Viewer für HTML-DOM-Elementstile. Bewegen Sie einfach Ihre Maus, und es zeigt die Stile des Ziels.

CSSViewer

CSSViewer ist ein einfacher CSS-Eigenschaften-Viewer für Chrome und Firefox. Um CSSViewer zu aktivieren, klicken Sie auf das Symbol in der Symbolleiste und bewegen Sie dann den Mauszeiger über ein beliebiges Element, das Sie auf der aktuellen Seite untersuchen möchten.

Schriftarten Ninja

Identifizieren Sie Schriftarten von jeder Website, markieren Sie sie, probieren Sie sie aus und kaufen Sie sie. Es analysiert Schriftdateien, um genauere Ergebnisse zu erhalten. Fahren Sie mit der Maus über einen beliebigen Text, um den Namen der Schriftart und die CSS-Eigenschaften zu erhalten. Das Hauptfenster der Erweiterung zeigt auch eine Zusammenfassung aller auf einer Website verwendeten Schriftarten an. Weitere Informationen zu Schriftarten erhalten Sie. Überprüfen Sie, wie viele Stile verfügbar sind, deren Hersteller und Preis.

Ich liebe adaptives – mobiles/responsives Testen

Tool zum Testen von responsiven Websites. Die ILOVEADAPTIVE Chrome-Erweiterung fügt Ihrer Symbolleiste eine Schaltfläche hinzu. Wenn Sie auf die Schaltfläche klicken, wird die URL, auf der Sie sich befinden, im aktuellen Tab geöffnet. Zu den Hauptfunktionen gehören die Vorschau einer URL auf mehreren Geräten gleichzeitig, das Filtern der Geräte, das Filtern des Betriebssystems, das Ändern ihrer Anzahl, das Zoomen, das Anzeigen des iOS-Bedienfelds, das Umschalten auf Quer- und Hochformat.

Web-Vitals

Messen Sie Metriken für eine gesunde Website. Web Vitals sind Qualitätssignale, die für die Bereitstellung großartiger UX im Web entscheidend sind (https://web.dev/vitals). Diese Erweiterung misst die Core Web Vitals und liefert sofortiges Feedback zu Lade-, Interaktivitäts- und Layoutänderungsmetriken. Es stimmt damit überein, wie diese Messwerte von Chrome gemessen und an andere Google-Tools gemeldet werden.

Seitenlineal Redux

Ein Lineal für Webentwickler/Designer, um perfekte Pixelabmessungen und Positionierungen zu erhalten, um Elemente auf jeder Webseite zu messen. Page Ruler Redux ist ein zentrales Tool für Webentwickler und -designer, mit dem Sie pixelgenaue Messungen von Webelementen erhalten können. Es wurde für die Entwicklung von Website-Frontends, Webdesign oder jede Aufgabe entwickelt, die Sie möglicherweise benötigen, um perfekte Pixelmessungen von beliebigen Webelementen zu erhalten.

Gitterlineal

Erstellen Sie Gitter und messen Sie deren Entfernung einfach. Damit können Sie vertikale und horizontale Raster im Photoshop-Stil erstellen. Es hat auch ein Lineal, um den Abstand zwischen Ihren Gittern zu messen.

Skizzieren Sie es

Diese Erweiterung umreißt jedes HTML-Element auf einer Webseite, sodass Sie die Ränder der Elemente sehen können. Die Erweiterung unterstützt alle Regenbogenfarben (Rot, Orange, Gelb, Grün, Blau, Indigo und Violett). Es hat auch die Funktion, die Kontur zu entfernen, nachdem sie angewendet wurde.

Mobiler Browser-Emulator

Testen Sie mobile und responsive Webseiten auf Ihrem Desktop. Wählen Sie die gängigsten mobilen Bildschirmauflösungen mit einem einzigen Mausklick aus. Die Seite des aktiven Tabs wird in einem separaten Fenster geöffnet.

Nun, das ist meine Liste von Chrome-Erweiterungen, die Sie in Ihrem Chrome-Browser haben sollten, um die Produktivität Ihrer Webentwickler zu steigern. Ja, ja … Es gibt andere nützliche und coole Erweiterungen, die ich nicht in die obige Liste aufgenommen habe. Aber wenn die Zeit gekommen ist, werde ich weitere fantastische Erweiterungen erkunden, die wahrscheinlich in einem zukünftigen Blog aufgeführt werden.