Blog

Entwicklungshilfe: Web-Development-Tools unter Google Chrome

Warum ich vermehrt über Google Chrome statt über den guten alten Firefox schreibe, habe ich in diesem Blog ja bereits mehrfach berichtet. Auch heute geht es wieder um erstgenannten und weitere Dinge, die ich unter Firefox gemocht und so unter Chrome vermisst habe: Web-Development-Tools.Obwohl es diese großen, mächtigen und zugegebenermaßen relativ gut zu bedienenden Entwicklertools, wie zum Beispiel Adobe Dreamweaver gibt, mit denen man ein gesamtes Web-Projekt aus dem Boden stampfen kann, braucht es zur Webentwicklung im Grunde doch nicht mehr als einen guten Editor, einen FTP-Client zum Hochladen der Dateien und einen Browser, um das Ergebnis zu betrachten.

Der Browser eignet sich aber als viel größeres Hilfsmittel als zum bloßen Betrachten, wenn man ein paar Erweiterungen einsetzt. Unter Firefox war die Erweiterung Firebug daher immer eine Pflichtinstallation, denn mit ihr kann man sehr komfortabel, tiefgründig und anschaulich den Code einer Seite analysieren. Darum gehen wir heute der Frage nach, was uns Chrome dazu zu bieten hat.

Firebug Lite [link]

Das ist sozusagen der kleine Bruder der oben genannten Erweiterung. Natürlich wird sie stets weiter entwickelt und verfügt noch nicht so viele Möglichkeiten, wie das FF-Addon, ist an und für sich aber schon einmal grundsolide. Braucht man aber eigentlich nicht mehr, weil das alles Chrome auch schon eingebaut hat…

Google Chrome

Neben der Adresszeile des Browsers befindet sich ein Button zum Bearbeiten der jeweiligen Seite, dargestellt als eine Papierseite mit Knick. Klickt man darauf, findet man weiter unten einen Eintrag namens „Entwickler“, der Zugriff auf verschiedene Analysetools gewährt. Im Grunde steht damit das gleiche Repertoire offen, wie einem FF-Benutzer mit der Erweiterung Firebug.
Es muss aber auch dazu gesagt werden, dass es minimale Nachteile gibt; so wird unter Firebug z.B. die Zeile angegeben, in der bestimmter CSS-Code in der eigentlichen Datei zu finden ist, bei Chrome muss man die jeweilige Stylesheet-Datei von Hand nach dem Eintrag durchsuchen, den man in Chrome angezeigt bekommt. Das sind aber reine Bedienungsannehmlichkeiten. In Sachen Funktion geht Chrome selbst noch ein wenig weiter und filtert so zum Beispiel sämtliche verwendeten Bilder der Seite heraus, zeigt sie an und gibt die entsprechenden Links an.

Übrigens: Bei Firebug fand‘ ich immer angenehm, dass es sich an das Browser-Fenster andockte, so hatte man immer alles im Blick. Die Chrome-Tools öffnen sich jedoch in einem neuen Fenster. Irgendwie habe ich das nie hinbekommen, zu ändern, gestern aber einen praktischen Button ganz unten links der Tools entdeckt, welcher das Problem sofort löst.

Web Developer [link]

Heute bin ich dann über eine Chrome-Erweiterung gestoßen, die mir noch einmal ein paar Werkzeuge mehr mit an die Hand gibt. Beziehungsweise eine genauere Analyse ermöglicht. Web Developer funktioniert über einen Button hinter der Adresszeile, welcher ein Menü mit einer Vielzahl von Informationen aufruft. Darüber lassen sich CSS-Stylesheets anzeigen, deaktivieren, neu laden oder bearbeiten. Bei letzterem scheint es übrigens noch einen Bug zu geben, da das Interface nicht richtig geladen wird.

Dasselbe funktioniert auch mit anderen Webseiten-Elementen, wie Formularen. Ebenfalls praktisch: ich kann mir grafisch alle Überschriften hervor heben lassen. So erfahre ich zum Beispiel auf einen Blick, welches Element vor mir das <h1> oder <h3>-Tag verwendet. Super praktisch sind auch die Funktionen für Bilder: hier kann ich mir die Alt-Texte einblenden lassen oder die Abmessungen, ohne, dass ich erst ein Rechtsklick auf das Bild und dann auf Eigenschaften machen muss.

Das ganze Teil ist einfach extrem praktisch und bietet eine Fülle von Funktionen. Für Web-Entwickler, die den Browser nicht nur zu visuellen Kontrolle nutzen wollen, sondern auch eine „informative und funktionale Lupe“ haben wollen, ist diese Erweiterung genau das Richtige.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s