33 fantastische Chrome-Erweiterungen

Das Chrome-Ökosystem ist voll von großartigen Erweiterungen. Während Chrome Dev Tools In diesem Abschnitt werden einige Beispiele vorgestellt, mit denen die Funktionalität der Chrome Dev Tools erweitert werden soll, und Sie auf einige der nützlichsten Add-Ons für Entwickler und Designer hingewiesen um Ihnen zu helfen, Ihren Workflow zu optimieren.

Wiederholung

Bearbeiten. Speichern. Aktualisierung. Fenster suchen. Bearbeiten ...

Ja, total lahme Sauce und es gibt einen viel besseren Weg. Hier sind zwei süße Erweiterungen, die das Heben hinter den Kulissen für Sie erledigen:

1. LiveReload

LiveReload ist sowohl eine App als auch eine Erweiterung. Es ist eine kostenpflichtige App für OS X, hat eine Pre-Alpha-App für Windows und eine alternative Lösung für Linux. Wenn Sie einen Mac haben oder abenteuerlustig sind, ist dies eine großartige App mit einer hübschen Benutzeroberfläche und einfachen Konfigurationsoptionen. Es bietet die Möglichkeit, eine Browsererweiterung zu installieren oder Ihrem aktuellen Projekt ein Skript-Snippet hinzuzufügen. Mit LiveReload können Sie auch mehrere Verzeichnisse verwalten, sodass Sie nicht jedes Mal neu einrichten müssen. Heiß.

2. Tincam

Wir haben auch tin.cr . Tincr ist kostenlos und fügt den Chrome Dev Tools ein neues Bedienfeld hinzu. Es funktioniert gut mit ein paar Einschränkungen. Das heißt, wenn Sie lokale Dateien verwenden und auf Includes mit doppelter Punktsyntax verweisen ../ es wird nicht funktionieren, und die Konfiguration kann etwas praktischer sein, was einige Leute abschrecken kann. Tincr arbeitet auch plattformübergreifend.

Handy, Mobiltelefon

Sie sind unterwegs - und raten Sie mal, Ihre Benutzer auch. Unabhängig davon, ob Sie mobile oder reaktionsschnelle Websites entwickeln möchten, wissen Sie, dass Sie dies zumindest tun sollten prüfen um zu sehen, ob Ihre Site auf anderen Geräten angezeigt werden kann, oder? Hier sind einige Optionen, um Sie auf den richtigen Weg zu bringen.

3. Adobe Edge Inspect

Adobe Edge Inspect , früher Adobe Shadow, ist ziemlich schick. Für diese Erweiterung muss eine Begleit-App auf Ihren Zielgeräten installiert sein. Mit der Erweiterung können Sie Ihre aktuelle Browsersitzung im Wesentlichen mit einem oder mehreren Zielgeräten koppeln. Nach dem Pairing wird das Gerät Ihren funktionierenden Browser beschatten! Wie cool ist das? Sehr. Lesen Sie mehr darüber unter html.adobe.com/edge/inspect .

4. Chrome to Phone

Hast du einen heißen Link? Und ein Android-Gerät? Benutzen Chrome zu Telefon um diese URL direkt auf Ihr Telefon zu schießen. (Beachten Sie, dass für diese Erweiterung eine Begleit-App sowie ein Android-Telefon mit Version 2.2 oder höher erforderlich sind.)

Eine weitere Option ist die Beta-Erweiterung Chrome to Mobile . Für diese Version ist keine Begleit-App auf Ihrem Gerät erforderlich, sofern Sie Ice Cream Sandwich (Android 4.0) oder höher ausführen.

5. Window Resizer

Manchmal müssen Sie nur eine kurze Überprüfung durchführen, um eine oder zwei Medienabfragen zu testen und zu installieren Fenster Resizer und Sie haben eine schnelle Erweiterung mit einigen gängigen voreingestellten Fenstergrößen sowie die Option, eigene zu erstellen und für die zukünftige Verwendung zu speichern.

6. Ripple Emulator

Eine brillante Beta-Erweiterung, Ripple Emulator verfügt über umfangreiche Funktionen, die Sie bei der Entwicklung Ihrer Web-App unterstützen. Das Hauptaugenmerk von Ripple liegt auf der Entwicklung mit WebWorks, PhoneGap und der mobilen Webentwicklung, die eine Plattform zum praktischen Testen mehrerer Plattformen bietet. Einige der vielen Funktionen, die Ripple bietet, sind:

  • Volle Übersicht über die Leistung Ihrer App
  • DOM-Inspektion
  • Testen mehrerer Geräte und Auflösungen
  • Eine konsolidierte Lösung für die mobile Entwicklung

Ripple befindet sich noch in der Beta-Phase. Achten Sie also auf die üblichen Beta-Fehler, aber probieren Sie es auf jeden Fall aus und geben Sie Feedback, wenn Sie können.

Gut für alle

Hier sind einige Erweiterungen, von denen so ziemlich jeder an der einen oder anderen Stelle profitieren kann:

7. Dieser Rahmen

Bringen Sie Frames in ihren eigenen Workflow, installieren Sie die Kontextmenü 'Dieser Rahmen' und erhalten Sie die Möglichkeit, Frames in ihren eigenen Registerkarten oder Fenstern zu öffnen.

8. Web Developer Toolbar

Das Web Dev Symbolleiste gibt es schon lange und ist ein tolles Werkzeug. Diese Chrome-Version ist ein direkter Port des seit langem beliebten Firefox-Tools, das viele hilfreiche Funktionen bietet. Dieser kann mehrere Erweiterungen ersetzen und bietet Ihnen schnelle Optionen für Optimierungen wie:

  • Ändern Sie die Größe des Browserfensters
  • Javascript ausschalten
  • Cache leeren

9. Super Screenshot

Manchmal muss man einfach ein Stück von dem teilen, was man sich ansieht. Super Screenshot kann das mit Stil machen! Holen Sie sich einen Abschnitt oder eine ganze Seite, kommentieren Sie und teilen Sie. Genial.

10. Google Font Preview

Google bietet einen fantastischen kostenlosen Schriftartendienst Google Font Preview ist eine ebenso starke Erweiterung, um diese Schriftarten direkt in Ihrem Browser zu überprüfen!

11. JSON-Ansicht

In Chrome fehlt die integrierte Unterstützung für die Anzeige von JSON-Daten und die einfache Erweiterung JSON-Ansicht fügt die Fähigkeit hinzu, es sauber und lesbar zu halten.

Sicht ist eine weitere Option zum Verschönern von Code im Browser. Es bietet viel mehr Syntaxoptionen als JSON View. Wenn Sie also viel mögen, dann entscheiden Sie sich dafür.

Hinweis: Sight und JSON View stehen in Konflikt, wählen Sie also nur eine aus!

Gut für Designer

Designer machen die Dinge hübsch und diese Erweiterungen können Ihnen helfen, ein wenig Zeit zu sparen, um diese ästhetische Glückseligkeit zu erreichen.

12. Farbwähler

ColorZilla hat ein ziemlich tolles Dienstprogramm erstellt. Farbwähler , mit mehreren zeitsparenden Optionen, einschließlich einer Pipette! Der Traum eines jeden Kindes.

13. Bildüberlagerung

Pixel-Perfektion: der Heilige Gral für einige und der Fluch der Existenz für andere. Eingeben Bildüberlagerung um Ihnen zu helfen, den Gipfel der Pixelausrichtung zu erreichen.

14. Ruul

Wie breit ist das Manchmal muss man es nur wissen. Ruul ist eine raffinierte Erweiterung, die Ihnen Abstand, Linienhöhe und mehr anzeigt. Perfekt für Typografieprofis und Tischler!

15. Live CSS Editor

Während die Option zum Live-Bearbeiten von Stylesheets in den Chrome DevTools vorhanden ist, möchten Sie manchmal nur einen schnellen Zugriff auf eine benutzerfreundliche Benutzeroberfläche, um CSS schnell zu optimieren. Live CSS Editor gibt dir genau das. Geh spielen.

Hier können Sie Live-CSS-Änderungen vornehmen, ohne eine weitere Erweiterung hinzuzufügen, direkt in den Chrome Dev Tools. Navigieren Sie einfach zu Quellen Klicken Sie auf eine beliebige Stelle in einer Ihrer CSS-Dateien und beginnen Sie mit der Bearbeitung. Genießen Sie es, wenn sich Ihre Änderungen sofort auf die Elemente auswirken!

Gut für Entwickler

Sie verbringen Ihre ganze Zeit damit, etwas Fantastisches aufzubauen. Hier sind einige Add-Ons, mit denen Sie Ihren Workflow effizienter und unterhaltsamer gestalten können.

16. Visuelles Ereignis

Visuelles Ereignis ist eine ziemlich praktische Erweiterung, mit der Sie Ihre aktuelle Seite nach Elementen durchsuchen können, an die Ereignisse angehängt sind, und diese für eine kurze visuelle Anleitung skizzieren. Das Overlay bietet einen schnellen Überblick über die beteiligten Funktionen.

Es ist erwähnenswert, dass Visual Event nur Ereignisse erfassen kann, die mithilfe einer JavaScript-Bibliothek gebunden sind, während Sie in den Chrome Dev Tools alle gebundenen Ereignisse anzeigen können. Der Bildschirm unten zeigt Ihnen, wo Sie suchen müssen.

17. HTTP-Header

HTTP-Header ist eine einfache, aber effektive Erweiterung, die einen schnellen Zugriff auf Antwortheader und den Status einer URL ermöglicht und sehr praktisch zum Debuggen ist.

18. GitHub-Repositorys

Wenn Sie GitHub verwenden - und das sollten Sie tun - installieren GitHub-Repositories für den schnellen Zugriff auf Repos, Benachrichtigungen und vieles mehr.

19. Diff für Gists

Diff für Gists ist genau das, wonach es sich anhört. Diese Erweiterung fügt eine Funktion zum Anzeigen von Unterschieden in GitHub Gists hinzu.

20. Chrome Sniffer

Wie haben sie das gemacht? Ist das jQuery? Wenn 'Quelltext anzeigen' einfach zu langsam ist, klicken Sie auf Chrome Sniffer um herauszufinden, was zum Erstellen der Seite verwendet wurde, die Sie gerade betrachten.

Nicht die essbaren. Bearbeiten Sie dieses Cookie bietet Ihnen die einfache Möglichkeit, die von Ihrem bevorzugten Browser verwendeten Cookies zu bearbeiten.

Barrierefreiheit

Die Entwicklung unter Berücksichtigung der Barrierefreiheit ist eine der Aufgaben, die manche versuchen, unter den Teppich zu schieben. Hoffentlich helfen Ihnen diese Tools dabei.

22. ChromeShades

ChromeShades ist ein Tool, mit dem Sie einige häufig auftretende Probleme mit der Barrierefreiheit finden und beheben können. Aktivieren Sie es, um Ihre Website in eine Seite ohne Stil umzuwandeln und nachzuahmen, wie jemand ohne Sicht mit ihr interagieren würde.

23. Vom Anblick geblendet

Hast du jemals einen Alt-Tag verpasst? Ja, ich auch, ständig ! Vom Anblick geblendet ist ein schickes Add-On, das Ihnen zeigt, was Sie vermissen, damit Personen, die Ihre Website nicht visuell anzeigen können, immer noch wissen, was los ist. Diese Erweiterungen heben alle Bilder auf Ihrer Seite hervor, denen der alternative Text fehlt, und leiten Sie zu einem Ort, der etwas Aufmerksamkeit erfordert.

Performance

Seien wir ehrlich, in der heutigen Zeit verdient die performante Website Ihre Aufmerksamkeit. In diesem Sinne sprinten einige Werkzeuge an die Spitze, um Ihnen zu helfen, einen schnellen Zen zu erreichen.

24. YSlow

Ein bekanntes Gesicht ist YSlow , ein Tool für die Seitenleistung, das nachweislich erfolgreich ist und sich hervorragend als Erweiterung für Chrome eignet. Ich finde für Neulinge, dass die von YSlow bereitgestellten Informationen leichter zu verdauen sind und das große separate Fenster sowohl ein Pro als auch ein Contra ist: Gut, dass es groß und außerhalb der Seite ist; nicht gut, weil es dir ein riesiges Fenster aufzwingt.

25. PageSpeed ​​Insights

Der Kampf um den Spitzenplatz ist PageSpeed ​​Insights , das kürzlich ein umfangreiches Update erhalten hat und sich gut in die Chrome Dev Tools integrieren lässt. In meinen Tests konnte PageSpeed ​​Insights aufgrund der Integration des Netzwerkpanels konsistent mehr HTTP-Anforderungen finden. Ich glaube jedoch an die Datenpräsentation und kann etwas umständlicher zu lesen sein als YSlow. Auch wenn die Integration der Chrome Dev Tools hilfreich ist, kann der sichtbare Bereich Ihrer Websites im Dock-to-Right-Modus Medienabfragen auslösen, die sich auf die PageSpeed-Ergebnisse auswirken können. Nur etwas zu beachten.

Mit keiner dieser großartigen Erweiterungen können Sie etwas falsch machen. Wählen Sie also Ihr Gift und werden Sie performant!

26. Speed ​​Tracer

Speed ​​Tracer ist eine robuste Erweiterung, die speziell entwickelt wurde, um Messdaten zur Leistung Ihrer Websites und Anwendungen bereitzustellen. Dieses Tool bietet visuelle Daten darüber, wie genau Ihre Website ihre Zeit verbringt, und bietet Grafiken und Diagramme zu folgenden Aspekten:

  • JavaScript-Ausführung
  • CSS Selector Matching
  • DOM-Ereignisbehandlung
  • Laden von Netzwerkressourcen
  • XMLHttpRequest-Rückrufe

Es ist erwähnenswert, dass Sie Chrome Version 18 oder höher ausführen müssen, um dies zu installieren. Aktualisieren Sie das Gerät und führen Sie es aus.

Legacy-Erweiterungen (in Chrome Dev Tools)

Während die Funktionen der folgenden Erweiterungen jetzt direkt in den Chrome Dev Tools verfügbar sind, erinnern diese Erweiterungen an vergangene Tage.

27. User-Agent-Switcher

Bei so vielen Plattformen ist es manchmal erforderlich, den Benutzeragenten des gewünschten Standorts nachzuahmen. User-Agent Switcher ist eine hilfreiche Erweiterung, um dies über einen praktischen kleinen Knopf für Sie zu tun, und wissen Sie was? Ja, Sie können dies auch in den Chrome Dev Tools tun.

28. ScriptNo

Ah unerwünschte Skripte, wie wir dich verabscheuen. ScriptNo ist eine Erweiterung zur Steuerung von JavaScript. Diese Funktion ist jetzt in den Chrome DevTools über verfügbar Einstellungen → Allgemein . Also ja, eine Erweiterung weniger!

29. Cache löschen

Mehr Geld, weniger Cache! Cache leeren löscht Ihre Sitzung schnell, um klebrige Stile, Skripte oder was auch immer zu löschen. Sie können den Cache direkt in den Einstellungen der Chrome Dev Tools deaktivieren oder über einen Kontext auf die Registerkarte 'Netzwerk' klicken. Versuch es.

Schauen Sie sich das Bild an, um zu sehen, wie Sie Skriptblockierung und Cache-Busting direkt von Chrome Dev Tools aus erreichen können, ohne dass ein Plug-In erforderlich ist.

Apps

Chrome ist zwar keine namentliche Erweiterung, bietet jedoch die Möglichkeit, Anwendungen zu installieren, um Ihren Workflow zu unterstützen. Hier sind ein paar Top-Tipps.

30. Dabblet

Dabblet Integriert sich in Ihren GitHub-Benutzernamen und ermöglicht es Ihnen, HTML- und CSS-Snippets zu erstellen und zu bearbeiten, sie als GitHub-Gists zu speichern und sogar zu teilen!

31. Dev HTTP Client

Eine API erstellen? REST manipulieren? Installieren DEV HTTP Client für eine super hilfreiche und einfach zu bedienende Sandbox zum Arbeiten mit HTTP-Anfragen und mehr.

32. Pixlr

Ein Bildbearbeiter. In Ihrem Browser. Ja. Pixlr ist eine App, mit der Sie direkt in Chrome Fotobearbeitungsfunktionen nutzen können. Selbst wenn Sie ein Gimp-Genie oder Photoshop-Profi sind, lohnt es sich, dies zu überprüfen.

33. Gradient Creator

Gradient Creator ist eine radikal zu installierende App, mit der Sie komplexe Farbverläufe direkt in Ihrem Browser erstellen und das Ergebnis sogar in CSS oder SVG exportieren können.

Die Chrome Dev Tools

Da die großartigen Leute hinter den Dev Tools die Entwicklung zum Aufbau einer ultimativen Entwickler-Toolbox in Ihrem Browser fortsetzen, ist es äußerst hilfreich, sich mit den vorhandenen Funktionen vertraut zu machen, die ohne Erweiterungen verwendet werden können. Hier sind einige großartige Ressourcen, um Ihnen den Einstieg zu erleichtern.

Joocode hat eine schöne Anleitung mit mehreren Tipps in Dinge, die ich über den WebKit-Inspektor nicht wusste .

Majd Taby schaut sich die Entwickler-Tools an Moderne Webentwicklung .

Und schließlich einige hilfreiche Links, die Sie wahrscheinlich mit einem Lesezeichen versehen sollten:

Ende der Zeile

Während sich das Web weiterentwickelt, müssen auch die Tools, mit denen wir es betreiben und konstruieren, weiterentwickelt werden. Ich hoffe, dass Sie in diesem Beitrag etwas Nützliches gefunden haben, und mit etwas Glück haben Sie sich inspirieren lassen, bei Ihrem nächsten Projekt einige großartige Erweiterungen auszuprobieren und tiefer in die Chrome Dev Tools einzutauchen, um die Fülle an Leistung zu entdecken, die für eine Vielzahl von Ihnen verfügbar ist Bedürfnisse.