Add-ons die den Arbeitsalltag erleichtern – Teil 2

Landingpages

Firebug: Das kostenlose Web-Developer-Tool für die Webseitenanalyse ist ein praktisches Hilfsmittel um den Seitenquellcode zu durchforsten.

Das kostenlose Add-on Firebug stellt Web-Developen umfangreiche Funktionen zur Verfügung um HTML, CSS und Javascript einer Webseite zu analysieren und  hinsichtlich Fehler zu untersuchen. Mit Firebug kann man CSS-Layouts überprüfen, DOM-Objecte (Document Object Model) anzeigen und editieren oder Ladezeiten der einzelnen Seitenelemente analysieren. Hier können Sie das Plugin für Firefox downloaden.

Die ersten Schritte mit Firebug

Firebug kann man über das Browsermenü, die Taste F12, das Firebug Icon oben rechts im Browser oder das Kontextmenü der rechten Maustaste starten. Standardmäßig öffnet sich das Firebug-Fenster am unteren Browserrand und besteht aus einem größeren linken und einem kleineren rechten Fenster (die Größe lässt sich aber jederzeit anpassen). Das Linke-Fenster besteht aus den Tabs Konsole, HTML, CSS Skript, DOM, Netzwerk und Cookies.

firebug1

Mit dem Firebug analysiert man Webseiten bis ins kleinste Detail.

 

HTML-Code und CSS-Werte untersuchen

In dem Tab „Konsole“ bekommen Sie Javascript Fehler angezeigt. Sie können auch Javascript-Code einfügen und testen und dies alles ohne neue HTML-Seite zu erstellen.

Unter dem Tab „Cookies“ werden alle Cookies der Webseite aufgeführt. Hier gibt es weitere Funktionen mit der man Cookies erstellen, blocken, exportieren und filtern kann.

Wie der Name des Tabs „HTML“ schon sagt, bekommen Sie hier den gesamten HTML-Code der Webseite hierarchisch angezeigt. Mit einem Klick kann man jedes Element, das eine Unterebene enthält aufklappen. Um einzelne Elemente zu untersuchen klickt man diese an und erhält im rechten Fenster, unter dem Tab „Styles“, die dazugehörigen CSS-Formatierungen plus die vererbten CSS-Werte. Diese Änderungen sind nur im Browser zu sehen und müssen in den Quellcode übertragen werden. Möchten Sie sich jetzt kleinere Layout-Änderungen ansehen, können Sie dies direkt durchführen. Dafür muss nur der CSS-Wert geändert oder die Formatierung erweitert werden und Firebug stellt die Änderung Live im Browser da. Wenn Sie mit dem Mauszeiger über den Quellcode fahren, dann wird im oberen Browserfenster der Teil der Website, der durch den jeweiligen Quellcode dargestellt wird, hellblau hervorgehoben. So erhalten Sie eine schnelle Übersicht über den Aufbau der Webseite.

Das rechte Fenster hat noch weitere nützliche Tabs um die Webseite zu analysieren. Im Tab Layout wird für jedes ausgewählte Element das Box-Modell angezeigt und man kann sich einen optischen Überblick über die Seiten- und Elementabstände verschaffen. Es werden die Pixel-Werte für Offset, margin, border und padding sowie des Contents abgebildet. Auch hier haben Sie wieder die Möglichkeit Werte zu ändern. Dafür muss einfach die Maus über die Layoutdarstellung des Box-Modells bewegt werden, ein Klick in den Bereich genügt und der CSS-Wert kann editiert werden.

firebug2

Im Tab „Layout“ wird das Box-Modell zum ausgewählten Element angezeigt.

 

Fazit

Für die Webentwicklung ist das kostenlose Add-on Firebug ein unverzichtbares Tool. Mit dem man schnell und einfach Webseiten analysieren, Fehler aufspüren und testen kann. Die anderen Browserentwickler Google, Apple und Microsoft stehen Mozilla in nichts nach und haben ebenfalls hervorragende Entwicklertools.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Landingpages

Conversion Rate mit Videos auf Landingpages erhöhen? Aber klar! Hier sind... Mehr lesen »

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »


Weitere Artikel von Michael
Design Landingpages Online Marketing
Update 29.04.2016   Was sind Accelerated Mobile Pages? Die Accelerated... Mehr lesen »

Landingpages
WordPress ist eine fantastische Open Source Software, mit der man nicht nur... Mehr lesen »

Online Marketing
Auf vielen Webseiten bekommen Nutzer zur Begrüßung einen sogenannten... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
AdWords

5 Tipps zur Verbesserung der CTR

Update 04/2016   Die CTR (Click-Through-Rate, also die Klickrate) spielt eine große Rolle in... Mehr lesen »
^