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. Avec Chrome 113, la nouvelle barre latérale remplace entièrement l'ancienne. Notre objectif était d'améliorer le workflow de création de points d'arrêt en:
Fournit une vue d'ensemble plus claire sur tous les points d'arrêt définis. rendre les workflows utilisateur courants avec des points d'arrêt plus accessibles et plus intuitifs ; Rendre visibles les fonctionnalités existantes de points d'arrêt intéressantes
Cet article part du principe que vous connaissez déjà le débogage à 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 pour découvrir comment les utiliser pour déboguer votre code.
Voyons maintenant ce que cette nouvelle interface propose et comment vous pouvez utiliser la nouvelle barre latérale. Notez que la refonte vise à rendre les fonctionnalités existantes plus intuitives et plus accessibles, plutôt qu'à en ajouter.
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 l'exécution en cas d'exception pour arrêter l'exécution au point où l'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 veille les exceptions détectées, les exceptions non détecté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 les éléments pertinents
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. Ne vous concentrez que sur ceux qui sont importants pour votre session de débogage 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 clic. Voici comment procéder :
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édez à 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.
Supprimez 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 permet de supprimer un ou tous les points d'arrêt d'un fichier en cliquant dessus.
Désactiver un ou tous les points d'arrêt d'un fichier
Cochez ou décochez la case à cocher à 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.
Utilisez ces fonctionnalités de point d'arrêt moins connues: les points d'arrêt conditionnels et les points de journalisation
Modifier les conditions de point d'arrêt ou le journal de votre point de journalisation en modifiant un point d'arrêt
Pour modifier une condition ou un journal de point d'arrêt, pointez sur un point d'arrêt, puis cliquez sur le bouton Modifier qui s'affiche. Une boîte de dialogue s'ouvre pour vous permettre de modifier le type et les détails du point d'arrêt.
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 Cmd+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 était de faciliter le débogage avec les points d'arrêt lors de la refonte de la barre latérale des points d'arrêt. Plus important encore, nous avons cherché à structurer les informations, et à les rendre plus accessibles et plus faciles à comprendre. Nous espérons que ces améliorations vous seront utiles lors de votre prochaine session de débogage.
Si vous avez des suggestions d'amélioration, n'hésitez pas à nous les envoyer en signalant un bug.
Télécharger les canaux de prévisualisation
Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plates-formes Web de pointe et vous aident à détecter 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 élément lié aux outils pour les développeurs.
- Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
- Signalez un problème dans les outils de développement à l'aide de l'icône Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
- Envoyez un tweet à @ChromeDevTools.
- Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.