Wat zijn de Chrome-ontwikkelaarstools (Chrome DevTools)?

Chrome DevTools is een ingebouwd hulpmiddelenset in de browser voor webontwikkeling en debugging.

Belangrijkste panelen:

• Elements: Bekijk en refactoriseer de HTML-structuur en CSS-stijlen in realtime.
• Console: Loguitvoer, uitvoeren van JavaScript-code, debugging.
• Sources: Debug JavaScript-code met breakpoints, prestatieprofilering.
• Network: Bewaking van netwerkverzoeken (HTTP/HTTPS), analyse van hun responsetijden en inhoud.
• Performance: Analyse van laadtijden en uitvoering van de pagina.
• Memory: Profilering van geheugengebruik, detectie van leaks.
• Application: Onderzoek van de bronnen van de applicatie — opslag (Local Storage, Session Storage, IndexedDB), cookies, cache.
• Security: Beveiligingsanalyse van de pagina, inclusief SSL-certificaatcontrole.
• Lighthouse: Webpagina-audit op basis van prestatie-, toegankelijkheids-, SEO- en best practices-criteria.

Gebruik in QA:

• UI/UX-controle: Analyse van stijlen (Elements), testen van responsiviteit (Toggle device toolbar).
• Frontend debugging: Fouten opsporen in JavaScript (Console, Sources).
• API-interactieanalyse: Bewaking van verzoeken en antwoorden (Network).
• Prestatie-evaluatie: Schatting van laadtijd en scriptuitvoeringstijd (Performance).
• Opslagonderzoek: Controle van Local Storage, cookies, enz. (Application).
• Apparaatsimulatie: Testen op verschillende schermformaten en netwerkcondities (Network – Throttling).