TypeScript (6) デバッグ

今回は Visual Studio Code から TypeScript で書かれた Small Basic Online をデバッグする方法についてお伝えします。
まず、Visual Studio Code の「ターミナル」を立ち上げて、以下のコマンドを入力し、Small Basic Online を立ち上げてみます。
npm i
npm run gulp watch-source
以下の図は上記の2行目のコマンドで [Enter] を押す直前です。

上記のコマンドを実行後、ブラウザから http://localhost:8080 を開くと Small Basic Online が表示されます。
今回は Shapes.Ellipse 操作の表示がおかしいので、それを直してみたいと思います。プログラム SXD340 を Small Basic Desktop で実行すると次のようになります。

ところがこのプログラムを Small Basic Online にコピーして実行すると次のようになります。円が若干左上にずれているのが分かります。（図をクリックすると拡大します。）

ここで、デバッガを起動してみます。最初に一度だけ Debugger for Chrome のための設定として次の操作を行います。Visual Studio Code の左側にある虫のアイコンをクリックしデバッグサイドバーを表示します。Ｄｅｂｕｇ　Ｔｅｓｔｓ　と表示されている下向きの三角形をクリックし「構成の追加」を選びます。launch.json の編集画面にメニューが表示されるので、「{ } Crhome: Launch」を選びます。すると先程の下向きの三角形をクリックして「Launch Chrome」が選べるようになるので、これを選びます。
Visual Studio Code の左側にあるファイルのアイコンをクリックしエクスプローラサイドバーを起動し、以下のファイルを開きます。
src\app\components\common\shapes\ellipse.ts
move メソッドの中の1行目にブレークポイントを設定してみます。行番号の左側をクリックすると赤い丸が表示されるので、それがブレークポイントが設定されたという表示です。これでデバッグを開始するとブレークポイントの行の実行直前にプログラムが一時停止します。
ブレークポイントが設定できたらデバッグサイドバーの「Launch Chrome」と表示された左の緑の三角をクリックしデバッグを開始します。Chrome ブラウザが起動され Small Basic Online のエディターが表示されます。ここに上記の SXD340 を貼り付け [Run] ボタンを押すと、ブレークポイントで停止し、次のような画面が表示されます。

このとき Small Basic Online の画面はこうなります。

Visual Studio Code の上のほうにデバッグのためのコントロールが表示されています。左から、「続行」「ステップ オーバー」「ステップ インする」「ステップ アウト」「再起動」「停止」となっており、「ステップ～」は1行ずつ実行します。そのときソースコードの変数名の上にカーソルを置くと変数の内容が表示されます。「続行」を押してプログラムを続行させることができます。「停止」でデバッグを終了します。
エクスプローラサイドバーから ellipse.ts を開き、10, 11, 28, 29行で strokeWidth / 2 だけ右下に楕円をずらします。編集後エディターの右上に「変更を開く」ための矢印が回転しているアイコンがあるのでこれクリックして変更した箇所を確認します。

すでに Small Basic Online の最新版が起動していると思うのでさきほどのプログラムを走らせると下図のように円の位置が正しくなっていることが確認できると思います。

今回の内容はここまでとします。次回は修正したソースを GitHub に反映する方法を紹介します。
（つづく）