- 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
