チュートリアル: Debuggerを使用したブレークポイントの設定

チュートリアル: Debuggerを使用したブレークポイントの設定

このページには、Firefox の Scratchpad を使用して自分で Debugger API を試す方法が示されています。Debugger を使用して関数内にブレークポイントを設定し、ヒットするたびに式を評価します。

このチュートリアルは、Firefox 58 Betaと Nightly でテストされました。Firefox 57 では動作しません。

  1. Debugger API は特権を持つ JavaScript コードでしか使用できないため、ブラウザコンテンツツールボックスを使用して試用する必要があります。これを行うには、Firefox 開発者ツールを開き、ツールボックスの右上にあるオプションギアをクリックし、「ブラウザのクロムとアドオンのデバッグツールボックスを有効にする」と「リモートデバッグを有効にする」の両方がオンになっていることを確認します。これらはオプションパネルの右下にあります。それらを見るためにスクロールする必要があるかもしれません。チェックが済むと、デベロッパーツールを閉じることができます

  2. 次のテキストを HTML ファイルに保存します

    <div onclick="report('the best div');">Click me!</div>
    <div onclick="report('another great div');">Or me!</div>
    <script>
    function report(what) {
      console.log('clicked: ' + what);
    }
    </script>
  3. ブラウザーで HTML ファイルを開き、Firefox のメニューを開き、「Web Developer」を選択してから「Browser Content Toolbox」を選択して、ブラウザコンテンツツールボックスを開きます。その項目が「Web Developer」メニューに表示されない場合は、ステップ1で説明したように、両方のボックスにチェックを入れてブラウザコンテンツツールボックスを有効にしてください

  4. サンプルコードの長さは十分ですが、これを実行する最善の方法は、既定では有効になっていない Scratchpad パネルを使用することです。これを有効にするには、ブラウザコンテンツツールボックスの右上にあるオプションギアをクリックし、左側の「デフォルト開発者ツール」セクションの「スクラッチパッド」ボックスがオンになっていることを確認します。Scratchpad パネルは Console、Debugger、およびMemory パネルの横にツールボックスの上部に表示されます

  5. Scratchpad パネルをクリックし、次のコードを入力します:

    Components.utils.import("resource://gre/modules/jsdebugger.jsm");
    Components.utils.import("resource://gre/modules/Console.jsm");
    
    // This simply defines 'Debugger' in this Scratchpad;
    // it doesn't actually start debugging anything.
    addDebuggerToGlobal(this);
    
    // Create a 'Debugger' instance.
    var dbg = new Debugger;
    
    // Make the tab's top window a debuggee, and get a
    // Debugger.Object referring to the window.
    var windowDO = dbg.addDebuggee(tabs[0].content);
    
    // Get a Debugger.Object referring to the window's `report`
    // function.
    var reportDO = windowDO.getOwnPropertyDescriptor('report').value;
    
    // Set a breakpoint at the entry point of `report`.
    reportDO.script.setBreakpoint(0, {
        hit: function (frame) {
            console.log('hit breakpoint in ' + frame.callee.name);
            console.log('what = ' + frame.eval('what').return);
        }
    });
    
    console.log('Finished setting breakpoint!');
  6. Scratchpad で、テキストが選択されていないことを確認し、「実行」ボタンを押します。

    次に、Webページで「Click me!」というテキストをクリックします。div 要素の onclick ハンドラが実行されます。コントロールが report 関数の開始に達すると、Debugger はブレークポイントハンドラの hit メソッドを呼び出し、Debugger.Frame インスタンスを渡します。hit メソッドは、ブレークポイントのヒットをブラウザのコンテンツツールボックスのコンソールに記録します。次に、与えられたスタックフレーム内の何かの式を評価し、その結果を記録します。ツールボックスのコンソールは次のようになります。

    The breakpoint handler’s console output

    “Or me!” というテキストをクリックして、別のハンドラから呼び出された report を表示することもできます。

    Debuggerreport 関数を見つけることができない場合、またはコンソール出力が表示されない場合は、コンソールの式 tabs[0].content.document.location を評価して、tabs[0] が実際に訪れた HTML ファイルを参照していることを確認してください。file: URL にアクセスする複数のタブがある場合、それらはすべて1つのコンテンツプロセスを共有するため、デバッグ対象として配列の別の要素を使用する必要があります。

  7. Scratchpadの "Run" をもう一度押してください。ここで、「Click me!」をクリックすると、ブレークポイントヒットが各 Debugger インスタンスごとに2回記録されます

    複数の Debugger インスタンスで同じデバッグ対象を監視できます。Scratchpad でコードを再実行すると、新しい Debugger インスタンスが作成され、デバッグ対象と同じ Web ページが追加され、新しいブレークポイントが設定されます。div 要素をクリックすると、両方の Debugger のブレークポイントがヒットし、両方のハンドラが実行されます。

    これは、どのように多くの Debugger ベースのツールが単一の Web ページを同時に観察できるかを示しています。実際には、ブラウザコンテンツツールボックスのデバッガパネルを使用して、report 内に独自のブレークポイントを設定することができます。最初の2つのブレークポイントとともにトリガされます。しかし、複数のデバッガがデバッグを共有する場合、ハンドラの実行順序は指定されていないことに注意してください。複数のツールがデバッグ対象の動作に影響を与えようとすると、その組み合わせた動作が予測できなくなる可能性があります。

  8. Web ページとブラウザコンテンツツールボックスを閉じます

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

ソースのメタデータ

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

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

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