表示テンプレートのデバッグ

表示テンプレートのデバッグ

原文の記事の投稿日: 2012 年 7 月 24 日 (火曜日)

カスタム表示テンプレートの使用に関する前回の投稿を公開した後すぐ、最初の質問として「どうやってデバッグするのか」というもっともな質問がありました。今回は、表示テンプレートをデバッグする方法をいくつか紹介します。

1. 表示テンプレートで、各自の JavaScript を最初の div タグの後ろに追加し、debugger; ステートメントを記述します。ここで、IE の [スクリプトのデバッグを使用しない] オプションの選択を解除してブラウザーを再起動する必要がある点に注意してください。この方法はとても便利です。Visual Studio で中断することができ、すべての変数およびクエリの値を取得できます。

2. 2 つ目の方法は、少し「ハード コーディング」に近くなります。このため、私はあまり気に入っていないのですが、十分に機能します。以下の手順を行います。

   1. F12 を押して、IE 開発者ウィンドウを開きます。
   2. [スクリプト] タブをクリックします。
   3. スクリプト ファイルのリストのドロップダウンで、clientrenderer.js を選択します。
   4. CoreRenderWorker 関数を探します。通常は、スクリプトの最後から 2 行目まで下がって、END キーを押すと見つかります。
   5. この関数内の最初の行のコードをクリックして強調表示します。ここでは、"var a;" のようになっています。
   6. それを右クリックして、メニューから [ブレークポイントの挿入] をクリックします。
   7. [デバッグ開始] ボタンをクリックします。
   8. ブラウザーに戻って、クエリを実行します。
   9. デバッガーで中断されたら、ウィンドウの右側の [ローカル](Locals) タブをクリックします。"c" の横にあるプラス記号をクリックしてそれを展開します。
   10. ここですべての変数を確認することができます。しかし通常は、デバッガーで [続行] ボタンを押して続行することが多いでしょう。新しいコードが読み込まれるたびに、"c" 変数は折りたたまれます。このため、格納されているデータを確認するためにはそのたびに戻ってこれを展開する必要があります。たいていは、[続行] ボタンを 3 回から 5 回クリックすると、"CurrentItem" というオブジェクトが "c" 変数の下に出現します。これは、単一の検索結果を表しており、要求したすべての管理対象プロパティの値を追跡することができます。これはとても便利で、Visual Studio を必要としません。

 

これはローカライズされたブログ投稿です。原文の記事は、「Debugging Display Templates」をご覧ください。