web-dev-qa-db-fra.com

Comment puis-je trouver ce que Javascript fonctionne sur certains événements?

Je vais choisir Chrome pour cet exemple, mais je suis ouvert à une solution à partir de n'importe quel navigateur.

Cas d'utilisation: J'ai un bouton de mise à jour sur mon site Web qui est utilisé pour mettre à jour les quantités d'articles dans un panier. Je voudrais permettre à un utilisateur d'entrer un 0 et de cliquer sur Mettre à jour afin de supprimer l'élément. Le problème est qu'il y a un écouteur dans certaines fonctions js qui nie la possibilité d'entrer un 0 et de cliquer sur mise à jour (après avoir cliqué sur mettre à jour, l'ancienne quantité reste).

Ma question est, quel outil de développement puis-je utiliser pour trouver la fonction js en cours d'exécution pendant cet événement? Je ne pense pas que l'inspecteur de Chrome fasse cela, et je ne suis pas très familier avec Firebug, mais je n'ai pas pu trouver la fonctionnalité non plus.

Je pense que je devrais être en mesure d'inspecter les tirs js comme je le fais pour les styles css. Quelqu'un connaît-il un outil que je peux utiliser?

javascriptgoogle-chromefirefoxfirebugweb-inspector
25
jesuis

J'ai dû déboguer certains problèmes Javascript particulièrement méchants à cause de mon travail. Connaître toute la profondeur des outils de développement comme Chrome est certainement utile. Il faut indéniablement un peu de créativité pour trouver des endroits qui pourraient être à l'origine du problème, mais quelques conseils:

Retrouver les auditeurs d'événements

Sous la vue Éléments de Chrome, essayez d'inspecter un élément (clic droit, inspecter); puis, sur le côté droit de la vue développeur, faites défiler vers le bas jusqu'à Écouteurs d'événements. Ici, vous pouvez voir quels fichiers de code ont connecté un événement. Souvent, cela vous dirigera simplement vers un cadre intermédiaire à partir du code vraiment sournois que vous recherchez, mais parfois cela vous dirigera dans la bonne direction.

Intercepter une modification DOM

Beaucoup des effets indésirables que je vois sont dus à quelque chose qui change une valeur ou un attribut sur la page que je ne veux pas. Chaque fois que cela se produit, vous pouvez cliquer avec le bouton droit sur l'élément (sous la vue Éléments) et dire "Arrêter ..." et le scénario spécifique que vous recherchez. Lorsque Chrome atteint alors un point d'arrêt, vous pouvez alors regarder vers le bas dans la trace de pile jusqu'à ce que vous trouviez quelque chose de reconnaissable qui ne devrait pas être appelé.

EDIT après avoir atteint dix votes!

Intercepter une modification d'objet JS

Si le changement qui vous intéresse est interne au code, pas dans l'interface utilisateur, les choses deviennent plus délicates. Ce que signifie ce scénario, c'est que vous savez quelque part dans le code, quelque chose d'incroyablement ennuyeux comme le suivant se produit.

company.data.myObject.parameter = undefined;

Dans cette situation, vous savez que myObject est toujours le même objet, mais il est en cours de modification, peut-être involontairement. Pour cela, j'insère souvent le code suivant, parfois juste via la console développeur à un moment donné avant que ladite modification ne se produise.

Object.defineProperty(company.data.myObject, 'parameter', {
  set: (val) => {
    debugger;
  }
});

Cela inclut une fonction de flèche - vous ne l'utilisez que pour le débogage et Chrome le prend en charge, il pourrait donc aussi bien enregistrer les frappes. Ce que cela fera, c'est geler votre débogueur dès qu'une ligne de code tente de modifier la propriété "myObject" de parameter. Vous n'avez pas nécessairement besoin d'avoir une référence globale à la variable si vous pouvez exécuter cette ligne de code à partir d'un point d'arrêt précédent qui aura la donnée objet dans les habitants.

Sinon, si je ne commence que par le code HTML et que je veux le lier au code Javascript, je vais souvent chercher des fonctionnalités d'identification comme des éléments "id" et rechercher tous les fichiers JS dans mon répertoire de développement pour il. Normalement, je peux l'atteindre assez rapidement.

37
Katana314
  1. Ouvrez votre page dans Firefox avec Firebug activé.
  2. Accédez à l'onglet console dans Firebug et cliquez sur le profilage
  3. entrez 0 dans la zone de texte et cliquez sur le bouton.
  4. Arrêtez le profilage.
  5. Vous pourrez voir toutes les fonctions javascript qui ont été exécutées en raison de vos actions. Vous pouvez les visualiser un par un pour déterminer quelle méthode a causé le mal.
6
Devendra Bhatte

Allez à votre code. Si vous utilisez jquery, il y aura une fonction qui sera appelée avec la classe ou l'id de ce bouton de mise à jour des particules. OR si vous utilisez javascript, il y aura une fonction appelée à l'intérieur du

ce sont deux façons de rechercher la fonction qui est appelée, il n'y a pas de logiciel que je connaisse

1
Ideal Bakija

Téléchargez Firebug pour Mozilla Firefox, ouvrez-le, cliquez sur Net et actualisez votre site Web. Ensuite, vous pouvez voir quels fichiers sont chargés sur la page.

Si vous voulez vérifier les erreurs et ce qui ne va pas avec une explication, cliquez sur console et actualisez à nouveau la page. Vous verrez les erreurs et sur quelle ligne ça va mal.

Remarque: dans votre console, vous pouvez dire hold ou stop, afin que le fichier js cesse de se charger. Et vous pouvez modifier le script en cliquant sur script dans Firebug. Le débogage est simple, comme il est dit sur leur page officielle https://getfirebug.com/javascript

0
Johan