Débugger du JS

Bonjour !

Je travaille actuellement avec du JS pour une interface web et suis sous Firefox. Seulement, leur interface de développement intégrée "Developer Toolbar" ne semble pas très performante pour le débuggage : j'ai passé un temps fou à corriger des bugs parce qu'ils n'étaient pas signalés dans la console. Pourtant, il s'agissait d'erreurs évidentes du genre appel à une méthode d'un objet litéral n'existant pas.

Du coup, je me demandais quel outil je pourrais employer pour débugger mon code JS. Firebug est-il toujours aussi prisé (même si incompatible avec ma version de FF) ?

Merci. =)

Je ne connais pas Firebug, par contre si tu es sous Windows IE (oui IE) a un très bon debugger JS. Si tu es sous Linux/OS X essaie Firebug, mais je ne te garantis rien.

En espérant t'avoir aider !

Je suis sous Linux. =)

Mais vu que Firebug n'est pas compatible avec ma version de FF, la 26.0, ça règle le problème.

Sinon il me semble que Mozilla a sortit une version spécial devs de FF, tu peut regarder ça.

Salut !

J'ose te demander pourquoi tu es "limité" à une version de Firefox qui est apparemment 8 avant celle qui est actuellement distribuée (34.0.5 pour Linux au moment d'écrire ce message) ? Peut-être qu'une mise à jour pourrait t'aider ?
La console incorporée permet de filtrer par différents niveaux de logging, et même de désactiver les messages JavaScript. Regarde si ce n'est pas par hasard le cas ?
Sinon, tu pourrais probablement retrouver des versions de Firebug compatibles avec ta version de Firefox. Apparemment, la dernière version stable compatible avec Firefox 26 est la 1.12.8.

Je suis assez surpris de ton problème, il est fort probable qu'il s'agisse d'un problème de réglage des filtres comme l'indique Ymox.

Sinon Firefox 26 intégre aussi un developer tools si tu rencontres un problème avec Firebug c'est une alternative possible.

• Developer Tools

@Ymox : FF ne demandait pas de MAJ donc je n'ai rien fait. Mais je vais régler ce problème. Les warnings JS n'étaient pas affichés, peut-être le problème venait-il de là.

J'ai téléchargé la version Developer de FF. Je vais voir ce que ça me donne.

Merci !

C'est très étrange…

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

(function() {
    /*
    * Autobahn
    */
    var connection = new autobahn.Connection({
        url: Fct.getWsURI(), 
        realm: REALM
    });

    connection.onopen = function(session) {
        UI.success(SUCCESSES.connectionEstablished);

        WAMP.init(session);
        WAMP.getData(function() {
            WAMP.subscribe(subscribers);

            domEvents();
            svgEvents();
        });
    };

    connection.onclose = function(reason, details) {
        UI.error(ERRORS.connectionClosed + reason);

        return false; // Not to try to reconnect
    };

    connection.open();

    /*
    / DOM
    */
    function domEvents() {
        console.log("domEvents called."); // Affiché

        var el = null;
        el.addEventListener("change", function(){}, false); // Aucune erreur signalée...

        console.log("blabla"); // Non affiché
    }

    /*
    / Subscribers
    */
    var subscribers = {
        data: function(data) {
            UI.hide(HTML.dataLoadingDiv);
            UI.show(HTML.mainDiv);

            if(Map.map.json == null) Map.drawMap(data);
            else Map.update(data);
        }
    };
})();

Le code est là si ça vous intéresse.

Merci. =)

Tu veut qu'on fasse quoi avec le code ?

J'ai placé des commentaires lignes 34 à 39.

Y'a énormément de dépendances dans le code que tu donnes. UI, Map, Fct, WAMP autant de variables globales qu'on sait pas trop d'où elles viennent.

FF ne permet pas de mettre des points d'arrêt dans ton code et de l'exécuter pas à pas ? Le debug à coup de println c'est cool mais si tu veux avoir une meilleure vue de ce qui se passe sur cette ligne, va falloir y aller en debug.

C'est pour ça que je vous ai donné le lien en dessous.

Ce que je ne comprends pas, c'est pourquoi il ne lève pas d'erreur. Il cesse de s'exécuter mais n'affiche rien en console (les erreurs et les warnings sont activés, c'est certain).

Nop. Je vais essayer de reproduire l'erreur hors contexte.

Edit : je ne parviens pas à reproduire le bug hors contexte.

Par contre, une exécution pas-à-pas m'affiche bien une exception au niveau de el.addEventListener("change", function(){}, false);. Mais toujours rien dans la console…

Second edit : oh putain ! Ce serait bien Autobahn qui attraperait les exceptions !

Troisième edit : et bien oui, c'est ça. Avec AUTOBAHN_DEBUG = true; ça m'affiche bien les erreurs.

Firebug pour Firefox est, je trouve, mieux que l'outil fourni par défaut (plus ergonomique, pour un peu tout, IMO ).

Il existe la FF Dev Edition : https://www.mozilla.org/fr/firefox/developer/ . Ce qui est bien, c'est que ça peut être utilisé indépendant que ta version normale de FF. Pratique pour le stuffer avec plein de plugins inutiles sur ta version de normale.

Et ne pas sous-estimer les try catch pour le débug.

D'accord, merci pour le retour.