Les applications Web utilisent un navigateur Web pour l'interface avec l'utilisateur.
La commande des navigateurs qu'il faut connaître pour afficher le code HTML de la page en cours. Ctrl-U avec Chrome, Firefox et Edge. Commande-Option-U avec Safari.
Autre commande intéressante : Ctrl-clic sur l'icône de rafraichissement de page, pour rafraichir la page et aussi le code JavaScript associé à la page.
Il est parfois nécessaire d'utiliser les outils de développement des navigateurs pour bien comprendre ce qui se passe et trouver ainsi pourquoi l'application ne se comporte pas comme elle devrait.
Ce que l'on peut faire en particulier avec ces outils de développement :
On peut passer par les menus des navigateurs. Des racourcis clavier permettent aussi de lancer les outils de développement.
Avec Chrome, Firefox et Edge : Ctrl-Maj-I ou F12
Safari (MacOS) : Alt-Commande-I
Cette section indique comment utiliser les principales fonctionnalités des outils avec Chrome. Voir https://developer.chrome.com/docs/devtools/open/.
Inspecter les éléments d'une page, il suffit d'ouvrir les outils et de cliquer en haut sur "Elements". Plus simple : clic droit sur un élément de la page et choisir "Inspecter" (lance les outils). Voir https://developer.chrome.com/docs/devtools/open/.
Console JavaScript : section en haut "Console". Voir https://developer.chrome.com/docs/devtools/console/.
Vider le cache JavaScript (pratique si vous modifiez le code JavaScript d'une page déjà affichée) : lancer les outils, appui long sur l'icône de rafraichissement de la page et choisir "Vider le cache et effectuer une actualisation forcée".
Lancer le débogueur : section en haut "Sources". Voir https://developer.chrome.com/docs/devtools/javascript/.
Voir l'activité réseau : section en haut "Network". On peut alors voir les requêtes HTTP et leur réponse en cliquant dessus. Voir https://developer.chrome.com/docs/devtools/network/.
Inspecter et modifier le CSS : inspecter un élément et clic sur "Styles". Voir https://developer.chrome.com/docs/devtools/dom/.