Ouvrir les outils de développement (devtools) sur votre navigateur

Les outils de développement (ou DevTools) sont des extensions intégrées aux navigateurs qui vous permettent d’explorer, tester et corriger le code d’un site web.

Que vous soyez débutant ou expérimenté, ils sont incontournables pour déboguer efficacement.

À quoi ça sert ?

Chaque navigateur possède son ensemble d’outils, sous la forme d’onglets. Chaque onglet permet de consulter/analyser/modifier une partie spécifique d’un site ou d’une application web :

• Inspecteur : Permet de consulter et modifier le HTML/CSS en direct.
• Console : Affiche les erreurs JavaScript et permet d’interagir avec la page en JS.
• Network : Liste tous les fichiers chargés (scripts, images, requêtes, etc.) et leur temps de réponse.
• Sources : Donne accès aux fichiers JS avec des outils de débogage.
• Application : Pour inspecter les cookies, le stockage local, les caches...
• Performance : Pour analyser la vitesse de chargement, la consommation de ressources, etc.

Application est parfois nommé “Stockage” et Performance est également trouvable sous le nom “Mémoire”

Ouvrir les devtools

Pour ouvrir les outils de développement, il existe des raccourcis clavier faciles à utiliser, qui sont presque identiques en fonction des différents navigateurs :

Google Chrome (et basés sur Chromium)

Sous Windows et Linux : Ctrl + Shift + I ou F12

Sous MacOS : Cmd + Option + I

Vous pouvez également ouvrir les outils via le menu principal > Plus d’outils > Outils de développement !

Ces raccourcis fonctionnent donc aussi pour Edge, Brave, Arc et Opéra

Firefox

Sous Windows et Linux : Ctrl + Shift + I ou F12

Sous MacOS : Cmd + Option + I

Vous pouvez également ouvrir les outils via le menu principal (☰) > Outils de développement !

Safari

Sous MacOS : Cmd + Option + I

Sous Windows et Linux : Si vous essayez d’ouvrir Safari sur Windows, je vous conseille d’aller faire une petite sieste, vous devez être fatigué !

Ou sinon vous pouvez ouvrir via le menu Développement > Afficher l’inspecteur web

Pensez à activer le menu Développement : Safari > Réglages > Avancées > cocher Afficher le menu Développement