サーバーサイドJavaScript CGJSフレームワーク  デバッガー操作

このページではBack EndのJavaScriptをデバッグする時の、デバッグログの表示方法、デバッガーでのBreak Point設定や、
変数/式の参照・設定方法等、GUIデバッガーの操作について説明します。

１．Break Pointの設定

Break Pointは、左側の下図で示す赤枠内でマウス左ボタンを押下すると該当行に設定されます。
Break Pointの行は行番号の背景色が緑で表示され、処理がBreakすると右側の下図のように、ソース行の背景色が
黄色で表示され、実行予定の部分が薄いピンクで表示されます。
Break Pointが設定されている行番号でマウス左ボタンを押下するとBreak Pointが解除されます。
Break Pointの設定
実行がBreakする処理は、以下に示すように関数・式の実行、もしくは代入処理です。
 x++  x--  ++x  --x  =  +=  -=  *=  /=
 %=   &=   |=   ^=   (x=y)?1:2 var  let  const
 if   while do   for  try throw    break
 continue   return    func(a,b)    select
 selHash    selToFront  selHashToFront  exec openDb
 closeDb    sendToFront  switch   Number   String
 eval     selInto    regexp   decodeURI  encodeURI
 decodeURIComponent  encodeURIComponent   parseFloat
 parseInt   new  Exception  Date    Integer
 Float    Error  Array Hash    alertToFront
逆に、実行がBreakしない処理は、以下に示すように単純な演算処理、区切り(, ;)、まとめの( )や{ }の部分です。
if がない条件部だけの行、例えば"(a == b)"だけの行にBreak Pointを設定してもBreakは発生しません。
Break Pointを設定する時は注意してください。
 ;  !  &&  ||  ==  === !=  !== >=  >  <=
 <  +  -  *  /  %  **  &  |  ^  ~
 <<  >>  >>> [idx]   .  ,  {  }  (  )
 typeof  instanceof
■ 条件付きBreak Point
処理の途中で条件を満たす場合のみBreakする設定をします。
行番号部分でCtrlキーを押下したままマウス左ボタンを押下すると、下図右側のウインドウがポップアップします。
Breakする条件を入力してOKボタンを押下すれば、条件付きBreak Pointが設定され、行番号の背景色が青で表示されます。
Breakする条件テキストに入力する式は、if文の括弧に囲まれた条件式の部分です。
条件付きBreak Pointの行で同じ操作をすると、右側の下図のように、削除ボタンが表示され、削除ボタン押下で解除されます。

Break Pointの設定
複数のファイルに多数のBreak Pointを設定したのをすべて解除する場合、設定ボタンを押下して、環境設定画面を表示し、
開いているファイル・グリッドの全行を指定し、Break削除ボタンを押下します。

２．関数Traceの設定

関数Traceは、左側の下図で示す青枠内でマウス右ボタンを押下すると関数名確認の下図右側ウインドウがポップアップします。
初期に表示される関数名は、マウス右ボタン押下が関数の定義行、もしくは、関数の処理{　}内である関数です。
必要ならば別の関数名をテキストに入力し、OKボタンを押下すると該当の関数にTraceが設定されます。
Traceの関数定義行は行番号が赤枠で囲まれて表示され、関数が実行されると引数、返値がログテキスト領域に表示されます。
Traceが設定された関数でTrace設定操作を行うと、下図の削除ボタンがあるウインドウがポップアップし、削除ボタンを
押下するとTraceが解除されます。設定ボタン押下後の環境設定画面で操作すれば、モジュール単位で全Traceを削除できます。
Webアプリの構成

３．変数、式の評価(クイックウオッチ)

Back EndのJavaScriptがBreakした状態で、変数に設定されている値や、式の評価結果を調べる時は、
下図のウオッチ機能を使用します。
値の参照
ウオッチ式のテキスト①に評価する変数/式を入力し、評価ボタン②を押下すると、値テキスト③に結果が表示されます。
追加ボタン④を押下するとウオッチ・グリッドに変数/式と値が表示され、STEP実行で値が変わります。
ウオッチ式が評価される環境は、下段の呼び出し履歴グリッドで選択されている関数内の該当行です。
呼び出し元の変数/式を評価したい場合は、まず、呼び出し履歴グリッドで関数を選択して、評価ボタンを押下します。
ウオッチ・グリッドの変数/式を削除する場合は、行を指定して削除ボタン⑤を押下します。
ウオッチ・グリッドの変数/式を全て削除する場合は、全削除ボタン⑥を押下します。

４．変数に値の設定

Back EndのJavaScriptがBreakした状態で、変数に値を設定する時は、下図のウオッチ機能を使用します。
通常ではこの機能は使用しませんが、単体テストなどで、例外処理のメッセージを確認する場合に、
処理の途中で変数の値を変更して例外を発生させる場合に使用します。
値の設定
ウオッチ式のテキスト①に値を設定する変数名を入力し、値テキスト②に値を入力し、設定ボタン③を押下します。
確認の評価する式が表示され、OKボタン押下で変数に値が設定されます。

５．デバッグログの使い方

CGJSでのWebアプリの開発で、Break Pointで処理を止めずに、変数の内容を調べたい場合がありますが、
その場合の設定・表示の例をいかに示します。
Webアプリの構成
■ トレースログの表示
ソーステキストの8行目関数に関数トレース①をしています。その場合のログはログテキストの①をマークした部分で、
関数をCALLした時の引数の内容表示、RETURNした時の返値を表示しています。
引数、RETURN値がJSON配列や連想配列の場合でも表示します。

■ エラーログの表示
ソーステキストの14行目にconsole.errorで変数の内容を表示しています。その場合のログはログテキストの②を
マークした部分で、変数名とその値のテンプレート文字列を表示しています。
テンプレート文字列の評価部分に式、JSON配列や連想配列を指定した場合でも表示します。

■ デバッグログの表示
ソーステキストの16行目にconsole.logで変数の内容を表示しています。その場合のログはログテキストの③を
マークした部分で、変数名とその値のテンプレート文字列を表示しています。
テンプレート文字列の評価部分に式、JSON配列や連想配列を指定した場合でも表示します。