Die Entwicklung einer guten Website, die den allgemein anerkannten "Best Practices" entspricht, kann sehr schwierig sein, und manchmal ist das Debuggen, um Fehler in Ihrem Code zu beheben, noch schwieriger.

Glücklicherweise gibt es im Chrome-Webstore mehrere Erweiterungen, die die Produktivität erheblich steigern und das Arbeiten bei Websites und browserbasierten Anwendungen erleichtern.

Hier sind elf der besten Chrome-Erweiterungen für Webdesigner und -entwickler:

Verwandte : 7 der besten Chrome-Erweiterungen, die Sie ausprobieren müssen

1. WhatFont

WhatFont ist ein großartiges Tool, um die verschiedenen Arten von Schriftarten auf einer Webseite zu erkennen, indem Sie einfach mit der Maus darüber fahren.

Wenn Sie auf die Schriftart klicken, erhalten Sie zusätzliche Informationen über den genauen Typ, die Größe und die Zeilenhöhe. So einfach und elegant.

2. StilBot

StyleBot ist eine CSS-Erweiterung für Webentwickler. Es hilft Ihnen, das Erscheinungsbild jeder Website anzupassen, indem Sie das Element auswählen und dessen Stil im Editor ändern.

Es gibt auch eine erweiterte CSS-Registerkarte, wo Sie Ihre eigenen Regeln direkt schreiben können. Es ist besonders nützlich für Leute, die nur CSS lernen.

3. BuiltWith Technologie Profiler

Mit BuiltWith Profiler wird überprüft, auf welchen Technologien eine Website aufgebaut ist.

Sobald Sie auf das Symbol in der Chrome-Leiste klicken, wird ein Tray geöffnet, in dem Sie die verschiedenen Technologien einer Website wie Webserver, Content Delivery Network, Content Management System, JavaScript-Bibliotheken und Funktionen und vieles mehr sehen können.

Dadurch können Sie entscheiden, welche in Ihren eigenen Webprojekten implementiert werden sollen.

4. Webentwickler

Web Developer ist eine Erweiterung für Chrome, die von der beliebten Firefox-Version portiert wurde.

Es bietet eine Vielzahl von Tools für Ihren Browser, einschließlich der Optionen zum Wechseln zwischen Stylesheets, zum Deaktivieren von JavaScript, zum Anzeigen versteckter Elemente oder zum Ausfüllen von Formularen.

Es gibt eine Menge Leckereien hier, um Ihren Code zu testen oder zu experimentieren, also sehen Sie sich das an.

5. ColorZilla

ColorZilla ist eine wunderbare Erweiterung für Webdesigner, die die genaue Farbe von Websites überprüfen möchten, die sie mögen.

Damit können Sie von jedem Punkt in Ihrem Browser eine Farbmessung erhalten und den Hex- oder RGB-Wert zum Einfügen in ein anderes Programm kopieren.

Es gibt verschiedene andere Funktionen wie Pipette, Paletten-Viewer, CSS-Verlaufsgenerator, Picked Color History und ein Webseiten-Farbanalysator, der eine Palette für jede Website bietet.

6. Capture Seite Screenshot (FireShot)

FireShot macht einen sehr einfachen Job. Es ermöglicht Ihnen, einen Screenshot von verschiedenen Teilen einer Webseite oder der gesamten Webseite selbst zu machen und in PDF, JPEG, GIF, PNG oder BMP zu exportieren.

7. Seitenlineal

Seitenlineal ermöglicht es Ihnen, die Breite, Höhe und Position eines Elements auf einer Webseite zu messen, indem Sie ein Lineal um das Element ziehen und die Größe nach Herzenslust ändern.

Sie können auch zum "Element-Modus" wechseln, um jedes Element auf einer Seite darzustellen, während Sie mit der Maus darüber fahren.

8. YSlow

Mit YSlow können Sie Ihre Websites beschleunigen, indem Sie Ihre Seite analysieren und Möglichkeiten zur Leistungsverbesserung vorschlagen.

Es testet Ihre Seiten anhand eines vordefinierten Regelwerks, das weitgehend akzeptiert wird und fasst die Ladezeit Ihrer Website, Site-Komponenten und statistische Diagramme zusammen.

9. Web-Entwickler-Checkliste

Dieses handliche Tool überprüft Ihre Webseiten, um sicherzustellen, dass sie den Best Practices bezüglich SEO, HTML-Validierung, Mobiler Reaktionsfähigkeit, Benutzerfreundlichkeit und Geschwindigkeit folgen.

Sie können auch die Website des Entwicklers für eine detailliertere Checkliste besuchen.

10. Durchsuchen Sie den Stapelüberlauf

Search Stack Overflow ist eine sehr einfache Erweiterung, die Ihrem Browser ein Suchfeld zum Nachschlagen von Themen in Stack Overflow hinzufügt.

Sie können nach allem suchen, was mit Web-Entwicklung oder Programmierung im Allgemeinen zu tun hat, und Sie werden wahrscheinlich eine gute Quelle finden, um Ihre Probleme zu lösen.

11. Überprüfen Sie meine Links

Überprüfen Sie meine Links Die Chrome-Erweiterung hilft, fehlerhafte Links auf Ihrer Webseite zu erkennen.

Sobald Sie es installiert haben, klicken Sie auf das Symbol in der Chromleiste, und es wird ein Ergebnisbereich angezeigt, in dem Sie die Gesamtzahl der Links auf der Seite sehen können und ob es irgendwelche gebrochenen gibt.

Es zeigt auch alle guten Links in grün und gebrochene in rot für die einfache Erkennung.

Fazit

Es ist nicht zu leugnen, dass all diese großartigen Chrome-Erweiterungen die Plackerei beim Entwerfen oder Entwickeln von Webanwendungen stark reduziert haben. Wenn Sie einige oder einige davon noch nicht haben, verpassen Sie viel, also probieren Sie bitte die für Sie relevanten aus und erleben Sie einen schnelleren Weg, um direkt aus Ihrem Webbrowser zu arbeiten.

Welche anderen Chrome-Erweiterungen verwenden Sie? Teile sie mit uns in den Kommentaren unten.