Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / tools / Reverse / TraceDebugger_Reverse.html
n-nitta on 24 Sep 2020 13 KB EC2インスタンス上で起動する説明を追加。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>トレースデバッガ (逆方向)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../prettify.css">
  7.         <script type="text/javascript">
  8.             function init(param) {
  9.                 var course = "A";
  10.                 if (param) {
  11.                     var c = getParam('course', param);
  12.                     if (c) course = c;
  13.                 }
  14.                 var next = document.getElementById("next");
  15.                 if (course == 'A') {
  16.                     next.href = "../../courseA/CourseStartA.html";
  17.                 } else if (course == 'B') {
  18.                     next.href = "../../courseB/CourseStartB.html";
  19.                 }
  20.             }
  21.  
  22.             function getParam(name, url) {
  23.                 name = name.replace(/[\[\]]/g, "\\$&");
  24.                 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
  25.                     results = regex.exec(url);
  26.                 if (!results) return null;
  27.                 if (!results[2]) return '';
  28.                 return decodeURIComponent(results[2].replace(/\+/g, " "));
  29.             }
  30.         </script>
  31.     </head>
  32.     <body onLoad="init(location.search)">
  33.         <h1>トレースデバッガ (逆方向)</h1>
  34.  
  35.         <hr>
  36.         <h2>説明</h2>
  37.         <p>
  38.             このデバッガでは, プログラムの実行時情報が記録されたファイルであるトレースファイルを読み込み, その読み込んだトレースを元にデバッグ実行を行うができます.<br>
  39.             こちらは, 先ほど見ていただいた順方向のトレースデバッガをベースに, さらに以下の機能を拡張したものになっています.<br>
  40.             <ul>
  41.                 <li>ステップ系の実行(ステップオーバー、ステップイン、ステップリターン)を逆方向に行うステップバック系の機能</li>
  42.                 <li>現在の実行時点を登録し, 任意のタイミングで登録した実行時点に移ることができる機能</li>
  43.                 <li>フィールドが参照しているオブジェクトやコレクションから取得してきたオブジェクトに対して, そのオブジェクトが実際に代入または追加された時点まで遡る機能</li>
  44.                 <li>プログラム中でオブジェクトAがオブジェクトBを参照する構造が作られた際に, それらのオブジェクトがどのように接近してきたのかの過程を抽出する機能</li>
  45.             </ul>
  46.         </p>
  47.         <hr>
  48.         <p>
  49.             以降の操作はEC2インスタンスにログインし，Eclipseを起動した上で行ってください．
  50.             EC2インスタンスへのログイン方法については<a id="ec2" href="../../ec2/ConnectToEC2.html" target="_blank">こちら</a>です．
  51.         </p>
  52.  
  53.         <p>
  54.             <p class = "explanation">
  55.                 メニューバーの Window → Perspective → Open Perspective → Other... → トレースデバッガ(逆方向) でトレースデバッガのパースペクティブを開いてください.<br>
  56.                 <div class = "image"><img src = "./images/OpenPerspective.png" class = "threeQuartersSize"></div>
  57.                 <div class = "image"><img src = "./images/OpenPerspective_Reverse_1.png" class = "halfSize"></div>
  58.             </p>
  59.             <p class = "explanation">
  60.                 実際に「トレースデバッガ(逆方向)」のパースペクティブを開くと下図のような状態になります.<br>
  61.                 このパースペクティブは初期状態では6つのビューで構成されており, 左上が呼び出しスタックビュー, その横が変数ビュー, 左下がエディタ,<br>
  62.                 右上がブレークポイントビュー, その下が現在の実行時点ビュー, さらに下が実行時点の登録ビューになっています.<br>
  63.                 <div class = "image"><img src = "./images/OpenPerspective_Reverse_2.png" class = "threeQuartersSize"></div>
  64.             </p>
  65.             <p class = "explanation">
  66.                 このデバッガには, 「再開」を逆向きに行う機能があります.<br>
  67.                 ブレークポイントビューの「逆向きに再開」アイコンをクリックすると, 有効なブレークポイントが入っている行のうち,<br>
  68.                 現在の実行時点よりも前の実行で最も近い行にまで実行が進み, そこで実行が再び一時停止します.<br>
  69.                 もし, 該当する行がなかった場合は, そのままデバッグ実行が終了します.<br>
  70.                 <div class = "image"><img src = "./images/BackResume_Reverse_1.png" class = "threeQuartersSize"></div>
  71.                 <div class = "image"><img src = "./images/BackResume_Reverse_2.png" class = "threeQuartersSize"></div>
  72.             </p>
  73.             <p class = "explanation">
  74.                 このデバッガには, 「ステップオーバー」を逆向きに行う機能があります.<br>
  75.                 ブレークポイントビューの「ステップバックオーバー」アイコンをクリックすると, 実行を行単位で戻ります.<br>
  76.                 この画像の場合では, ステップバックオーバーによって, D クラスの passB(B) メソッドの7行目から6行目へと実行が戻っています.<br>
  77.                 <div class = "image"><img src = "./images/StepBackOver_Reverse_1.png" class = "threeQuartersSize"></div>
  78.                 <div class = "image"><img src = "./images/StepBackOver_Reverse_2.png" class = "threeQuartersSize"></div>
  79.             </p>
  80.             <p class = "explanation">
  81.                 このデバッガには, 「ステップイン」を逆向きに行う機能があります.<br>
  82.                 ブレークポイントビューの「ステップイン」アイコンをクリックすると, 実行をステートメント単位で戻り,<br>
  83.                 呼び出し先のメソッドがある場合はその呼び出し先のメソッドに後ろから入ります.<br>
  84.                 この画像の場合では, ステップバックインによって, ひとつ前の呼び出し先である E クラスの setC() メソッドへ入っています.<br>
  85.                 なお, 逆方向に戻っていく関係上, 呼び出し先メソッドの開始時点ではなく終了時点に現在の実行が移る点に注意してください.<br>
  86.                 <div class = "image"><img src = "./images/StepBackInto_Reverse_1.png" class = "threeQuartersSize"></div>
  87.                 <div class = "image"><img src = "./images/StepBackInto_Reverse_2.png" class = "threeQuartersSize"></div>
  88.             </p>
  89.             <p class = "explanation">
  90.                 このデバッガには, 「ステップリターン」を逆向きに行う機能があります.<br>
  91.                 ブレークポイントビューの「ステップバックリターン」アイコンをクリックすると, 呼び出し元からそのメソッドに入る直前まで実行を戻ります.<br>
  92.                 この画像の場合では, ステップバックリターンによって, この E クラスの setC(C) メソッドが呼び出される直前の時点, <br>
  93.                 すなわち, 呼び出し元である D クラスの passB(B) メソッドの7行目まで実行が戻ります.<br>
  94.                 ,<br>
  95.                 <div class = "image"><img src = "./images/StepBackReturn_Reverse_1.png" class = "threeQuartersSize"></div>
  96.                 <div class = "image"><img src = "./images/StepBackReturn_Reverse_2.png" class = "threeQuartersSize"></div>
  97.             </p>
  98.             <p class = "explanation">
  99.                 ブレークポイントビューの「ステップネクスト」アイコンをクリックすると, 実行をステートメント単位で進めます.<br>
  100.                 「ステップイン」とは違い, こちらは呼び出し先のメソッドがあったとしても, その呼び出し先のメソッドには入ることはありません.<br>
  101.                 「ステップオーバー」では行単位で実行が進んでしまいますが, 「ステップネクスト」ではより細かいステートメント単位で同一メソッド実行内を進むことができます.<br>
  102.                 この画像の場合では, 現在のメソッド呼び出しステートメントである B.getC() の呼び出し先には入らずに, <br>
  103.                 そのまま次のメソッド呼び出しステートメントである E.setC(C) の直前にまで実行が進んでいます.<br>
  104.                 <div class = "image"><img src = "./images/StepNext_Reverse_1.png" class = "threeQuartersSize"></div>
  105.                 <div class = "image"><img src = "./images/StepNext_Reverse_2.png" class = "threeQuartersSize"></div>
  106.             </p>
  107.             <p class = "explanation">
  108.                 実行時点の登録ビューでは, 任意のタイミングで現在の実行時点を登録することができます.<br>
  109.                 現在の実行時点を登録するには, ビュー上にある追加ボタンをクリックしてください.<br>
  110.                 登録された実行時点はビュー上に一覧で表示されます.
  111.                 <div class = "image"><img src = "./images/Register_Reverse_1.png" class = "threeQuartersSize"></div>
  112.                 <div class = "image"><img src = "./images/Register_Reverse_2.png" class = "threeQuartersSize"></div>
  113.             </p>
  114.             <p class = "explanation">
  115.                 また, 登録した実行時点へはいつでもジャンプすることができます<br>
  116.                 ビュー上に登録されている実行時点をクリックすると, その登録した場所に対応するソースコードがエディタ上で開きます.<br>
  117.                 また, ダブルクリックで選択するか, 選択した状態でジャンプボタンをクリックすると, 選んだ実行時点へと現在の実行時点が移ります.<br>
  118.                 <div class = "image"><img src = "./images/Register_Reverse_3.png" class = "threeQuartersSize"></div>
  119.                 <div class = "image"><img src = "./images/Register_Reverse_4.png" class = "threeQuartersSize"></div>
  120.             </p>
  121.             <p class = "explanation">
  122.                 変数ビューで this などを開き, フィールドを選択した状態で右クリックすると, ポップアップメニューが表示されます.<br>
  123.                 ここで, 「値の代入時点に飛ぶ」を選択すると, このフィールドで参照されているオブジェクトが実際に代入される直前の時点まで実行を遡ることができます.<br>
  124.                 <div class = "image"><img src = "./images/BackToMoment_Reverse_1.png" class = "threeQuartersSize"></div>
  125.                 <div class = "image"><img src = "./images/BackToMoment_Reverse_2.png" class = "threeQuartersSize"></div>
  126.             </p>
  127.             <p class = "explanation">
  128.                 変数ビュー上で「フィールド代入前」などを開き, その中にある参照先などを右クリックすると, ポップアップメニューが表示されます.<br>
  129.                 ここで, 「オブジェクトの接近過程抽出」を選択すると, 参照元となるオブジェクトと参照先となるオブジェクトがどのようにして接近してきたのかの過程を抽出することができます.<br>
  130.                 <div class = "image"><img src = "./images/Delta_Reverse_1.png" class = "threeQuartersSize"></div>
  131.                 <div class = "image"><img src = "./images/Delta_Reverse_3.png" class = "threeQuartersSize"></div>
  132.                 <div class = "image"><img src = "./images/Delta_Reverse_4.png" class = "threeQuartersSize"></div>
  133.             </p>
  134.             <p class = "explanation">
  135.                 「オブジェクト接近過程」ビュー上の「開始時点」をクリックすると, 参照先側のオブジェクトがどのように接近してきたのかの過程について,<br>
  136.                 その開始時点となるメソッド実行に飛ぶことができます.<br>
  137.                 <div class = "image"><img src = "./images/Delta_Reverse_5.png" class = "threeQuartersSize"></div>
  138.             </p>
  139.             <p class = "explanation">
  140.                 「オブジェクト接近過程」ビュー上の「参照先側」をクリックすると, 参照先側のオブジェクトがどのように接近してきたのかの過程について各時点に飛んで見ていくことができます.<br>
  141.                 <div class = "image"><img src = "./images/Delta_Reverse_6.png" class = "threeQuartersSize"></div>
  142.                 <div class = "image"><img src = "./images/Delta_Reverse_7.png" class = "threeQuartersSize"></div>
  143.             </p>
  144.             <p class = "explanation">
  145.                 「オブジェクト接近過程」ビュー上の「参照元側」をクリックすると, 参照元側のオブジェクトがどのように接近してきたのかの過程について各時点に飛んで見ていくことができます.<br>
  146.                 <div class = "image"><img src = "./images/Delta_Reverse_8.png" class = "threeQuartersSize"></div>
  147.                 <div class = "image"><img src = "./images/Delta_Reverse_9.png" class = "threeQuartersSize"></div>
  148.             </p>
  149.             <p class = "explanation">
  150.                 「オブジェクト接近過程」ビュー上の「参照時点」をクリックすると, 参照元側のオブジェクトが参照先側のオブジェクトを参照するようになる時点に飛ぶことができます.<br>
  151.                 <div class = "image"><img src = "./images/Delta_Reverse_10.png" class = "threeQuartersSize"></div>
  152.             </p>
  153.         </p>
  154.  
  155.         <a id="next" href="../../courseA/CourseStartA.html">実験開始の説明へ進む</a>
  156.  
  157.     </body>
  158. </html>