Si vous utilisez Chrome 111 ou une version ultérieure, vous avez peut-être déjà remarqué que nous avons modifié la conception de la barre latérale des points d'arrêt. Dans Chrome 113, la nouvelle barre latérale remplace complètement l'ancienne interface. Cette refonte visait à améliorer le workflow des points d'arrêt en:
Vous bénéficiez d'un meilleur aperçu de tous les points d'arrêt définis. Rendre les workflows utilisateur courants avec des points d'arrêt plus faciles d'accès et plus intuitifs Rendre visibles les fonctionnalités de point d'arrêt existantes
Dans cet article, nous partons du principe que vous maîtrisez déjà le débogage à l'aide de points d'arrêt. Si vous n'avez jamais utilisé de points d'arrêt auparavant, consultez cette présentation sur les points d'arrêt pour découvrir comment vous pouvez les utiliser pour déboguer votre code.
Voyons maintenant ce que cette refonte offre et comment utiliser la nouvelle barre latérale ! Notez que la refonte a pour but de rendre les fonctionnalités existantes plus intuitives et plus faciles d'accès, au lieu d'en ajouter de nouvelles.
Suspendre les exceptions pour déterminer 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 suspendre les exceptions pour arrêter l'exécution au moment où votre exception est générée. Cela peut vous aider à enquêter et à mieux comprendre les circonstances dans lesquelles votre code génère une erreur. Vous pouvez choisir de suspendre 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 pertinent
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. Pour ce faire, développez les groupes de points d'arrêt pertinents et réduisez les autres.
Gérez vos points d'arrêt: un clic pour accéder au code, supprimer ou activer/désactiver les 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 comment vous pouvez ...
Accédez à l'emplacement du point d'arrêt dans l'éditeur de code. Supprimez un ou tous les points d'arrêt d'un fichier. Activez ou désactivez un ou tous les points d'arrêt d'un fichier.
Et tout cela en un clic ! Bien entendu, 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
Voulez-vous 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 "Supprimer"
Pointez sur un point d'arrêt ou un groupe de points d'arrêt pour afficher un bouton de suppression qui supprime un ou tous les points d'arrêt d'un fichier lorsque l'utilisateur clique dessus.
Désactiver un seul point d'arrêt ou tous les points d'arrêt dans 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 dans 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.
Utilisez les caractéristiques de point d'arrêt moins connues: les points d'arrêt conditionnels et les points de journalisation.
Modifiez les conditions d'un point d'arrêt ou son journal 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, puis en cliquant sur le bouton Edit (Modifier) qui s'affiche. Une boîte de dialogue s'ouvre pour vous permettre de modifier le type de point d'arrêt et d'en afficher les détails.
Vous pouvez également sélectionner la ligne du point d'arrêt dans l'éditeur de code, puis appuyer sur Ctrl+Alt+b sous Linux et Commande+Alt+b sous 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 des points de journalisation en pointant sur le point d'arrêt dans la barre latérale:
Conclusion
L'objectif de la refonte de la barre latérale des points d'arrêt était de faciliter le débogage avec ces points. Plus important encore, notre objectif était de structurer les données, et de les rendre plus accessibles et plus faciles à comprendre. Nous espérons que ces améliorations vous aideront lors de votre prochaine session de débogage.
Si vous avez des suggestions d'améliorations, n'hésitez pas à nous signaler un bug.
Télécharger les canaux de prévisualisation
Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.
Contacter l'équipe des outils pour les développeurs Chrome
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de toute autre question concernant les outils de développement.
- Envoyez-nous une suggestion ou des commentaires via crbug.com.
- Signalez un problème dans les outils de développement via Plus d'options
> Aide > Signaler un problème dans les outils de développement dans les Outils de développement. - Envoyez un tweet à @ChromeDevTools.
- Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.