IBM Cloud 開発環境を整えるその４

IBM Cloud 開発環境を整えるその４

■ おさらい

Visual Studio Code(以降 VSCode)を使った開発環境をWindows上に構築しようてしています。
ターゲットCloudはIBM Cloudを使用する。までが現在の専権事項。
Hollo World!のBasicコードをブレークポイント無しデバッグしたところまで。

■ デバッグの設定

デバッグ(debug)とは、プログラムの虫取とか、昔教わったような・・・
札幌のBUG(ビーユージ)さんはまさにバグです。
プログラムを構成する最小単位(トークン、もうこれ以上分割できないもの)の種類は下記になります。

•識別子（identifer）
•キーワード（keyword）
•リテラル（literal）
•演算子（operator）
•区切り子（punctuator）

もう一つ、このトークンを区切るものは、空白で区切られます。
これはホワイトスペースと呼び、下記の種類があります。

•スペース
•水平タブ
•垂直タブ　（プリンター）
•改行
•改ページ　（プリンター）

どんなプログラムも実は分解すると上記のトークンに分解されます。
上記については必要に応じて理解しましょう。
これから説明する内容で登場しますので、トークンを説明。

さて、VSCodeのデバッグをするために、デバッグの設定をします。

VSCodeの左下の歯車ボタンを押下します。

設定メニューから設定を選択します。

設定の検索に「debug」を入力します。

下記のdebugの設定が表示されます。

{


  // 任意のファイルにブレークポイントを設定できるようにする
  "debug.allowBreakpointsEverywhere": false,

  // 浮動デバッグ操作バーを非表示にするかどうかを制御します
  "debug.hideActionBar": false,

  // デバッグ中にエディターの行内に変数値を表示します
  "debug.inlineValues": false,

  // 内部デバッグ コンソールの動作を制御します。
  "debug.internalConsoleOptions": "openOnFirstSessionStart",

  // デバッグ ビューレットを開くか、デバッグ セッションを開始するかを制御します。
  "debug.openDebug": "openOnFirstSessionStart",

  // デバッグ セッションの終わりにエクスプローラ ビューを自動的に開きます
  "debug.openExplorerOnEnd": false,

  // デバッグのステータス バーが表示されるタイミングを制御
  "debug.showInStatusBar": "onFirstSessionStart",

  // グローバル デバッグ起動構成。ワークスペース間で共有される 'launch.json' の代わりとして使用する必要があります
  "launch": {}

}

2か所の設定を変更します。
① "debug.allowBreakpointsEverywhere": true,
② "debug.inlineValues": true

設定の検索の左側は現在の設定、設定変更する文字列を選択してコピーします。
コピーした文字列を右側の「ユーザ設定(2)」へ追記します。
falseをtrueに変更します。
最終行の最後は","カンマーが無いように注意しましょう。

修正が完了したら保存します。

これでブレークポイント（プログラムの一時停止位置）を指定できるようになります。
ブレークポイントでトークンの中身が見えるようになります。、
想定した結果がトークンに正しく設定されているか一行ずつプログラムを実行できます。
このよにプログラムを行単位で実行を行い、トークンの中身を確認する作業をデバッグといいます。

■ デバッグ

Program.vbのプログラムファイルにコードを追加します。

5行目 Dim Message As String
6行目 Message= "All you Need Is Love"
8行目 Console.WriteLine(Message)

Program.vbの○ボタンを押下。

保存ボタンを押下。

再び左のファイルリストビューからProgram.vbを選択して、エディターにプログラムを表示させます。
行番号の左側にマウスのカーソルを近づけると薄い赤丸が表示されるようになっています。

デバッグしたい行でクリックすると赤丸が固定します。（取り消しはまた赤丸をクリックします）
※F9キーで同様な操作

8行目の「Message」の中身をデバッグします。

簡単に追加したコードの説明。

5行目 MessageキーワードをString型で指定
6行目 Messageキーワードに"All You Need Is Love"を代入
8行目 Messageキーワードをコンソールに出力

8行目にブレークポイントを指定します。
8行目でプログラムが停止し、想定通りMessageキーワードに"All You Need Is Love"が代入されているか確認します。

デバッグボタンを押下。

デバッグの開始ボタンを押下。

8行目でプログラムが一時停止。（⇒矢印が表示される）

変数:LocalsのウィンドにMessageキーワード（変数）の中身を表示。（想定通り）

デバッグコンソールには7行目を実行した結果。(Hollo World!)

一時停止解除はF5キーを押下。
Messageの中身が出力されます。

今回はデバッグの設定とデバッグの基本を説明しました。
次回はちょっと脱線します。

以上、おそまつ