Vue d'ensemble

Les outils pour les développeurs Chrome sont un ensemble d'outils pour les développeurs Web intégrés directement dans le navigateur Google Chrome. Les outils de développement vous permettent de modifier des pages à la volée et de diagnostiquer les problèmes rapidement, ce qui vous aide à créer des sites Web de meilleure qualité, plus rapidement.

Regardez la vidéo pour voir des démonstrations en direct des principaux workflows des outils de développement, y compris le débogage CSS, le prototypage CSS, le débogage JavaScript et l'analyse des performances de chargement.

Ouvrir les outils de développement

Il existe de nombreuses façons d'ouvrir les outils de développement, car différents utilisateurs souhaitent accéder rapidement à différentes parties de l'UI des outils de développement.

  • Pour utiliser le DOM ou CSS, effectuez un clic droit sur un élément de la page et sélectionnez Inspecter pour accéder au panneau Éléments. Vous pouvez également appuyer sur Commande+Option+C (Mac) ou sur Ctrl+Maj+C (Windows, Linux, ChromeOS).
  • Pour afficher les messages enregistrés ou exécuter JavaScript, appuyez sur Cmd+Option+J (Mac) ou sur Ctrl+Maj+J (Windows, Linux, ChromeOS) pour accéder directement au panneau de la Console.

Pour en savoir plus et découvrir les procédures à suivre, consultez la page Ouvrir les outils pour les développeurs Chrome.

Premiers pas

Si vous êtes un développeur Web plus expérimenté, voici les points de départ recommandés pour découvrir comment les outils de développement peuvent améliorer votre productivité:

Découvrir les outils de développement

L'interface des outils de développement peut être un peu envahissante... Il y a tellement d'onglets ! Toutefois, si vous prenez le temps de vous familiariser avec chaque onglet afin de comprendre ce qu'il est possible de faire, vous découvrirez peut-être que les outils de développement peuvent grandement améliorer votre productivité.

mode Appareil

Mode Appareil activé dans la fenêtre d'affichage.

Simulez des appareils mobiles.

Panneau "Elements"

Panneau "Elements".

Affichez et modifiez le DOM et le CSS.

Panneau de la console

dans le panneau de la console.

Affichez les messages et exécutez JavaScript depuis la console.

Panneau des sources

Panneau des sources.

Déboguer JavaScript, conserver les modifications apportées dans les outils de développement lors de l'actualisation des pages, enregistrer et exécuter des extraits de code JavaScript, et enregistrer dans des sources locales les modifications apportées dans les outils de développement.

Panneau "Network"

Panneau "Network" (Réseau).

afficher et déboguer l'activité réseau ;

Panneau "Enregistreur"

Panneau "Enregistreur".

Enregistrez, revoyez et mesurez les parcours utilisateur.

Panneau "Performances"

Panneau "Performances".

Trouvez des moyens d'améliorer les performances de chargement et d'exécution.

Panneau de mémoire

Panneau "Memory" (Mémoire)

Identifiez et corrigez les problèmes de mémoire qui affectent les performances des pages, tels que les fuites de mémoire.

Panneau "Application"

Panneau "Application" avec la section "Service workers" ouverte

Inspectez toutes les ressources chargées, y compris les bases de données IndexedDB ou Web SQL, le stockage local et de session, les cookies, le cache d'application, les images, les polices et les feuilles de style.

Panneau de sécurité

Panneau de sécurité.

Déboguez les problèmes de contenu mixte, de certificat, etc.

Communauté

Envoyez des rapports de bugs et des demandes de fonctionnalités dans Crbug, l'outil de suivi des bugs de l'équipe d'ingénierie.

Attaque

Si vous souhaitez nous signaler un bug ou demander une fonctionnalité, mais que vous manquez de temps, vous pouvez nous envoyer un tweet à @ChromeDevTools. Nous y répondons et envoyons des annonces régulièrement depuis le compte.

Twitter

Pour obtenir de l'aide sur l'utilisation des outils de développement, Stack Overflow est le meilleur canal.

Stack Overflow

Pour signaler des bugs ou demander des fonctionnalités dans la documentation sur les outils de développement, ouvrez un problème GitHub.

Problèmes liés à Docs

Les outils de développement disposent également d'un canal Slack, mais l'équipe ne le surveille pas de manière cohérente.

Slack