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