Comment tracer des événements JavaScript comme onclick onblur?

StackOverflow https://stackoverflow.com/questions/91367

  •  01-07-2019
  •  | 
  •  

Question

Existe-t-il un moyen de déboguer ou de suivre chaque événement JavaScript dans Internet & nbsp; Explorer & nbsp; 7?

J'ai un bogue qui empêche le défilement après la sélection de texte et je ne sais pas quel événement ou action crée le bogue. Je veux vraiment voir quels événements sont déclenchés lorsque je déplace la souris par exemple.

C’est trop de travail de rediffuser la source et j’espérais un peu comme un renifleur qui me montre tous les événements déclenchés.

Était-ce utile?

La solution

Borkdude a déclaré:

  

Vous pouvez essayer Visual Studio 2008 et sa fonctionnalité pour déboguer le code JavaScript.

Je me suis occupé de la gestion des événements à plusieurs reprises et à mon avis, bien que les débogueurs pas à pas classiques soient utiles pour suivre les longues exécutions de code, ils ne sont pas efficaces pour suivre les événements. Imaginez que vous écoutiez les événements de déplacement de la souris et que vous vous connectiez à une autre application pour chaque événement ... Dans ce cas, je vous recommande fortement de vous connecter.

  

Si le problème n'est pas spécifique à Internet & Explorer mais se produit également dans Firefox, un autre bon moyen de déboguer le code JavaScript est Firefox et le module complémentaire Firebug avec un débogueur JavaScript.

Il existe également Firebug Lite pour Internet Explorer. Je n'ai pas eu l'occasion de l'utiliser, mais cela existe. :-) L’inconvénient est qu’il ne s’agit pas d’un débogueur à part entière, mais d’un objet window.console, ce qui est exactement ce dont vous avez besoin.

Autres conseils

Parcourez tous les éléments de la page ayant une fonction onXYZ définie, puis ajoutez-leur la trace: 

var allElements = document.all; // Is this right? Anyway, you get the idea.

for (var i in allElements) {
    if (typeof allElements[i].onblur == "function") {
        var oldFunc = allElements[i].onblur;
        allElements[i].onblur = function() {
             alert("onblur called");
             oldFunc();
        };
    }
}

Vous pouvez essayer Visual Studio 2008 et sa fonctionnalité pour déboguer le code JavaScript.

Si le problème n'est pas spécifique à Internet & Explorer mais se produit également dans Firefox, un autre bon moyen de déboguer le code JavaScript est Firefox et le Add-on Firebug qui comporte un débogueur JavaScript. Ensuite, vous pouvez également insérer des instructions console.log dans le code JavaScript dont vous pouvez voir le résultat dans la Console Window dans Firebug, au lieu d'utiliser des alertes qui gâchent parfois la chaîne d'événements.

@ [pseudo] - Je suis presque certain que document.all est une extension spécifique à Internet & Explorer.

Vous devez attacher un gestionnaire d’événements. Il n’ya aucun moyen de simplement "regarder" les événements. Un framework tel que jQuery de la bibliothèque Microsoft Ajax vous donnera facilement des méthodes pour ajouter les gestionnaires d’événements. jQuery est sympa à cause de son framework de sélecteur.

Ensuite, j'utilise Firebug (extension Firefox) et mets un point d'arrêt. Je trouve que Firebug est beaucoup plus facile à installer et à démonter que Visual & Studio & 2008 & nbsp; 2008.

C’est simple, mais vous pouvez insérer des alertes ou documenter des appels lorsque vous déclenchez quelque chose.

La méthode la plus simple consiste à configurer des alertes pour divers événements, telles que: 

element.onclick = function () { alert('Click event'); }

Sinon, vous avez une option moins intrusive consistant à insérer vos alertes quelque part dans le dom.

Cependant, envisagez sérieusement d'utiliser une bibliothèque telle que jQuery pour implémenter vos fonctionnalités. Bon nombre des problèmes inter-navigateurs sont des problèmes résolus et vous n'avez pas besoin de les résoudre à nouveau. Je ne suis pas certain de la fonctionnalité que vous essayez d’obtenir, mais il existe probablement beaucoup de possibilités de défilement et de sélection de plug-ins pour jQuery.

Je ne suis pas sûr du code exact (cela fait longtemps que je n’ai pas écrit de code JavaScript complexe), mais vous pouvez énumérer tous les contrôles du formulaire et attacher un événement produisant quelque chose lorsque cet événement est déclenché.

Vous pouvez même utiliser des fonctions anonymes pour encapsuler les informations nécessaires à l'identification de l'événement déclenchant.

J'aime créer une fonction de liaison en JavaScript (comme ce que vous pouvez trouver dans Prototype ) spécifiquement pour les événements, afin qu’il transmette le résultat "événement". objet le long de la fonction liée. Maintenant, si vous deviez le faire, vous pourriez simplement lancer un appel de trace qui sera appelé pour chaque gestionnaire qui l’utilise. Et puis retirez-le quand ce n'est pas nécessaire. Une place. Facile.

Cependant, quelle que soit la manière dont vous appelez l'instruction de trace, vous souhaitez toujours la voir. La meilleure stratégie consiste à avoir un volet ou une fenêtre distinct gérant les appels de trace. La boîte à outils Dojo possède une console intégrée qui s'exécute dans Internet Explorer, et d'autres outils similaires les choses là-bas. La méthode classique consiste à créer une nouvelle fenêtre et à lui document.write .

  • Je recommande d'attacher une date-heure à chaque trace. M'a aidé considérablement dans le passé.
  • Le débogage et les alertes ne vous seront généralement pas utiles, car ils interrompront le flux normal des événements.

Matt Berseth a peut-être le genre de chose que vous recherchez dans Débogage d'applications ASP.NET AJAX avec le contrôle AjaxControlToolkit de Trace Console .

Il est basé sur l’enregistrement YUI de Yahoo, YUI 2: enregistreur .

.

Ma suggestion est d'utiliser FireFox avec FireBug et d'utiliser les objets Debug / Trace intégrés. Ils sont un charme.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top