HowTo Tuto Chrome DevTools : Le Guide Complet 2026

1. Comment ouvrir Chrome DevTools ?

Plusieurs méthodes existent pour ouvrir les DevTools :

Méthode 1 : Raccourcis clavier

• Windows/Linux : Ctrl + Shift + I ou F12
• Mac : Cmd + Opt + I

Méthode 2 : Clic droit

• Clic droit → Inspecter

Méthode 3 : Menu Chrome

• Menu ⋮ → Plus d’outils → Outils de développement

Méthode 4 : Icône dans la barre d’outils

• Accessible via les paramètres Chrome

2. Les panneaux essentiels de DevTools
DevTools contient de nombreux outils pour analyser une page web.

2.1. Elements — HTML & CSS en direct

Permet de :
• voir le HTML
• modifier le DOM
• ajuster le CSS en temps réel

2.2. Styles, Computed & CSS Overview

Fonctions :
• édition CSS
• valeurs calculées
• nettoyage de styles (CSS Overview)

2.3. Console — Débogage JavaScript

Permet :
• voir les erreurs JS
• tester du code
• bénéficier de suggestions IA

2.4. Sources — Débogage avancé

• breakpoints
• call stack
• navigation dans les scripts

2.5. Network — Analyse réseau

• analyse des requêtes
• optimisation des temps de chargement
• simulation 3G/4G/Offline

2.6. Performance — Profiling complet

• Core Web Vitals
• analyse du rendu

2.7. Mode Responsive

• test mobile/tablette
• simulation d’appareils

2.8. Application — stockage & PWA

• LocalStorage
• IndexedDB
• Cache
• Service Worker

2.9. Lighthouse — Audit automatisé

• SEO
• Performance
• Accessibilité

2.10. Memory — Fuites mémoire

• analyse mémoire JS

3. Fonctionnalités avancées

3.1. Command Menu

Raccourci :
• Windows/Linux : Ctrl + Shift + P
• Mac : Cmd + Shift + P

3.2. Simulation réseau poussée

• tests réseaux lents
• tests hors‑ligne

3.3. CSS Overview

• couleurs
• styles inutiles

4. Astuces Pro

• raccourcis
• détacher la fenêtre
• ajouter des panneaux personnalisés

5. Utilisation de l’IA dans DevTools (Gemini)

Chrome intègre désormais un assistant IA capable d’analyser votre code, vos styles, vos fichiers et vos performances.

5.1. Débogage IA intelligemment assisté
• explication d’erreurs
• corrections automatiques

5.2. Suggestions de code intelligentes
• complétions
• corrections

5.3. Analyse de performances assistée
• suggestions d’optimisations

5.4. Analyse réseau automatisée
• analyse de requêtes
• suggestions d’optimisation

5.5. Panel d’assistance IA
• chat intégré
• explication du DOM, réseau, fichiers

5.6. Intégration MCP (IA externe)
Connexion à :
• Gemini CLI
• Copilot
• Claude Code

6. Comment activer l’assistant IA (Gemini) dans DevTools

6.1. Conditions nécessaires

• dernière version de Chrome
• compte Google connecté
• être situé aux
• DevTools en English (US)
• activer : Settings → AI Innovations

6.2. Procédure d’activation

Ouvrir DevTools
Aller dans Settings
Activer AI Innovations
Mettre la langue en English (US)
Redémarrer DevTools

6.3. Accéder au panneau IA

→ Un panneau AI Assistance apparaît

7. Résumé général

DevTools permet de :

• analyser HTML/CSS/JS
• optimiser réseau & performances
• tester en responsive
• gérer cookies & storage
• auditer SEO / Accessibilité
• utiliser l’IA pour un débogage plus rapide