Chemnitzer Linux-Tage 2010: Einsteigerforum
Firefox als Werkzeug zur Webentwicklung
Der Vortrag stellt nützliche Firefox-AddOns vor, ohne die man als Webentwickler
eigentlich gar nicht mehr auskommt, egal ob man ein paar Webseiten schreibt
oder Web-Anwendungen programmiert. Der Vortragende richtet sich an Einsteiger
und hofft auf rege Diskussion.
Erwünschte Vorkenntnisse: Grundkenntnisse Webbrowser und Webtechnologie
Ausgangspunkt
- HTML-Werkzeuge, wie Bluefish, Quanta Plus, KompoZer / Nvu, Adobe Dreamweaver, Phase 5
- Heute häufig Webseiten-Erstellung via Wiki, Blog oder Content-Management-System
- hier meist eingebaute HTML-Editoren: TinyMCE, CKEditor, HTMLArea
- oder aber:
<textarea> Text Ändern
Firefox-Extension: It's All Text
Firefox-Extension: Web Developer
- Erzeugt Menü unter Extras und Symbolleiste (Ansicht → Symbolleisten)
mit verschiedenen Entwicklungshilfen fürs Web
- Cookie-Manipulation
- CSS entfernen, ändern
- Grafiken: z.B. mit angepassten Größen hervorheben
- Informationen: z.B. Dokumentgröße anzeigen
- Verschiedenes: HTTP-Authentisierung löschen, HTML editieren
- Extras:
- Optionen: Funktionen, z.B. hervorheben, dauerhaft, sonst bei jedem Neuladen weg. dann auch Symbol in Statusleiste
Firefox-Extension: Firebug
Features
- HTML + CSS = Layout analysieren, visualisieren und ändern
- JavaScript Debugger und Profiler (Fehler finden, JS command line, Logging)
- DOM analysieren und ändern
- Netz-Verkehr (HTTP, HTTPS, XHR - Ajax) und Performance analysieren
- wiederum erweiterbar
- Für HTML-Autoren, CSS-Designer, JavaScript-Entwickler, Site-Engineers
- Firebug Lite für andere Browser
Aktivieren
- Käfer-Icon in Statusleiste, oder F12, in neuem Fenster: Strg+F12
- Nur für aktuellen Tab
- ggf. Panels aktivieren: Klick auf Netzwerk → Pfeil
- ggf. Schriftgröße ändern: Käfer → Schriftgröße
- Panels = Funktionsbereiche: Konsole, HTML, CSS, Skript, DOM, Netzwerk
Aufgabenbezogen
- Inspektion, Überfahren von HTML-Elementen
- Live-Ändern
- zeigt auch dynamische Änderungen des Dokuments
- Z.Z. kein Abspeichern der Änderungen (Firediff)
- z.B. TU Homepage
- Inspektion, Brotkrümel-Leiste - Farben ändern
- Eigenschaften ausschalten oder ändern
- z.B. Drucken von Webseiten
- Inspektion, Layout, auch zum Ändern
- Zeitmessung - was dauert lange?
- z.B. Ajax in
http://dict.tu-chemnitz.de
- Eintippen Suchwort
- Konsole
GET ... sugg.php? .... sugg.js (klick)
- an Stelle in Code springen, callback Funktion
handleSearchSugg suchen
- Breakpoint in
handleSearchSugg, rechts Haltepunkte
- zeilenweise 2. Icon
- Wie lange → Netzwerk → XHR
- Profile = Zeitmessung: klick, Tätigkeit, klick
- z.B. JavaScript-Logging -
- Nie mehr
alert('width: ' + width + ' height: ' + height);
- Jetzt:
console.log('width: %d height: %d', width, height);
- Weitere:
console.warn('var ... is uset');
- → Console API
Hilfe