Was sind die Chrome-Entwicklungstools (Chrome DevTools)?

Chrome DevTools ist eine in den Browser integrierte Sammlung von Werkzeugen für Webentwicklung und -debugging.

Hauptpanels:

• Elements: Anzeige und Echtzeit-Refactoring der HTML-Struktur und CSS-Stile.
• Console: Ausgabe von Logs, Ausführung von JavaScript-Code, Debugging.
• Sources: Debugging von JavaScript-Code mit Haltepunkten, Leistungsprofiling.
• Network: Überwachung von Netzwerk-Anfragen (HTTP/HTTPS), Analyse ihrer Laufzeit und Inhalte.
• Performance: Analyse der Lade- und Ausführungsleistung der Seite.
• Memory: Profiling des Speicherverbrauchs, Erkennung von Lecks.
• Application: Untersuchung der Ressourcen der Anwendung — Speicher (Local Storage, Session Storage, IndexedDB), Cookies, Cache.
• Security: Sicherheitsanalyse der Seite, einschließlich SSL-Zertifikatsprüfung.
• Lighthouse: Webseitenaudit nach Kriterien für Leistung, Zugänglichkeit, SEO und Best Practices.

Verwendung in QA:

• UI/UX-Überprüfung: Analyse der Stile (Elements), Anpassungsfähigkeit (Toggle device toolbar).
• Frontend-Debugging: Fehlererkennung in JavaScript (Console, Sources).
• API-Interaktionsanalyse: Überwachung von Anfragen und Antworten (Network).
• Leistungsbewertung: Einschätzung der Ladezeit und Ausführung von Skripten (Performance).
• Speicheruntersuchung: Überprüfung von Local Storage, Cookies usw. (Application).
• Gerätesimulation: Tests auf verschiedenen Bildschirmgrößen und Netzbedingungen (Network – Throttling).