Firefox Addon Firebug – Das perfekte Tool für Webdesigner

Webdesign - Allgemein

firefox-addon-firebugDas Firefox Addon Firebug zählt wohl zu den TOP-Addons für Webdesigner. Firebug ermöglicht eine sehr gute Analyse von Webseiten im Browser sowie eine Bearbeitungsmöglichkeit zu Testzwecken.
Somit lässt sich diese Browser-Erweiterung optimal zur Fehleranalyse bzw. zur Optimierung von Webseiten nutzen.
Ich möchte euch hier dieses Addon kurz vorstellen und auf die genialen Funktionen eigehen.

 

Integration von Firebug in Firefox


Firebug kann in der Statusleiste des Browser aufgerufen werden. Dort befindet sich nach der Installation ein Button mit einem Käfer über welchem das Tool aktiviert werden kann.

firebug-statusleiste

Klickt man darauf öffnet sich über der Statusleiste das Modul:

firebug-modul

 

Die Funktion von Firebug


Links befindet sich der Bereich für den HTML-Code und rechts der CSS-Code der aktuellen Seiten. Der HTML-Code ist anfangs noch „zugeklappt" damit man nicht gleich mit dem kompletten Code konfrontiert wird und so einen besseren Überblick behält. Über das Plus kann man den jeweiligen Bereich aufklappen.
Fährt man dann mit der Maus auf einen der Codeteile wird dieser Bereich oben auf der Webseite blau markiert. Auf diese Art und Weise kann man sich schnell einen Überblick über den Aufbau der Seite verschaffen.
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

firebug-code-markiert

Eine weitere Möglichkeit der Code-Analyse ist mit folgendem Button/Werkzeug möglich:

firebug-botton-markieren
Mit diesem funktioniert das ganze nun genau anders herum – bei aktiviertem Werkzeug kann man auf der Webseite den gewünschten Bereich anfahren und bekommt unten im Code Feld automatisch den jeweiligen Code angezeigt.

firebug-markieren-werkzeug
Auch mit dieser Methode fällt die Webseiten- und Code-Analyse leicht.


Neben dem HTML-Code bekommt man auch immer gleich den entsprechenden CSS-Code angezeigt (rechtes Feld).
Praktisch ist hier auch, dass man diesen bearbeiten kann um Veränderungen an der Seite ohne großen Aufwand testen zu können.

Im linken Bereich hat man dann noch die Möglichkeit von der HTML Ansicht auf die CSS, Skript, DOM oder Netzwerk Ansicht zu wechseln.
Durch einen Klick auf den Käfer ganz links hat man noch diverse Einstellungsmöglichkeiten sowie weiter Funktionen wie zB Java Script Ausführungszeit messen.
Auch im rechten Code-Teil kann man zwischen den Ansichtsmoden wechseln.
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* 2 Text anzeigen für Inhalt */
google_ad_slot = "1853105335";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

Als Webdesigner zählt Firebug somit zu einem mächtigen und fast schon unverzichtbaren Addon für den Internet-Browser. Am besten gleich installieren und ausprobieren!