Tools/Debugger-API/Tutorial-Debugger-Statement

Tutoriel: Évaluer une expression lorsque l'expression debugger; est exécutée

Attention : Ce tutoriel ne fonctionne plus dans les versions actuelles de Firefox. Merci de préférer le plus récent tutoriel de point d'arrêt.

 

Cette page décrit comment il est possible d'essayer l'API Debugger vous même en utilisant l'Ardoise JavaScript de Firefox. Nous utilisons une API pour évaluer une expression dans la page lorsque celle-ci exécute une expression JavaScript debugger;.

  1. Visitez l'URL about:config, et passez la préférence devtools.chrome.enabled à true :

    Setting the devtools.chrome.enabled preference

    Configurer la préférence 'devtools.chrome.enabled'

  2. Sauvegarder le fichier HTML suivant sur votre ordinateur et l'ouvrir dans votre navigateur :

    <div onclick="var x = 'snoo'; debugger;">Click me!</div>
  3. Ouvrir l'Ardoise JavaScript (Maj+F4), puis sélectionner "Navigateur" dans le menu "Environnement". (Ce menu n'est disponible que si la préférence a été configurée comme expliqué ci-dessus).

    Selecting the 'browser' context in the Scratchpad

    Selectioner "Navigateur"

  4. Entrer le code ci-dessous dans l'Ardoise :

    // Définit 'Debugger' dans cette Ardoise;
    // Cela ne lance pas le débogage de quoi que ce soit.
    Components.utils.import("resource://gre/modules/jsdebugger.jsm");
    addDebuggerToGlobal(window);
    
    // Crée une instance 'Debugger'.
    var dbg = new Debugger;
    
    // Récupère la fenêtre de contenu de l'onglet ouvert pour le déboguer
    var w = gBrowser.selectedBrowser.contentWindow.wrappedJSObject;
    dbg.addDebuggee(w);
    
    // Lorsque la cible exécute une expression 'debugger, évalue
    // l'expression 'x' dans la pile de la frame et affiche sa valeur
    dbg.onDebuggerStatement = function (frame) {
        alert('hit debugger statement; x = ' + frame.eval('x').return);
    }
  5. Dans l'Ardoise, vérifier qu'aucun texte n'est sélectionné puis appuyer sur le bouton "Exécuter".

  6. Cliquer sur le texte "Click me!" dans la page. Cela lance la fonction onclick de l'élément div. Lorsque le contrôle arrive à l'expression debugger; le Debugger appelle la fonction de callback en lui passant une instance de Debugger.Frame. Le callback évalue alors l'expression x dans la stack frame, et affiche l'alerte :

    The Debugger callback displaying an alert
  7. Appuyer à nouveau sur "Exécuter dans l'Ardoise. Puis cliquer à nouveau sur "Click me!". Maintenant, deux alertes devraient apparaitre (un pour chaque instance de Debugger).

    Plusieur instances de Debugger peuvent observer la même cible, Exécuter à nouveau le code dans l'Ardoise crée une nouvelle instance de Debugger, celle-ci cible la même page, et ajoute un nouveau callbakc de l'expression debugger; En cliquant sur l'élément div, les deux instances ont été appelées. Cela démontre que n'importe quel nombre d'outils basés sur Debugger peuvent observer une même page web simultanément. Cependant, étant donné que l'ordre dans lequel les callback sont appelés n'est pas spécifié, ces outils ne devraient pas effectuer de modifications sur la cible.

  8. Fermer la page web et l'Ardoise.

    Étant donné que l'objet global de l'Ardoise ainsi que la fenêtre de la cible sont détruites, les instances Debugger seront nettoyées par le ramasse-miettes (garbage collector).  L'API du Debugger essaye d'interagir avec le ramasse-miettes de la manière la plus transparente possible. Par exemple si une instance Debugger.Object et sa cible ne sont pas atteignables, ils seront supprimés, même si l'instance Debugger elle continue d'exister.

Source Metadata

Generated from file:
 
js/src/doc/Debugger/Tutorial-Debugger-Statement.md
Watermark:
sha256:5ae195c25aaf83971bb7105eabaafd228cbf79ae0b1ee8653c8fd160d1396753
Changeset:
5572465c08a9+

Étiquettes et contributeurs liés au document

Contributeurs à cette page : wbamberg, maximelore
Dernière mise à jour par : wbamberg,