10 Top -Chrom -Erweiterungen für Ihren Webentwicklungs -Workflow

Die Webentwicklungsindustrie ist rasant und es ist nicht einfach, mit dem Trend Schritt zu halten. Daher ist es entscheidend, vorhandene Werkzeuge voll auszunutzen. In diesem Artikel werden zehn Chromerweiterungen eingeführt, die zur Optimierung Ihres Webentwicklungs -Workflows und zur Verbesserung der Effizienz werden.

Kernpunkte:

• Chromverlängerungen sind kleine Software, die das Browsing -Erlebnis und die Produktivität von Webentwicklern verbessern. Einige beliebte Auswahlmöglichkeiten sind Webentwickler, Ihre Framework -Entwickler -Tools, tägliche 2.0, Toggl -Taste, Leuchtturm, Onetab, CSS Peeper, Benutzer CSS, Webentwickler -Checkliste und Tampermonkey.
• Webentwickler ist eine Muss-Erweiterung, die eine Reihe von Webanalyse-Tools bietet, einschließlich Deaktivieren von JavaScript, Bildumrechnungen, Browserfenster, die Größe der HTML-Überprüfung und Anzeige von Meta-Tag-Informationen.
• Daily 2.0 sammelt die neuesten Webentwicklungs- und technischen Artikel aus dem Internet und zeigt sie auf neuen Registerkarten in einem benutzerfreundlichen Layout an, um Entwicklern zu helfen, Branchennachrichten zu verstehen.
• tampermonkey ist ein Benutzer -Skript -Manager, mit dem Entwickler das Webverhalten ändern, zusätzliche Funktionen hinzufügen, sich wiederholende Aufgaben automatisieren oder Website -Layouts an ihre persönlichen Einstellungen anpassen können.

Was ist eine Chromverlängerung?

Wie im Chrome Developer -Portal angegeben, sind Erweiterungen kleine Softwareprogramme, die Ihr Browsing -Erlebnis anpassen. Dies kann alles von einer Rechtschreib- und Grammatik -Checker sein, um zu überprüfen, was Sie eingeben, an einen Passwort -Manager, der Ihre bevorzugten Website -Anmeldedaten speichert.

Chrome bietet Tausende von Erweiterungen, die alle kostenlos im Chrome Web Store erhältlich sind. Sie können die aktuell installierte Erweiterung überprüfen, indem Sie den folgenden Link in Ihrem Browser besuchen: chrome://extensions/.

Warum Chrome wählen?

Dieser Artikel konzentriert sich auf Google Chrome, da er einen enormen Marktanteil hat (derzeit 65% und immer noch wächst). Es gibt auch viele Browser-Unterstützung auf Chrombasis. Dazu gehören Brave, Vivaldi und der kommende Microsoft Edge. Wir sollten uns jedoch daran erinnern, dass Chrome nicht die einzige Option ist, und viele der hier genannten Erweiterungen haben Firefox- und/oder Opernäquivalente.

Zuletzt nehmen Sie sich einen Moment Zeit, um sich daran zu erinnern, dass Chrome eine proprietäre Software ist, die von Google veröffentlicht wurde. Wie wir alle wissen, gibt es Datenschutzprobleme mit Google-Produkten, sodass Sie möglicherweise GitHub besuchen und das Projekt Unguristischer Chrom ansehen können. Wie der Name schon sagt, ist dies Google Chromium und enthält keine Integration in Google.

1

Wir werden mit dem Schweizer Armeemesser der Erweiterung beginnen. Mit über 1 Million Benutzern und einer 4,5-Sterne-Bewertung im Chrome-Webentwickler ist ein Muss. Es fügt Chrom eine Symbolleiste -Schaltfläche hinzu, die eine große Anzahl von Tools anzeigt, die für jede Webseite verwendet werden können. Diese Tools werden nach Kategorie (CSS, Formulare, Bilder usw.) gruppiert, sodass Sie Operationen wie das Deaktivieren von JavaScript, die Konturbilder mit fehlenden Alt -Attributen, das Ändern von Browserfenstern, Überprüfung der Seite HTML, Anzeigeseite Meta -Tag -Informationen und mehr durchführen können, und mehr .

Sie können es hier herunterladen.

2. Wenn Sie JavaScript Framework verwenden, um Ihre Anwendung ohne die Entwickler -Tools zu entwickeln, die das Framework verwenden, machen Sie möglicherweise etwas falsch. Lassen Sie mich als Beispiel mit Vue erklären.

Wenn Sie eine VUE -Anwendung debuggen oder nur die Situation hinter den Kulissen wissen möchten, was sollten Sie dann tun? Wenn Sie den Quellcode der Seite überprüfen, wird die HTML angezeigt, die Vue rendert, aber die Vue -Anwendung ist viel mehr als das. Was ist mit den Requisiten, Daten oder Berechnen der Eigenschaften der Komponente? Oder was ist mit dem Status oder Routing Ihrer Bewerbung? Wie überprüfen Sie diese Inhalte?

Die gute Nachricht ist, dass Vue.js -Entwickler -Tools Ihren Anforderungen entsprechen können. Installieren Sie einfach die Erweiterung und öffnen Sie sie auf der Seite, auf der die Vue -Entwicklungsversion ausgeführt wird, um genau zu sehen, was in der Anwendung passiert.

Folgendes ist ein Link zum Herunterladen der drei Tools für Framework -Entwickler:

vue

• reagieren
• ember

3.

Da wir in einer rasanten Branche arbeiten, kann es manchmal eine Herausforderung sein, mit Nachrichten und Dynamik Schritt zu halten. Daily 2.0 entstand, eine Erweiterung, die die neuesten Webentwicklung und technischen Artikel aus dem Internet sammelt und sie auf neuen Registerkarten in einem attraktiven Mauerwerkslayout anzeigt. Diese Erweiterung ist einfach zu bedienen. Wenn Sie es installieren, werden Sie aufgefordert, aus einer Reihe von Kategorien zu wählen, die Sie interessieren, und täglich 2.0 wird den Rest erledigen. Bewegen Sie Ihre Maus über die Seitenleiste auf der neuen Registerkartenseite, um Ihren Feed nach Tags und Quellen zu filtern.

Sie können es von hier aus bekommen.

4.

Wenn Sie ein vielbeschäftigter Freiberufler sind, wenn Sie aus der Ferne arbeiten oder nur die Zeit verfolgen müssen, die Sie für Ihr Projekt verbringen, ist Toggl für Sie.

Diese Erweiterung erfordert, dass Sie ein Konto erstellen, bevor Sie es verwenden. Sobald sich angemeldet hat, ermöglicht es eine schnelle und einfache Produktivitätsverfolgung in Echtzeit. Alle Daten werden in Ihrem Toggl-Konto gespeichert. Es wird mit einem eingebauten Pomodoro-Timer sowie Integrationen vieler Internetdienste wie Github, Trello und Slack geliefert. Eine meiner Lieblingsfunktionen ist, dass im Leerlauf und der Timer die Benachrichtigung aufgreift, sodass Sie die Zeit verwerfen können.

Toggl kann von hier heruntergeladen werden.

5 Lighthouse ist ein Open -Source -Automatisierungstool zur Verbesserung der Leistung und Qualität von Webseiten. Sie können es über den Chrome -Web Store installieren oder mit Chrome 60 beginnen und direkt über die Registerkarte Überprüfung der Devtools in Ihrem Browser ausführen (drücken Sie

f12

und wählen Sie Prüfung aus). Wenn der Leuchtturm geöffnet wird, klicken Sie auf Bericht generieren und wählen Sie die Prüfungskategorie aus. Lighthouse wird das ausgewählte Audit an der Seite ausführen und einen Bericht über die Ausführung der Seite erstellen. Sie können fehlgeschlagene Audits als Metrik zur Verbesserung Ihrer Seite verwenden. Jede Bewertung enthält auch Links zu weiteren Lesungen und potenziellen Korrekturen.

Lighthouse wird von Google hergestellt und verwendet wahrscheinlich die gleichen Ranking -Faktoren wie ihre Suchmaschinen. Dies bedeutet, dass Sie einige der besten Ratschläge zur Optimierung Ihrer Website geben können.

Sie können es von hier aus bekommen.

6

Dies ist der Fall. Sie haben es mit Ihrer Webanwendung zu tun und begegnen plötzlich einen unerwarteten Fehler. Sie verbringen Stunden damit, die Fix zu verfolgen, und wenn Sie fertig sind, öffnen sich viele Registerkarten in Ihrem Browser. Fügen Sie diese auf die Registerkarte des Projekts hinzu, an dem Sie gestern gearbeitet haben, und alle Artikel, die Sie nicht zum Lesen hatten, und bald werden Sie sich in einer Tag -Verwirrung befinden. Hier kann die Onetab -Erweiterung Ihnen helfen, Ihre geistige Gesundheit zurückzugewinnen. Wenn Sie zu viele Registerkarten haben, klicken Sie auf das Symbol von Onetab, um alle Registerkarten in eine Liste umzuwandeln. Wenn Sie erneut auf die Registerkarten zugreifen müssen, können Sie sie einzeln oder gleichzeitig wiederherstellen. Wenn diese Erweiterung ordnungsgemäß verwendet wird, kann Ihre Produktivität erheblich verbessern.

Onetab kann hier von hier heruntergeladen werden.

7

CSS -Peeper positioniert sich als CSS -Betrachter, das für Designer entwickelt wurde und es Ihnen ermöglicht, CSS zu extrahieren und schöne Guides zu bauen. Sie können die CSS -Regeln für jedes Element auf der Seite überprüfen und alle Stilinformationen auf einfache und klare Weise präsentieren. Es listet auch alle Farben und Bilder der Seite auf, die in die Zwischenablage kopiert oder mit nur einem Klick auf eine Schaltfläche exportiert werden können.

Diese Erweiterung ist einfacher zu bedienen als die integrierte Funktion des Browsers "Check-Elemente". Der einzige Nachteil ist, dass Sie den Elementstil nicht dynamisch ändern können.

finden Sie hier CSS -Peeper.

8 Diese Erweiterung funktioniert mit CSS Peeper und bietet eine schnelle und einfache Möglichkeit, Ihren Webseiten benutzerdefinierte CSS hinzuzufügen. Benutzer -CSS ist nach der Installation einfach zu bedienen. Klicken Sie auf das Erweiterungssymbol und geben Sie Ihren Stil in das Side -out -Seitenfeld ein.

Eine schöne Funktion dieser Erweiterung ist, dass sie Ihren benutzerdefinierten CSS -Stil behält. Dies bedeutet, dass Sie es auch verwenden können, um ablenkende Funktionen auf Websites, die Sie häufig besuchen, dauerhaft zu verbergen, z. B. das Trend -Widget auf Twitter.

Sie können Benutzer CSS von hier herunterladen.

9

Neue Projekte online können jederzeit stressig sein - es gibt viel zu erinnern und zu koordinieren. Denken Sie beispielsweise daran, die HTML der Website zu überprüfen? Hast du SEO überprüft? Was ist mit Hilfsfunktionskontrollen? Führen Sie es über Google -Seitengeschwindigkeit aus? Die Liste geht weiter. Hier kann die Webentwickler -Checklisterweiterung helfen. Es analysiert Verstöße gegen Best Practices auf einer Webseite und ermöglicht es Ihnen, Problembereiche auf der Website zu ermitteln, bevor Sie die Webseite an einen Kunden übergeben. Diese Erweiterung ist ein großartiges Begleitprogramm für Webdevchecklist.com.

Checkliste für Webentwickler kann hier heruntergeladen werden.

10

Benutzerskripte sind kleine Computerprogramme, mit denen Sie das Verhalten von Webseiten ändern können. Diese können für verschiedene Aufgaben verwendet werden, z. B. für die Anpassung des Website -Layouts an Ihre Einstellungen, zusätzliche Funktionen zur Seite oder die Automatisierung von Wiederholungsaufgaben.

tampermonkey ist ein Benutzerskript -Manager - eine Erweiterung, mit der Sie Benutzerskripte verwalten und ausführen und Ihre eigenen Benutzerskripte erstellen können. Es ist die letzte Funktion, die es zu einem Ort in der Liste macht, da Sie Tampermonkey effektiv verwenden können, um Ihren Webentwicklungs -Workflow zu vereinfachen. Zum Beispiel arbeite ich an einer großen Form, die kürzlich getestet werden muss. Anstatt jedes Mal die Werte manuell einzugeben, schrieb ich ein Tampermonkey -Skript, um dies für mich zu tun, um unzählige Tastendrucke zu speichern.

Tampermonkey finden Sie hier.

Schlussfolgerung

In diesem Artikel stellen wir zehn meiner Lieblings -Chromerweiterungen vor, um Ihren Webentwicklungs -Workflow zu verbessern. Ich hoffe, dies gibt Ihnen einige Inspirationen, aber denken Sie daran, dass diese Liste keineswegs erschöpfend ist.

Wenn Sie Ihre Lieblingserweiterung verpasst haben oder ein Juwel haben, das Sie mit anderen Lesern teilen können, würde ich gerne in den Kommentaren unten von Ihnen hören.

Danke fürs Lesen.

FAQs (FAQs) für Chromerweiterungen für Webentwicklungs -Workflows

Was sind die Top -Chrom -Erweiterungen für Webentwicklungsworkflows?

Es gibt mehrere Chromverlängerungen, die Ihren Webentwicklungs -Workflow erheblich verbessern können. Einige der Top -Erweiterungen umfassen Webentwickler, Windows -Resizer, Colorzilla, CSSViewer und JSONView. Diese Erweiterungen bieten eine Reihe von Funktionen, von der Überprüfung von HTML- und CSS -Elementen auf jeder Webseite bis hin zur Größe von Browserfenstern bis zur Simulation verschiedener Bildschirmauflösungen.

Wie verwende ich die Webentwickler -Chrome -Erweiterung, um meinen Workflow zu verbessern?

Webentwicklererweiterung fügt Ihrem Browser eine Symbolleiste -Schaltfläche hinzu, die verschiedene Webentwickler -Tools enthält. Auf diese Weise können Sie schnell auf Funktionen wie das Deaktivieren von JavaScript, das Anzeigen von CSS und das Überprüfen von Elementen zugreifen. Es hilft Ihnen außerdem, Ihren Code zu überprüfen und nach Fehlern oder Inkonsistenzen zu überprüfen, wodurch Ihr Webentwicklungsprozess effizienter wird.

Wie verbessert die Erweiterung der Fensterresizer die Webentwicklung?

Mit

Fenster -Resizer können Sie die Größe Ihres Browserfensters ändern, um verschiedene Bildschirmauflösungen zu simulieren. Dies ist besonders nützlich für reaktionsschnelle Designtests, da Sie sehen können, wie Ihre Website oder Anwendung auf verschiedenen Geräten aussieht. Sie können aus der Liste der voreingestellten Bildschirmauflösungen auswählen oder Ihre eigene benutzerdefinierte Größe erstellen.

Wie hilft Colorzilla bei der Webentwicklung?

Colorzilla ist ein bequemes Werkzeug für Webentwickler und Grafikdesigner. Es enthält Strohhalme, Farbauswahl, Gradientengeneratoren und viele andere farbbezogene Werkzeuge. Mit Colorzilla können Sie Farbwerte von jedem Punkt in Ihrem Browser aus abrufen und es schnell in ein anderes Programm einfügen.

Was ist der Zweck von CSSViewer in der Webentwicklung?

CSSViewer ist ein einfacher CSS -Eigenschaftszuschacher. Sie können Ihre Maus über ein beliebiges Element auf einer Webseite schweben und die CSS -Eigenschaften anzeigen. Dies ist nützlich, wenn Sie versuchen zu verstehen, wie Sie ein bestimmtes Design implementieren oder Ihren eigenen CSS -Code debuggen.

Wie verbessert JsonView den Webentwicklungs -Workflow?

JSONView ist eine Chrome -Erweiterung, mit der JSON -Dokumente in Ihrem Browser angezeigt werden können. Normalerweise werden JSON -Dokumente nur als einfacher Text angezeigt. JSONView -Formate und unterstreicht diese Dokumente, um das Lesen leichter zu erleichtern. Dies ist besonders nützlich, wenn Sie API oder andere JSON -Formatdaten verwenden.

Welche Chromverlängerungen werden zum Debuggen von JavaScript verwendet?

Ja, es gibt mehrere Chromverlängerungen, mit denen JavaScript debuggen kann. Das beliebteste von diesen ist JavaScript -Fehler Notifier. Es benachrichtigt Sie über JavaScript-Fehler über ein Symbol oder eine Benachrichtigungspop-up in der Symbolleiste.

Wie kann man Chromverlängerungen verwenden, um meine Codierungseffizienz zu verbessern?

Chromverlängerungen wie klarer Cache und Sitzungskumpel können Ihre Codierungseffizienz erheblich verbessern. Mit Clear Cache können Sie Caches, Cookies und andere Browserdaten mit nur einem Klick löschen, während Session Buddy Sie mit Browsersitzungen verwalten, Ihnen Zeit sparen und Ihnen helfen können, organisiert zu bleiben.

Was sind einige Chromverlängerungen für das Webdesign?

Ja, für das Webdesign stehen mehrere Chromerweiterungen zur Verfügung. Einige der Top -Erweiterungen umfassen WhatFont, mit denen Sie die auf einer Webseite verwendeten Schriftarten identifizieren können, und so die Sie Farben auf einer Webseite auswählen können.

Wie finde und installiere ich Chromverlängerungen?

Sie können Chrom -Erweiterungen im Chrome -Webladen finden und installieren. Suchen Sie einfach nach der gewünschten Erweiterung und klicken Sie auf "In Chrome hinzufügen", um sie zu installieren. Möglicherweise müssen Sie Ihren Browser neu starten, damit die Erweiterung funktioniert.

Das obige ist der detaillierte Inhalt von10 Top -Chrom -Erweiterungen für Ihren Webentwicklungs -Workflow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!