Rubrik nützliche Tools
Erweiterungen für Mozilla Firefox
Für den Firefox von Mozilla gibt es gleich mehrere mächtige Erweiterungen. Die Web Developer Toolbar von Chris Pederick und Firebug von Parakey. Beide Tools alleine sind schon sehr zu empfehlen, aber beide in Verbindung einfach unschlagbar. Seit Ende 2008 gibt es noch ein weiteres Tool zum erkennen der gängigen JavaScript Librarys.
Web Developer Toolbar
Die Web Developer Toolbar gilt allgemein als Plicht-Werkzeug für alle Webdesigner. Neben den allgemeinen Standardfeatures wie das Anzeigen von Stylesheets, Cookies und Javascript gibt es zahlreiche Funktionen zur Modifikation von Webseiten direkt aus dem Browser heraus. Weitere Funktionen erlauben das Anzeigen, Ändern und Löschen von Cookies, das Verstecken von Seitenelementen, das Blockieren von Javascripten und Bildern. Es können Javascript- und CSS-Code einzeln angezeigt werden und gibt es die Möglichkeit, die Anzeige des Browsers auf eine bestimmte Auflösung zu setzen, sowie Hilfslinien einzublenden. Für den ganzen Funktionsumfand der Web Developer Toolbar sei auf die Seite von Chris Pederick verwiesen, da es den Rahmen sprengen würde, auf alle Features der Toolbar einzugehen. Die wohl wichtigsten sind:
- Deaktivieren aller Farben, Grafiken, Weiterleitungen, JavaScript oder StyleSheet Elementen
- Bearbeiten der Styles direkt im Browser
- Ein und Ausblenden aller Alt- Attribute von Grafiken
- es können alle Grafiken einer Webseite mit Größe und Dateigröße anzeigt werden
- Web Developer Toolbar Maßwerkzeug zum Ausmessen der Webseitenelemente
- alle Klassen und ID von CSS Elementen direkt an diesen einblenden
- Hilfslinen einblenden
- alle Farben mit Farbcode anzeigen
- Bildschirmlupe zum Zoomen der Seitenelemente
- Hervorheben von Frames, Links usw.
- Verändern der Fenstergröße
- Tools für HTML, CSS, Links usw. Validierung
- DOM Inspector
- Java und Error Console
- Geschwindigkeitsreport
- und weitere ...
Die Web Developer Toolbar vereinfacht die Fehlersuche in Webprojekten!
Hier gibt es die Web Developer Toolbar zum Download bei MozillaFirebug
Firebug von Parakey Inc. ist eine freie Open Source Erweiterung für den Firefox Browser. Als Nutzer von IE, Safari oder Opera müssen sie sich mit Firebug Lite zufrieden geben. Die Lite Variante von Firebug ist ein JavaScript und wird in die Webpage eingebaut um die Firebug Features im Browser zu simulieren.
Firebug ist ein Tool zum Live inspizieren und editieren von HTML und CSS. Dabei überprüft Firebug den Quellcodes der Webseite auf Fehler und ermöglicht es HTML-, CSS- und Javascript-Teile der Seite separat anzuzeigen und direkt zu editieren. Ein Javascript-Debugger ist vorhanden. DOM Objekte (Document-Object-Model) der Website werden übersichtlich dargestellt.
Es ist möglich Analysen über Ladezeiten einzelner Seitenelemente anzustellen. In Verbindung mit dem Yahoo!-Addon Yslow ist es möglich eine Webseite auf ihre Performance überprüfen zu lassen. Damit werden leicht Elemente ermittelt, die den Download der Seite bremsen. Einige Features von Firebug sind:
- der Javascript Debugger (schrittweises durchlaufen des Codes möglich)
- interaktiver HTML Explorer
- Quickly find errors
- DOM Explorer
- CSS Explorer
- Netzwerkverindungsexplorer zur Überwachung der Ladezeiten von Grafiken, JavaScripts und AJAX zu überwachen/debuggen.
Wird Firebug nicht verwendet, sollte es deaktiviert werden. Da jede Seite automatisch analysiert wird, kann es bei mehreren Seiten in die Performance gehen. Die Aktivierung und Deaktivierung ist jedoch mit einem Mausklick extrem einfach.
Hier gibt es Firebug zum Download bei Mozilla
Firecookie - Firebug Erweiterung
Firecookie stellt, wie der Name schon sagt, erweiterte Funktionalitäten für Cookies zur Verfügung. Obwohl eine Reihe von Grundfunktionen bereits in Firebug vorhanden ist, lohnt sich eine Installation von Firecookie.
Firecookie ist unter BSD-Lizenz lizensiert
Hier gibt es Firecookie zum Download bei Mozilla
Firediff - Firebug Erweiterung
Firediff stellt eine weitere Erweiterung für Firebug dar. Mit Firediff ist es möglich, Änderungen von Firebug an CSS und DOM zu tracken. Dadurch stellt Firediff einen Einblick in die Funktionalität der Anwendung, sowie der Änderungen zur Verfügung.
Firediff setzt min. Firebug 1.4 voraus.Hier gibt es Firediff zum Download
Library Detector
Der Library Detector von Paul Bakaus ist eine Erweiterung für den Firefox Version Firefox: 1.5 – 3.2a1pre. Als Nutzer von IE, Safari oder Opera können Sie dieses Tool leider nicht nutzen.
Der Library Detector ermittelt Javascript Bibliotheken, die auf der aktuellen Seite eingesetzt werden und zeigt das Resultat in Form von Icons mit ausführlichenTooltipp unten rechts in der Statusbar an. Das Tool ist in der Lage, auch mehrfache Bibliotheken, einschließlich das folgende zu ermitteln:
- jQuery
- jQuery UI
- Dojo
- Prototype
- Scriptaculous
- MooTools
- Spry
- YUI
- Qooxdoo
Werden vom Library Detector JavaScript Librarys auf der aktuellen Seite gefunden, werden in der Statusbar Icons je Library angezeigt. Durch einen Mouse-Over auf ein solches Iron werden Informationen zur verwendeten Bibliothek angezeigt. Diese sind n den meisten Fällen die Version der Bibliothek oder die verwendeten Plugin wie bei jQuery UI. Allerding tut sich die erste Version des Library Detector noch etwas schwer, wenn der Webdesigner die Bibliothek unbenennt. Das sollte jedoch nur in den seltensten Fällen passieren.
Hier gibt es den Library Detector zum Download bei Mozilla
jsdoc-toolkit - A documentation generator for JavaScript
jsdoc-toolkit ist ein Dokumentationsgenerator für JavaScript und bietet eine automatische Dokumentationsgenerierung für JavaScript und AjaX Scripte. Dabei bietet sdoc-toolkit eine umfangreichen Tagsliste speziell auf JavaScript zugeschnitten. Ein kurzes Beispiele:
- @augments - Indicate this class uses another class as its "base."
The @augments Tag indicates that the class being documented extends another class and adds methods or properties of its own. It is a synonym for the @extends tag.
Syntax
@augments otherClass
Example
/**
* @constructor
*/
function GeneralWriter() {
}
/**
* @constructor
* @augments GeneralWriter
*/
function SpecialWriter() {
}
jsdoc-toolkit ist unter MIT lizensiert
Download jsdoc-toolkit bei Google-Code
Inline Code Finder for Firebug
Inline Code Finder for Firebug, ist ein add-on zum identifizieren von HTML Elementen mit
* Inline-Javascriptereignisse
* Inline-Style
* Javascript: links
