Tag: firebug

Firefox 23: Firefox Developer Tool mit Netzerkmonitor

Die integrierten Entwicklerwerkzeuge, die seit Version 10 in Firefox zur Grundausstattung zählen, bekommen im August mit Version 23 des Browsers ein Update spendiert, in dem auch ein Netzwerkmonitor enthalten sein wird. Wie im Mozilla Hacks-Blog zu lesen ist, wird es zudem einen "Remote Style Editor" geben, mit dem sich eine Seite auch auf mobile Geräten in Echtzeit anpassen lässt. Voraussetzung auf dem Endgerät dafür ist ein installierter Firefox, der etwa für Android vorliegt.

Weiterhin wird es ein "Option Panel" geben, in dem sich bestimmte Tools an- und ausschalten lassen. Auch ein erster Support für SourceMaps wird integriert sein, wodurch sich komprimierter JavaScript-Code in ursprünglicher Form anzeigen und mit Breakpoints versehen lässt. Wer sich selbst einen Eindruck von den Features verschaffen möchte, kann einfach Firefox Aurora installieren und ausprobieren.
Doch nicht nur das Developer Tool von Firefox bekommt Neuerungen: Auch der immer noch unangefochtene Firebug wird stets aktualisiert und erhält mit Version 1.12 ebenfalls interessante Funktionen.

Firefox: JSTerm als interaktives JavaScript-Terminal

In der aktuellen Beta-Version von Firefox (Version 16) steht unter Anderem eine neue Kommandozeile zur Verfügung, mit der sich unterschiedliche Aktionen durchführen lassen. So können verschiedene Funktionen des Browsers einfach über die Eingabe eines entsprechenden Schlüsselwortes aufgerufen werden. Beispielsweise lassen sich die Cookies einer Seite direkt bearbeiten, Elemente untersuchen, CSS-Stile editieren oder eine geöffnete Seite als Screenshot exportieren.
Die neuen "Web Developer Tools" von Firefox (seit Version 10), die durch ihr dunkles Erscheinungsbild auffallen, stellen künftig eine Alternative zu Firebug dar. Mit dem Inspektor, einem Debugger und der "Web Console" stehen komfortable Werkzeuge bereit, die den Firebug-Tools sehr ähnlich sind. Noch einen Schritt weiter geht Mozilla-Entwickler Paul Rouget, der mit seiner Firefox-Erweiterung JSTerm die Web Developer Tools von Firefox um eine interaktive JavaScript-Konsole erweitert.

Die Konsole versteht sich als Erweiterung der integrierten "Web Console" und vermittelt ein stärkeres Terminal-Gefühl. Neben der Autovervollständigung und Syntaxhervorhebung bietet die Konsole auch die Möglichkeit, DOM-Elemente und -Funktionen besser analysieren zu können. So können in einem separaten Bereiche alle zugehörigen Eigenschaften und Funktionen zu einem Objekt angesehen werden. Für Firefox-Extension-Entwickler dürfte der "Chrome-Modus" interessant sein, mit dem sich auch die Komponenten von Firefox selbst untersuchen lassen.

Arboreal: Visualisierung der DOM-Struktur

Beim Stöbern in den Firebug-Extensions bin ich kürzlich über ein interessantes Projekt gestoßen, mit dem sich die DOM-Struktur einer Seite als Stammbaum grafisch darstellen lässt. Die von Alex Spengler entwickelte Erweiterung nennt sich Arboreal und befindet sich derzeit noch im experimentellen Status. Die Installation der Extension erfordert lediglich eine manuelle Zustimmung des Benutzers.

Wenn Arboreal installiert wurde, findet sich in Firebug im rechten Panel (HTML-Tab) der Punkt "Visualization". Die grafische Hierarchie einer Website wird in diesem Bereich dargestellt — die Elemente des Stammbaus können durch die linke Maustaste verschoben werden. Wird in der Ansicht ein DOM-Element ausgewählt, synchronisiert sich die Auswahl mit dem Seiteninspektor auf der linken Seite, der die gewohnte Ansicht repräsentiert.
Die Erweiterung bietet viele Einstellungsmöglichkeiten und so kann die Darstellung der DOM-Elemente durch etliche Optionen angepasst werden. Tooltips über den Objekten blenden zusätzliche Details wie etwa Attribute oder Text ein. Zudem kann die gesamte Struktur als GraphViz-Datei ausgegeben werden.
Man darf auf die finale Version der Erweiterung gespannt sein, da sie eine alternative Methode zur Auswahl von DOM-Objekten darstellt und zudem die Komplexität einer Website übersichtlich veranschaulicht.

Firebug: CSS-Anpassungen in Echtzeit erstellen

Der Titel dieses Beitrags könnte etwas irreführend sein: Hier geht es nicht um die Möglichkeit, über das "Styles"-Panel von Firebug neue Stile zu definieren. Inzwischen dürfte diese Funktionalität jedem Webentwickler bekannt sein. Falls nicht, kann sie in diesem Artikel nachgelesen werden.
In diesem kurzen Beitrag möchte ich eine Vorgehensweise beschreiben, mit der sich sehr schnell ganze CSS-Dateien in Firebug anlegen lassen. Der Vorteil dieser Methode besteht darin, dass die neuen Stile und Anpassungen in Echtzeit betrachtet und verändert werden können. Dadurch entfällt der ständige Wechsel zwischen Code-Editor und Firefox. Da diese Möglichkeit vielleicht nicht jedem CSS-Entwickler bekannt ist, will ich sie kurz vorstellen.

Wer schon mit Firebug gearbeitet hat, wird den Reiter "CSS" kennen — darüber können per Doppelklick neue Eigenschaften angelegt und bestehende Stile bearbeitet werden. Mit den Pfeiltasten (das entsprechende Feld muss aktiviert sein) können Zahlenwerte schrittweise erhöht oder verringert werden.

Diese ganzen Möglichkeiten stehen natürlich auch in dem "Styles"-Panel zur Verfügung, das eine kompakte Version des "CSS"-Tabs darstellt und die geteilte Hauptansicht der Firefox-Erweiterung bildet.

Firebug: Cheatsheet mit Shortcuts und Befehlen

Die Referenzkarte ist zwar schon etwas älter, aber vielleicht ist sie manchem Webentwickler unbekannt gewesen: Bei Duvet-Dayz.com wurde einst ein schönes Firebug-Cheatsheet veröffentlicht, das eine gute Übersicht mit Tastaturbefehlen (Shortcuts), Maus-Aktionen und Konsolenbefehlen enthält. Die Übersicht gibt es als HTML-Version und kann dort zudem als PNG-Grafik oder PDF-Dokument heruntergeladen werden.

Das Cheatsheet ist in erster Linie für Firebug-Einsteiger gedacht — aber auch alteingesessene Firebug-Veteranen dürften den einen oder anderen Tipp finden, der womöglich noch nicht bekannt war. Hat man beispielsweise die "Element untersuchen"-Funktion aktiviert und fährt mit dem Mauszeiger über ein DOM-Element, können mit STRG + Nach oben die Elternelemente des Objekts fokussiert werden. Sollen Pixelwerte im "Styles"-Bereich geändert werden, können die Werte (Fokus muss auf dem Textfeld liegen) mit den Tasten Bild nach oben oder Bild nach unten um 10 Einheiten verändert werden.
Die Referenzkarte steckt also voller nützlicher Tricks und auch die Konsolenbefehle sind einen Blick wert.

Instant Blueprint: Grundgerüst für Web-Projekte

Vor einiger Zeit berichtete ich über das Projekt Deploy, mit dem sich per Knopfdruck fertige HTML-Grundgerüste für Web-Projekte erstellen lassen. Eine weitere Webanwendung dieser Art gibt es nun mit Instant Blueprint: Das kleine Online-Tool bietet noch mehr Möglichkeiten für die schnelle Generierung von Standard-Dateien und Ordnerstrukturen, wie sie für ein typisches Website-Projekt benötigt werden. Dazu gehören diverse HTML-, CSS- und JavaScript-Dateien.

Instant Blueprint bietet die Optionen, einen Document Type (DOCTYPE) festzulegen und ein JavaScript-Framework einzubinden. Zur Auswahl stehen derzeit jQuery, MooTools, Prototype und YUI. Weiterhin lässt sich festlegen, ob die ganze HTML-Struktur in einem zentrierten Container (div) verschachtelt werden soll. In einem Eingabefeld lassen sich die gewünschten IDs für die unterschiedlichen Bereiche (Header, Navigation, Content, etc.) festlegen. Ein Hinweis hierzu: Die fertige ZIP-Datei mit allen dazugehörigen Dateien wird erst dann generiert, wenn mindestens eine ID in das Textfeld eingetragen wurde.
In dem Kickstarter-Paket wird der CSS-Reset von Eric Meyer übrigens gleich mitgeliefert.

Firebug: FireQuery, Eventbug und weitere Extensions

Firebug zählt heutzutage zum Standard-Repertoire eines Webentwicklers. Der Feuerkäfer ist so beliebt, dass es mittlerweile eine große Sammlung an Erweiterungen für die Erweiterung gibt. Viele dieser Extensions sind wahrscheinlich altbekannt, dennoch wird es zukünftig noch weitere interessante Zusatzfunktionen für das Entwickler-Tool geben.
Für das Debuggen von jQuery-Code gibt es seit geraumer Zeit die Erweiterung FireQuery, mit der sich jQuery-Ausdrücke und Events im Firebug-Fenster anzeigen lassen.

Eine weitere Funktionalität der Extension stellt die Option "jQuerify" dar: Damit lässt sich auf einer Website (online oder offline) dynamisch die jQuery-Bibliothek einbetten, so dass anschließend per "$jq()" jQuery-Befehle ausgeführt werden können.

So lassen sich schneller jQuery-Funktionen testen und entwickeln. Ein schöner Nebeneffekt dabei ist, dass nach einem Funktionsaufruf alle Elemente in der Konsole angezeigt werden, die von dem jQuery-Befehl betroffen waren (siehe Abbildung).
Allerdings ist bei der Verwendung der Erweiterung Vorsicht geboten: Der Autor weißt darauf hin, dass die Extension noch unsicher ist und deshalb in einem separaten Profil genutzt werden sollte.

Firebug: Tipps für das Editieren von CSS-Styles

Die Firefox-Erweiterung Firebug hat sich zum Standard für das Testen und Debuggen von Websites entwickelt. Zusammen mit verschiedenen Erweiterungen lässt sich mit Firebug jeder technische Aspekt einer Website analysieren und optimieren.
Da das mächtige Werkzeug für Webentwickler sehr umfangreich ist, sind nicht alle Funktionen auf Anhieb ersichtlich bzw. selbstverständlich. Dieser Artikel soll eine kleine Anleitung für das Bearbeiten von CSS-Styles in Firebug darstellen — die Funktion dürfte das beliebteste Feature der Extension sein, da sich damit sehr schnell sichtbare Korrekturen an einem HTML-Dokument vornehmen lassen. In diesem ersten Firebug-Tutorial zeige ich lediglich ein paar Funktionen, welche die Arbeit mit dem Werkzeug erleichtern sollen. Firebug ist sehr benutzerfreundlich und viele Vorgänge lassen sich durch Ausprobieren herausfinden.

Nach dem man Firebug mit der F12-Taste geöffnet hat (Voraussetzung ist ein fertig geladenes HTML-Dokument), wird die zweispaltige Ansicht (HTML und CSS) dargestellt. In diesem Artikel geht es ausschließlich um den rechten Bereich, der "Styles"-Komponente.