22 wichtige Browser-Erweiterungen für Web-Profis

Seite 1 von 2: Webbrowser-Erweiterungen 1-12

Moderne Webbrowser sind zum großen Teil dank der Vielzahl von Erweiterungen von Drittanbietern, mit denen zusätzliche Features und Funktionen hinzugefügt werden können, äußerst vielseitig.

Bei Erweiterungen geht es jedoch nicht nur um das Surferlebnis für den Endbenutzer. Designer und Entwickler haben Zugriff auf eine breite und vielfältige Palette von Erweiterungen für nahezu alles, was sie tun möchten. Sie erleichtern Ihnen das Leben und / oder verbessern die Qualität Ihrer Arbeit.



Hier sehen wir uns eine kleine Handvoll der wichtigsten Erweiterungen an, die Sie benötigen und die Sie Ihrer Liste hinzufügen können Webdesign-Tools . Die Chancen stehen gut, dass Sie hauptsächlich mit Chrome oder Firefox entwickeln (lesen Sie jedoch unseren Leitfaden zum beste Webbrowser für einige andere großartige Optionen), daher konzentrieren wir uns auf Erweiterungen, die einen oder beide dieser Browser unterstützen.



01. Leuchtturm

Leuchtturm-Erweiterung

Maximieren Sie die Qualität Ihrer Website mit einem Lighthouse-Audit

Wie gut ist die Qualität Ihrer Website oder Web-App? Dieses kostenlose Google-Tool informiert Sie über Leistung, Zugänglichkeit und Best Practices. Lighthouse führt Audits für jede von Ihnen angegebene URL durch und generiert einen Bericht, in dem erläutert wird, warum jedes Audit wichtig ist und was Sie tun können, um fehlgeschlagene Aspekte zu verbessern. Neben Leistung und Zugänglichkeit können auch Best Practices für SEO und Progressive Web App überprüft werden. Sie können es über Chrome DevTools, über die Befehlszeile oder als Knotenmodul ausführen.



02. Stift

Stiftwerkzeug

Mit Stylus können Sie Websites neu gestalten, die nicht Ihrem Geschmack entsprechen

Wenn Ihnen das Aussehen einer bestimmten Website nicht gefällt, gestalten Sie sie einfach mit Stylus neu. Mit dieser Browsererweiterung für Chrome und Firefox können Sie Themen und Skins für viele beliebte Websites installieren und Ihre eigenen personalisierten CSS-Stylesheets erstellen, bearbeiten und verwalten. Stylus unterstützt Installationen aus gängigen Online-Repositorys, verfügt über eine Sicherungsfunktion für Ihre Datenbank mit installierten Stilen und bietet eine anpassbare Benutzeroberfläche mit Themen, optionalen Layouts, Farbauswahl für Symbole und Abzeichen sowie zahlreichen weiteren Optimierungen.

03. Webentwickler

Web Developer-Erweiterung



Web Developer ist das Schweizer Taschenmesser für Entwicklererweiterungen

Web Developer wurde ursprünglich für Firefox entwickelt und auf Chrome (und Opera) portiert. Es ist das Schweizer Taschenmesser für Entwicklererweiterungen und ergänzt die integrierten Entwicklertools beider Browser.

Was ist eine gute Weihnachtsschrift auf Microsoft Word

Die Erweiterung fügt eine Symbolleiste mit einer Vielzahl nützlicher Funktionen hinzu, darunter die Möglichkeit, die Seitenstruktur umfassend zu überprüfen, Cookies und Formularinhalte zu verwalten, verschiedene Dinge wie JavaScript und Caching sowie CSS-Stile und vieles mehr zu aktivieren oder zu deaktivieren. Es kann auch nach häufigen Problemen mit Seiten wie fehlerhaften Bildern oder nicht standardmäßigem Code suchen.

Ein besonders nützliches Element ist der CSS-Stilinspektor. Auf diese Weise können Sie mit der Maus über ein beliebiges Element auf der Seite fahren und die darauf angewendeten Stile anzeigen, wodurch mysteriöses Stilverhalten schnell gelöst werden kann. Dieser ist wirklich ein Muss.

04. DevTools Autosave

DevTools-Erweiterung

In DevTools vorgenommene Änderungen werden beim Vornehmen in den Quelldateien gespeichert
  • DevTools Autosave: Chrom

Diese Erweiterung ist etwas umständlich einzurichten, ist aber sehr nützlich, sobald Sie sie zum Laufen gebracht haben. Sie können bereits Änderungen in Chrome DevTools vornehmen und sofort sehen, wie sie sich auf der Seite widerspiegeln. Mit der Erweiterung DevTools Autosave können Änderungen jedoch automatisch in den Quelldateien gespeichert werden, wenn Sie sie vornehmen. Dies kann besonders nützlich sein für CSS-Optimierungen, damit Ihre Seite optisch genau richtig aussieht.

Zusätzlich zur Installation der Erweiterung selbst müssen Sie einen Server installieren und ausführen. Anweisungen dazu finden Sie auf der GitHub-Site der Erweiterung, auf die auf der Seite im Chrome Store verwiesen wird. Sobald Sie die Einstellungen vorgenommen haben, kann es entweder das lokale Dateisystem oder die serverbasierte Entwicklung unterstützen.

05. IE Tab

IE Tab Erweiterung

Testen Sie Ihre Arbeit in einem IE-Tab

Es gibt immer noch eine beträchtliche Anzahl von Menschen, die den Internet Explorer verwenden, und während Microsoft heutzutage gut mit der Community für Webstandards verbunden ist, kann man in der Vergangenheit sagen, dass es einige Abweichungen von der Norm gab, wenn es um den Ansatz von IE ging Seiten rendern.

Wenn Sie Ihre Arbeit im IE testen möchten, bietet IE Tab eine einfache Möglichkeit, dies zu tun. Sie haben auch die Möglichkeit, die Standards auszuwählen, mit denen Sie rendern möchten. Dies bedeutet, dass Sie die Abwärtskompatibilität mit IE7 testen können, was in Unternehmensumgebungen nach 11 Jahren bemerkenswerterweise immer noch auftreten kann.

In der Vergangenheit war IE Tab auch für Firefox verfügbar. Es wird jedoch in der neuesten Version von Firefox nicht unterstützt und es ist unklar, ob es ein Update erhalten wird.

06. HTML Validator

HTML Validator-Erweiterung

Eine praktische Alternative zu Online-Tools

Es ist leicht, dass sich Fehler in HTML einschleichen, und es gibt bereits eine Reihe von Online-Tools, mit denen Sie Ihren Seiteninhalt überprüfen können. Wenn Sie es etwas umständlich oder zeitaufwändig finden, zu ihnen zu gelangen, könnte dies die Erweiterung für Sie sein.

Die hinzugefügte Schaltfläche öffnet eine Quellansicht der aktuellen Seite und hebt alle HTML-Fehler oder Warnungen hervor und listet sie auf. Es ist besonders gut geeignet, um Dinge wie fehlende End-Tags, veraltete Funktionen und allgemeine schlechte Praktiken zu erkennen. Sie können auch zwischen Validierungsalgorithmen wählen, die Ihren Anforderungen entsprechen.

Selbst wenn Sie ein erfahrener Webentwickler sind, kann es nützlich sein, Ihren HTML-Code durch Validierung auszuführen, da die Dinge immer durch das Netz rutschen können. Das Bestehen der Validierung ist natürlich keine Garantie für gutes HTML, aber es hilft!

07. User-Agent Switcher

User-Agent Switcher-Erweiterung

Nützlich, wenn Sie vorhandenen Code geerbt haben
  • User-Agent Switcher: Chrom

Dieser ist anfällig für einige Debatten. In einer idealen Welt sollten Ihre Seiten nicht nach Benutzeragenten suchen (eine ausgefallene Art, Browserversion, Betriebssystem und Rendering-Engine zu sagen). Es ist viel besser, die Funktionserkennung zu verwenden (dh zu überprüfen, ob der Browser des Benutzers die HTML-Funktion X unterstützt?), Und Ihre Seite schrittweise zu verbessern oder zu verschlechtern, anstatt älteren Browsern unterschiedliche Inhalte bereitzustellen.

Unabhängig davon, ob Sie vorhandenen Code geerbt haben oder den Benutzeragenten in Ihrem eigenen Code überprüfen müssen, bietet diese Erweiterung eine schnelle und einfache Möglichkeit, zwischen ihnen zu wechseln, ohne einen anderen Browser laden oder ein anderes Gerät einschalten zu müssen.

08. Google PageSpeed ​​Insights

Google PageSpeed ​​Insights

Greifen Sie mit einem einzigen Klick auf PageSpeed ​​Insights zu
  • Google PageSpeed ​​Insights: Chrom
  • Google PageSpeed ​​Insights: Feuerfuchs

Es lohnt sich, einige Zeit damit zu verbringen, die Leistung Ihrer Seite zu optimieren, da dies einen subtilen, aber signifikanten Unterschied darin machen kann, wie sie von Benutzern empfangen wird.

Möglicherweise kennen Sie bereits PageSpeed ​​Insights, einen Onlinedienst von Google, der die Leistung Ihrer Website bewertet und eine Reihe häufig sehr nützlicher Empfehlungen zur Optimierung dieser Website abgibt. PageSpeed ​​Insights hebt auch Optimierungsschritte hervor, die Sie bereits unternommen haben (manchmal versehentlich!).

Dies ist wirklich eine praktische Erweiterung, die einen Link zu PageSpeed ​​Insights bietet, sodass Sie Ihre Seite mit einem einzigen Klick testen können. Es ist derselbe Dienst, den Sie online erhalten, ohne dass Sie einen neuen Tab öffnen und dorthin navigieren müssen. Die Erweiterung selbst bietet auch eine Leistungsbewertung, bevor Sie sich durchklicken, aber es ist wirklich der Link zur detaillierten Analyse, der nützlich ist.

09. BuiltWith Technology Profiler

BuiltWith Technology Profiler

Ein Ein-Klick-Weg, um unter der Haube der angezeigten Seite zu sehen
  • BuiltWith Technology Profiler: Chrom
  • BuiltWith Technology Profiler: Feuerfuchs

Haben Sie sich jemals gefragt, wie sie das gemacht haben? beim Surfen im Internet? Es gibt verschiedene Gründe, warum es hilfreich sein kann, die Technologien und Standards zu verstehen, die Websites beim Besuch verwenden. Mit der BuiltWith-Erweiterung können Sie mit einem Klick unter der Haube der angezeigten Seite sehen.

Das Tool gibt Ihnen Einblick in die verwendeten JavaScript-Bibliotheken, Analyseplattformen, Webstandards, Frameworks und mehr. Alle Informationen werden auf sehr lesbare Weise geliefert und enthalten einfache Erklärungen zu den einzelnen Technologien oder Standards, damit Sie sie nicht mehr erforschen müssen.

Ein Blick auf die beliebtesten und modernsten Websites kann eine großartige Inspirationsquelle sein, wenn Sie versuchen, mit den sich ständig ändernden Stapeln und Standards Schritt zu halten.

10. SEOquake

SEOquake-Erweiterung

Eine detaillierte Aufschlüsselung der Verkehrs- und Ranking-Statistiken

Es ist wahrscheinlich, dass SEO ein Faktor für Sie bei der Entwicklung einer Website ist, und es gibt eine Vielzahl von Tools, mit denen Sie Ihre Chancen maximieren können, gesehen zu werden. SEOquake ist eines von vielen solchen Tools. Die Erweiterung bietet eine sehr detaillierte Aufschlüsselung der Verkehrs- und Ranking-Statistiken, vorausgesetzt, Ihre Website ist so beliebt, dass sie berechnet werden kann.

Auch für kleinere Websites ist die Möglichkeit nützlich, auf den eigenen Online-Diagnosedienst von SEOquake zu klicken, der eine Reihe nützlicher Empfehlungen enthält, um sicherzustellen, dass Ihre Seite auffindbar ist. Außerdem werden interne und externe Links untersucht und Domains und URLs verglichen.

die Form der Wassertanzszene

Standardmäßig überlagert die Erweiterung auch Suchmaschinenergebnisse mit SEO-Informationen. Es ist jedoch sehr konfigurierbar. Wenn Sie Probleme haben, können Sie es in den Optionen deaktivieren.

11. Emmet Re: Ansicht

Emmet Re: Ansicht

Testen Sie Ihre Seite schnell auf einer Reihe von Bildschirmgrößen nebeneinander
  • Emmet Re: Ansicht: Chrom

Responsive Design steht bei Ihrer Arbeit wahrscheinlich im Vordergrund, aber das Testen ist nicht immer die einfachste Entwicklungsstufe. Es kann sich als echtes Problem erweisen, eine Site in Aktion auf den unzähligen Bildschirmen und Geräten zu sehen, auf denen eine Site angezeigt werden kann.

Glücklicherweise können Sie mit Emmet Re: view Ihre Seite schnell auf einer Reihe von Bildschirmgrößen nebeneinander testen. Sie können zwischen einer 'Haltepunktansicht' wählen, die eine Ansicht für jeden CSS-Haltepunkt auf der Seite anzeigt, und einer 'Gerätewand', die beliebte Mobil- und Tablet-Geräte nachahmt. Die Gerätewand ist konfigurierbar und es steht eine große Liste von Geräten zur Nachahmung zur Verfügung.

Besonders schön ist, dass Sie weiterhin mit den Seiten interagieren können, während sie in der Emmet Re: -Ansicht angezeigt werden. Auf diese Weise können Sie die Formularübermittlung, Schaltflächenklicks und vieles mehr einmal testen und das Ergebnis in mehreren Ansichten anzeigen.

12. PerfectPixel

PerfectPixel

Überlagern Sie ein transparentes, statisches Bild mit einer Webseite im Browser - nützlich für die Zuordnung zu einem Drahtmodell

Mit PerfectPixel können Sie ein statisches Bild im Browser mit einem gewissen Grad an Transparenz auf eine Webseite legen, sodass die zugrunde liegende Seite darunter sichtbar ist. Es ist auch möglich, mehrere Overlays hinzuzufügen, wenn dies erforderlich ist.

Dies kann während der Entwicklungsphase nützlich sein, da Sie die Implementierung genau an ein Drahtmodell oder eine Vorlage anpassen können - sogar eine einzelne Pixelabweichung wird offensichtlich, daher der Name. Dies kann besonders nützlich sein für Teamprojekte, bei denen eine Übergabe zwischen Design und Entwickler stattfindet.

Sobald Sie das Overlay hinzugefügt haben, kann die Erweiterung es auch skalieren und verschieben. Da es sich nur um ein statisches Bild handelt, reagiert es natürlich nicht auf Änderungen der Bildschirmgröße. Daher möchten Sie möglicherweise mehrere Überlagerungen verwenden, um reaktionsfähige Designs zu testen.

Nächste Seite: 10 weitere wichtige Browser-Erweiterungen für Web-Profis

  • 1
  • zwei

Aktuelle Seite: Webbrowser-Erweiterungen 1-12

Nächste Seite Webbrowser-Erweiterungen 13-22