【TypeScript】VSCodeを使ってデバッグをしてみる メモ

そもそもデバッグとは

デバッグとは、コンピュータプログラムに潜む欠陥を探し出して取り除くこと。
参照：https://e-words.jp/w/%E3%83%87%E3%83%90%E3%83%83%E3%82%B0.html

なぜVSCodeを使ってデバッグをしようと思ったか？？

デバッガ機能を使って楽にデバッグ作業をしたいから！！！
です。
ただ、以前eclipseを使っているときに多少は習ったのですが、使い方があまり分からず、後回しになって現在に至りました。
ですので、一度簡単にやってみようと思います！！

今回参考にさせていただいたサイト↓
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】
やっていることは同じなので、詳しく知りたい方は↑のサイトに飛んでみてください

今回使用するコード

const fizzbuzz = (number:number) => {
  if(number % 15 === 0){
    return 'FizzBuzz';
  }else if(number % 3 === 0){
    return 'Fizz';
  }else if(number % 5 === 0){
    return 'Buzz';
  }else{
    return number;
  }
}

for(let i = 1;i <= 30;i++){
  console.log(fizzbuzz(i));
}

FizzBuzzのプログラムです。
3で割り切れるとき→Fizz
5で割り切れるとき→Buzz
15で割り切れるとき→FizzBuzz
それ以外→数字

実際にやってみた

1. 実行とデバッグをクリック
2. 左側のJavaScript Debug Terminalをクリックしてターミナルが出ているのを確認

3. ブレークポイントの指定
4. コードの実行

5. 実行やステップオーバーをクリック
→実行をするとそのまま値が出力され、ステップオーバーをクリックするとif文の中での処理も見ることができる
☆それぞれのボタンについて詳しくは→https://atmarkit.itmedia.co.jp/ait/articles/1707/21/news030_3.html
6. 値が更新される
7. 条件に合った値（文字列）が出力される

まだまだやり方などあいまいな部分が多いですが、使って慣れていきたいと思います