Techniques de débogage utilisées dans le navigateur

 (alan.norbauer.com)
5 points par GN⁺ 2023-11-12 | 1 commentaires | Partager sur WhatsApp

Astuces pour exploiter le débogueur du navigateur

  • Points d’arrêt conditionnels avancés

    • Étendre les capacités des points d’arrêt conditionnels en utilisant des expressions avec effets de bord
    • Les logpoints/tracepoints permettent d’écrire des logs dans la console sans interrompre l’exécution
    • Utiliser console.count pour compter le nombre d’exécutions
    • Les principaux navigateurs prennent en charge les logpoints/tracepoints (en date de mai 2020)

  • Exploiter la fenêtre de surveillance

    • Il est possible d’utiliser console.log dans la fenêtre de surveillance
    • Définir un point d’arrêt sur les modifications du DOM puis ajouter une expression de surveillance pour exécuter une expression au moment où le DOM change

  • Suivi de la pile d’appels

    • Suivre la pile d’appels des fonctions pour trouver les appels incohérents
    • Utiliser console.trace dans un point d’arrêt conditionnel pour vérifier la pile d’appels

  • Modifier le comportement du programme

    • Il est possible de modifier à la volée le comportement du programme directement dans le navigateur
    • Remplacer les paramètres de fonction pour ajuster le comportement

  • Profilage de performances simple

    • Utiliser l’API de timing de la console pour mesurer le temps d’exécution du code
    • Utiliser console.time('label') et console.timeEnd('label') pour mesurer le temps

  • Exploiter l’arité des fonctions

    • N’activer un point d’arrêt que lorsque l’appel se fait avec un nombre précis d’arguments
    • Utile pour repérer les écarts dans le nombre d’arguments lors des appels de fonction

  • Exploiter le temps

    • N’activer un point d’arrêt qu’après un certain délai suivant le chargement de la page
    • Ignorer les points d’arrêt pendant une durée donnée, puis ne les activer qu’ensuite

  • Exploiter le CSS

    • Activer un point d’arrêt en fonction de valeurs CSS calculées

  • Ne s’arrêter que sur les appels pairs

    • N’activer un point d’arrêt que lors des exécutions paires

  • S’arrêter par échantillonnage

    • N’activer un point d’arrêt que sur des échantillons aléatoires de l’exécution

  • Ne pas s’arrêter sur une ligne précise

    • Utiliser l’option "Never Pause Here" pour éviter toute interruption sur une ligne donnée

  • Attribution automatique d’ID d’instance

    • Attribuer automatiquement un ID unique à chaque instance de classe

  • Bascule par programmation

    • Utiliser un booléen global pour activer ou désactiver un point d’arrêt conditionnel par programmation

  • Appel de classe avec monitor()

    • Utiliser la commande monitor de Chrome pour suivre les appels de méthodes de classe

  • Appels de fonction et débogage

    • Appeler une fonction depuis la console après avoir invoqué debugger afin de la déboguer

  • Interrompre l’exécution lors d’un changement d’URL

    • Interrompre l’exécution avant un changement d’URL dans une application monopage

  • Débogage de lecture de propriété

    • Activer un point d’arrêt chaque fois qu’une propriété d’objet est lue

  • Utiliser copy()

    • Utiliser l’API de console copy() pour copier directement des informations vers le presse-papiers depuis le navigateur

  • Débogage HTML/CSS

    • Utiliser la console JS pour diagnostiquer des problèmes HTML/CSS
    • Inspecter le DOM lorsque JS est désactivé
    • Inspecter des éléments du DOM qui n’apparaissent que sous certaines conditions
    • Enregistrer des instantanés du DOM
    • Surveiller l’élément ayant le focus
    • Trouver les éléments en gras
    • Référencer l’élément actuellement sélectionné
    • Surveiller les événements

L’avis de GN⁺

Le point le plus important de cet article est qu’il présente un ensemble varié de techniques et d’astuces permettant aux développeurs d’utiliser le débogueur du navigateur pour déboguer leur code plus efficacement et résoudre les problèmes. Ces informations sont très utiles pour les développeurs logiciels et particulièrement intéressantes, car elles peuvent faire gagner du temps lorsqu’il s’agit de traquer des bugs complexes ou de résoudre des problèmes de performances.

À lire aussi

1 commentaires

 
GN⁺ 2023-11-12
Avis Hacker News

  • Évolution des outils de débogage intégrés au navigateur

    • Les outils de débogage intégrés aux navigateurs ont énormément progressé au cours des dernières décennies.
    • En tant que développeur JavaScript expérimenté, l’auteur remercie tous ceux qui ont rendu possible un débogage intuitif du code dans le navigateur.
    • Lorsqu’il fait du développement backend ou travaille dans d’autres langages, l’écosystème d’outils de débogage des navigateurs modernes lui manque.

  • Utilisation de l’instruction debugger

    • Utiliser l’instruction debugger; serait la seule façon de venir à bout de la pile récursive du débogueur de Chrome.
    • Mention d’un cas où des pièges de débogage ont été utilisés pour empêcher les visiteurs d’analyser une page d’accueil obfusquée.

  • Difficultés du débogage backend NodeJS

    • En tant que programmeur Python/Elixir, l’auteur utilise souvent pdb.set_trace()/IEx.pry().
    • Il a hérité d’un backend NodeJS complexe et a rencontré des difficultés en travaillant sans outil de débogage adapté.
    • Il a dû revenir au débogage avec console.log, ce qui lui a semblé très rudimentaire.
    • Il s’étonne de l’absence d’un REPL de débogage approprié et demande de l’aide.

  • Recommandation de Werkzeug

    • Recommandation d’utiliser Werkzeug pour le développement backend Django.
    • Cela permet d’utiliser un shell « PDB » dans le navigateur à chaque fois qu’une exception se produit.

  • Comment accéder aux variables locales d’une IIFE

    • Question sur la manière d’accéder aux variables locales d’une expression de fonction immédiatement invoquée (IIFE).
    • Recherche d’un moyen de le faire sans que le débogueur n’interrompe le code dans la portée de l’IIFE.

  • Méthode de débogage via les chaînes de l’interface utilisateur

    • Démarrer l’enregistrement des requêtes réseau dans le panneau Réseau.
    • Utiliser la recherche dans la barre latérale gauche pour saisir le code ou la chaîne d’interface utilisateur à trouver.
    • Trouver le résultat dans un fichier chunk JS bundle, l’ouvrir dans « Sources » et y placer une instruction debugger.

  • Débogage avec des points d’arrêt conditionnels

    • Question sur la manière de transformer {configOption: true} en {get configOption() { debugger; return true; }}.

  • Fonction spécifique à Chrome : « Monitor Events for Element »

    • Mention de la fonctionnalité « Monitor Events for Element » et du fait qu’elle est propre à Chrome.
    • Question sur l’existence d’une alternative pour Firefox.

  • Absence de l’API queryObjects

    • Mention de l’API queryObjects, qui renvoie la liste de tous les objets créés par un constructeur donné.
    • Par exemple, queryObjects(Function) permet d’obtenir la liste de toutes les fonctions présentes dans le tas mémoire.

  • Difficultés d’utilisation des variables observées

    • Difficulté à faire fonctionner les variables observées.
    • L’auteur suppose qu’il n’est possible d’observer que des variables globales, mais comme cela ne fonctionne pas comme prévu, il finit par remplir les logs avec les valeurs.
    • Avis selon lequel la console devrait proposer une interface de type Data.gui permettant d’inspecter et de tester les variables et les valeurs de configuration, avec un lien CodePen associé.