Les navigateurs modernes disposent d'outils pour les développeurs, les DevTools. Ce sont des outils intégrés directement dans le navigateur et destinés aux développeurs web pour inspecter, monitorer, déboguer et optimiser les sites et apps web. 

Prenons Chrome. Dans Présentation -> Options pour les développeurs, on dispose de plusieurs onglets : Elements, Console, Sources, Network, Performance, Memory, Application, Privacy and security, Lighthouse, recorder. Dans Safari, le menu Développement donne accès à de nombreux fonctions : inspecteur web, console JS, code source de la page, afficher les ressources de la page, démarrer l'enregistrement chronologique, Vider les caches, possibilité d'afficher la page dans un autre navigateur et selon un OS. 

Les DevTools peuvent intimider. Un outil rapide est utiliser : Performance sous Chrome. Il donne les métriques principales d'une page. Cette console pourra vous aider à comprendre les performances de vos pages et voir s'il y a un problème (réel ou non). Autre outil incontournable, Lighthouse. Peut-être l'outil à garder en priorité s'il fallait choisir. L'outil permet de mesurer et de comprendre la qualité d'une page web. Le rapport généré est donc un document indispensable pour observer la performance, l'accessibilité, les bonnes pratiques et le SEO de la page. Pour chaque élément, le rapport donne de nombreux indicateurs et métriques. Les insights sont les éléments clés pour vous aider à comprendre les performances et là où il faut agir. Chaque ligne du rapport est détaillée. 

Les DevTools évoluent avec chaque version du navigateur. Chrome est sans doute la référence du domaine. Safari reste en-deça, par exemple, il n'y a pas d'équivalent à Lighthouse.