- 1. Einführung in Browser-Entwicklertools
- Überblick der Hauptbrowser: Chrome DevTools, Firefox Developer Edition, Safari Web Inspector
- Zugangsmöglichkeiten: Tastenkürzel, Menüs, Kontextmenüs
- Grundlayout: Element Inspector, Console, Network, Performance Tabs
- 2. Elements Panel & DOM Manipulation
- Live HTML/CSS Editing: Echtzeit-Änderungen im DOM und Styles
- Box Model Visualisierung: Padding, Margin, Border interaktiv analysieren
- CSS Debugging: Spezifitätsprobleme, Inheritance, Cascade nachvollziehen
- 3. Console für Entwicklung & Debugging
- JavaScript Execution: Code direkt im Browser ausführen und testen
- Logging Methoden: console.log, warn, error, table für verschiedene Zwecke
- Advanced Console Features: Grouping, Timing, Memory Monitoring
- 4. Network Analysis & Optimization
- HTTP Request Monitoring: Alle Netzwerkanfragen im Detail analysieren
- Performance Metrics: Ladezeiten, Dateigrößen, Caching-Verhalten
- Throttling Simulation: Langsame Netzwerke und Mobile Devices emulieren
- 5. Performance & Profiling Tools
- Performance Monitor: Echtzeit-Metriken für CPU, RAM, DOM Nodes
- JavaScript Profiling: Performance-Bottlenecks in Code identifizieren
- Memory Leaks erkennen: Speicherprobleme diagnostizieren und beheben
- 6. Application Panel & Storage
- Local Storage & Session Storage: Client-seitige Datenspeicherung
- Cookie Management: Cookies anzeigen, bearbeiten und löschen
- Service Worker Debugging: Progressive Web App Entwicklung
- 7. Security & Accessibility
- Security Analysis: Mixed Content, HTTPS Probleme identifizieren
- Accessibility Tree: Barrierefreiheit testen und verbessern
- Color Contrast Checking: WCAG Compliance sicherstellen
- 8. Mobile Development & Device Simulation
- Responsive Design Mode: Verschiedene Viewports und Geräte testen
- Touch Events Simulation: Mobile Interaktionen debuggen
- Device Emulation: Spezifische Geräte und Netzwerkbedingungen
- 9. Praxisübung: Performance Audit
- Aufgabe: Durchführung eines komplettem Performance Audits einer Website
- Bonus: Erstellung eines Optimierungsplans basierend auf den Ergebnissen
LernzieleDie Teilnehmer erlangen umfassende praktische Fähigkeiten im professionellen Einsatz von Browser-Entwicklertools für Debugging, Performance-Optimierung und Web-Entwicklung. Sie lernen komplexe CSS- und JavaScript-Probleme zu diagnostizieren, Netzwerkanalysen durchzuführen und Performance-Bottlenecks zu identifizieren. Nach dem Seminar können sie Entwicklertools effizient für tägliche Entwicklungsaufgaben nutzen und komplexe Frontend-Probleme systematisch lösen
Zielgruppen- Frontend-Entwickler und Web-Designer
- Quality Assurance Engineer und Tester
- Fullstack-Entwickler und Web-Project-Manager
