Tools/Debugger-API/Tutorial-Debugger-Statement

チュートリアル: 式を評価するデバッガの場合。ステートメントが実行される

注意: このチュートリアルは現在のバージョンのFirefoxでは動作しません。代わりに、更新された拡張ブレークポイントチュートリアルを試してみてください。

このページには、Firefox の Scratchpad を使用して自分で Debugger API を試す方法が示されています。JavaScript の debugger; ステートメントを実行するたびに、API を使用して Web ページの式を評価します。

  1. about:config という URL を参照し、devtools.chrome.enabled プリファレンスを true に設定します

    Setting the devtools.chrome.enabled preference

    'devtools.chrome.enabled' プリファレンスを設定します

  2. 次の HTML テキストをファイルに保存し、ブラウザでファイルにアクセスします

    <div onclick="var x = 'snoo'; debugger;">Click me!</div>
  3. 開発者の Scratchpad (メニューボタン > 開発者 > Scratchpad) を開き、「環境」メニューから「ブラウザ」を選択します。(このメニューは、上で説明したように環境設定を変更しない限り表示されません)

    Selecting the browser context in the Scratchpad

    Scratchpad で 'ブラウザ' コンテキストを選択する

  4. Scratchpad に次のコードを入力します

    // This simply defines 'Debugger' in this Scratchpad;
    // it doesn't actually start debugging anything.
    Components.utils.import("resource://gre/modules/jsdebugger.jsm");
    addDebuggerToGlobal(window);
    
    // Create a 'Debugger' instance.
    var dbg = new Debugger;
    
    // Get the current tab's content window, and make it a debuggee.
    var w = gBrowser.selectedBrowser.contentWindow.wrappedJSObject;
    dbg.addDebuggee(w);
    
    // When the debuggee executes a 'debugger' statement, evaluate
    // the expression 'x' in that stack frame, and show its value.
    dbg.onDebuggerStatement = function (frame) {
        alert('hit debugger statement; x = ' + frame.eval('x').return);
    }
  5. Scratchpad で、テキストが選択されていないことを確認し、「実行」ボタンを押します

  6. 次に、Web ページで「Click me!」というテキストをクリックします。div 要素の onclick ハンドラが実行されます。コントロールが debugger; ステートメントに達すると、DebuggerDebugger.Frame インスタンスを渡してコールバック関数を呼び出します。コールバック関数は、指定されたスタックフレーム内の式 x を評価し、アラートを表示します。

    The Debugger callback displaying an alert

    アラートを表示する Debugger コールバック

  7. Scratchpad の "Run" をもう一度押してください。ここで、「Click me!」テキストをクリックすると、各 Debugger インスタンスに対して2つのアラートが表示されます

    複数の Debugger インスタンスで同じデバッグ対象を監視できます。Scratchpad でコードを再実行すると、新しい Debugger インスタンスが作成され、デバッグ対象と同じ Web ページが追加された後、新しい debugger; が登録されました。ステートメントハンドラを新しいインスタンスに置き換えます。div 要素をクリックすると、両方の要素が実行されました。これは、ハンドラが実行される順序が指定されていないため、デバッガの動作を監視するだけで、デバッグ対象の動作には影響を及ぼさないはずですが、任意の数の Debugger ベースのツールが単一の Web ページを同時に観察できる方法を示しています。

  8. Web ページと Scratchpad を閉じます

    Scratchpad のグローバルオブジェクトとデバッグウィンドウの両方が消えたので、Debugger インスタンスはガベージコレクションされます。なぜなら、それらはもはや Firefox の動作に目に見える影響を与えないからです。Debugger API はガベージコレクションを可能な限り透過的に処理しようとします。たとえば、Debugger.Object インスタンスとその参照先の両方に到達できない場合は、そのシャドーが属していた Debugger インスタンスが引き続き存在している間も、それらは両方とも収集されます。

ソースのメタデータ

生成元ファイル:
 
js/src/doc/Debugger/Tutorial-Debugger-Statement.md
透かし:
sha256:5ae195c25aaf83971bb7105eabaafd228cbf79ae0b1ee8653c8fd160d1396753
変更セット:
5572465c08a9+

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,