デバッグ（Debug）とは？

デバッグとは、コンピュータプログラムのバグを見つけて、改修し、元の仕様の通りの動作が行えるようにする作業のことです。バグを見つけるだけのことをデバッグと呼ぶ会社などもあるようですが、バグを見つけて改修するまでの一連の作業のことをデバッグと呼んでいます。因みに、バグフィックスはバグを直すことです。

デバッグバグを見つけて、仕様通りの動作が行えるよう改修する作業のこと
デバッガーデバッグ作業を補助してくれるツール
バグフィックスバグを改修すること
デバッグ関連用語

バグの原因

コードの中に潜むバグは、様々な原因で生み出されます。バグを生み出す最も多い原因は、タイプミスです。単純な入力ミスから宣言の必要のない言語にも関わらず宣言してしまうなどの勘違いなどのタイプミスもあります。

また、APIを利用する際に正しい関数・オブジェクト・メソッドを利用しておらず意図・仕様と異なる動作を生み出している場合もバグとなります。

さらには、意図・仕様を勘違いし、誤った認識で開発を進めてしまう場合もバグとなります。

Visual Studio Codeでデバッグしてみる

Visual Studio Codeとは

Visual Studio Codeとは、Microsoftが開発するWindows、Linux、macOSに対応したソースコードエディアで、ソフトウエア開発に必要な様々な機能が搭載されている。

高度なデバッグ機能の他、とっても便利なコード補完、シンタックスハイライト、コードリファクタリングサポートなどの機能が充実している。また、開発者の好みに合わせたカスタマイズ機能もあり、テーマの変更や開発者にはかかすことのできないキーボードシートカットキーの割り当てなど自由度の高い開発環境設定を行うことができる。

Visual Studio CodeはMITライセンスでオープンソースとして無料で配布されている。Visual Studio Codeのリポジトリはこちら。

Visual Studio Codeのデバッグの方法は３通り

Visual Studio Codeのデバッグの方法は３通りあります。ひとつは、画面左上のハンバーガーメニューをクリックし、「実行」⇒「デバッグの開始 F5」の順番にクリックします。

もうひとつは、↑の記述にもある通り、ショートカットキー「F5」を押す方法。「F5」は、Visual Studio Code上でアクティブになっているファイルのデバッグを行いますので、アクティブになっていないファイルをデバッグしたい場合は、F5キー以外のデバッグ実行方法を選択します。

そして、最後にF5以外でおススメなのが、画面左の「実行とデバッグ」ボタンをクリックする方法です。

launch.jsonファイル

Visual Studio Codeで初めてデバッグを行う際、「launch.json」がない！と言われます。「launch.json」ファイルは、デバッグを行う際の起動構成ファイルのことですが、Visual Studio Codeでは「launch.json」ファイルを最初に作成しておかないと、デバッグすることができませんので、作成しておきます。

「launch.json」ファイルは、ワークスペース内の直下（プロジェクトルートフォルダー）に置いておきます。※ユーザー設定もしくはワークスペース設定でも可

↓は、Chromeを指定して生成した「launch.json」。

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceFolder}/wwwroot"
        },
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html"
        },
    ]
}