Si vous utilisez Chrome 111 ou une version ultérieure, vous avez peut-être déjà remarqué que nous avons modifié la conception de notre barre latérale des points d'arrêt. Avec Chrome 113, la nouvelle barre latérale remplace entièrement l'ancienne conception. Notre objectif était d'améliorer le workflow des points d'arrêt en :
offrant une meilleure vue d'ensemble de tous les points d'arrêt définis ; rendant les workflows utilisateur courants avec des points d'arrêt plus faciles d'accès et plus intuitifs ; rendant visibles les fonctionnalités existantes intéressantes des points d'arrêt.
Cet article part du principe que vous savez déjà comment déboguer à l'aide de points d'arrêt. Si vous n'avez jamais utilisé de points d'arrêt, consultez cette présentation des points d'arrêt et découvrez comment les utiliser pour déboguer votre code.
Découvrons maintenant ce que la nouvelle conception offre et comment utiliser la nouvelle barre latérale. Notez que la nouvelle conception vise à rendre les fonctionnalités existantes plus intuitives et plus faciles d'accès, plutôt qu'à en ajouter de nouvelles.
Mettre en pause les exceptions pour comprendre pourquoi votre code génère une erreur
Votre code génère-t-il une exception ? Ne vous inquiétez pas. Les outils pour les développeurs Chrome vous permettent de mettre en pause les exceptions pour arrêter l'exécution au point où votre exception est générée. Cela peut vous aider à examiner et à mieux comprendre les circonstances dans lesquelles votre code génère une erreur. Vous pouvez choisir de mettre en pause les exceptions interceptées, les exceptions non interceptées ou les deux en cochant les cases correspondantes dans la barre latérale.
Gérer vos points d'arrêt : développez les groupes de points d'arrêt pertinents et réduisez les autres pour vous concentrer sur ce qui est important
Les points d'arrêt peuvent être répartis sur plusieurs fichiers. La barre latérale des points d'arrêt regroupe les points d'arrêt en fonction du fichier auquel ils appartiennent. Concentrez-vous uniquement sur ceux qui sont importants pour votre session de débogage actuelle en développant les groupes de points d'arrêt pertinents et en réduisant les autres.
Gérer vos points d'arrêt : un clic pour accéder au code, supprimer ou activer/désactiver des points d'arrêt
La barre latérale des points d'arrêt vous permet d'effectuer des tâches courantes en un seul clic. Voici un aperçu de ce que vous pouvez faire :
Accéder à l'emplacement du point d'arrêt dans l'éditeur de code. Supprimer un point d'arrêt ou tous les points d'arrêt d'un fichier. Activer ou désactiver un point d'arrêt ou tous les points d'arrêt d'un fichier.
Et tout cela en un seul clic. Bien sûr, ces options sont également disponibles dans le menu contextuel :
Accéder à l'emplacement du point d'arrêt en cliquant sur l'extrait de code du point d'arrêt
Vous souhaitez vérifier où vous avez défini votre point d'arrêt dans le code et analyser le code environnant ? Il vous suffit de cliquer sur l'extrait de code d'un point d'arrêt dans la barre latérale pour ouvrir l'emplacement du code dans l'éditeur de code.
Supprimer un seul point d'arrêt ou tous les points d'arrêt d'un fichier en cliquant sur le bouton de suppression
Pointez sur un point d'arrêt ou un groupe de points d'arrêt pour afficher un bouton de suppression qui supprime un seul point d'arrêt ou tous les points d'arrêt d'un fichier en un seul clic.
Désactiver un seul point d'arrêt ou tous les points d'arrêt d'un fichier
Cochez ou décochez la case à côté d'un point d'arrêt pour l'activer ou le désactiver.
Pour activer ou désactiver tous les points d'arrêt d'un fichier, pointez sur le groupe de points d'arrêt, puis cochez ou décochez la case qui s'affiche à côté du nom du fichier.
Utiliser ces fonctionnalités moins connues des points d'arrêt : points d'arrêt conditionnels et points de journalisation
Modifier les conditions des points d'arrêt ou modifier le journal de votre point de journalisation en modifiant un point d'arrêt
Modifiez une condition de point d'arrêt ou un journal en pointant sur un point d'arrêt et en cliquant sur le bouton Modifier qui s'affiche. Une boîte de dialogue s'ouvre pour modifier le type de point d'arrêt et les détails de votre point d'arrêt.
Vous pouvez également sélectionner la ligne du point d'arrêt dans l'éditeur de code et appuyer sur Control+Alt+b sous Linux et sur Command+Alt+b sur Mac pour ouvrir la boîte de dialogue de modification du point d'arrêt.
Vous pouvez également vérifier rapidement votre condition ou votre journal de point de journalisation en pointant sur le point d'arrêt dans la barre latérale :
Conclusion
Notre objectif avec la nouvelle conception de la barre latérale des points d'arrêt était de faciliter le débogage avec des points d'arrêt. Plus important encore, nous avons cherché à rendre les choses plus structurées, plus faciles d'accès et plus compréhensibles. Nous espérons que ces améliorations vous aideront lors de votre prochaine session de débogage.
Si vous avez des suggestions d'amélioration, faites-le nous savoir en signalant un bug.
Télécharger les canaux de prévisualisation
Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités des outils pour les développeurs, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre sujet lié aux Outils de développement.
- Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
- Signalez un problème dans les Outils de développement en sélectionnant Plus d'options > Aide > Signaler un problème dans les Outils de développement}.
- Envoyez un tweet à @ChromeDevTools.
- Laissez des commentaires sur les vidéos YouTube Nouveautés des outils de développement ou Conseils sur les outils de développement.