VSCodeのデバッグ機能を使える人になる

はじめに

今日はVSCodeのデバッグ機能を使える人になりたいと思います。VSCodeを使い始めてから、DockerやGit/GitHubを連携して使ってみたり、色々便利そうな拡張機能を漁ってみたりと奮闘してきましたが、ずっと最初からVSCode画面左に鎮座している[実行とデバッグ]タブだけ使いこなせていない自分を憂いていました。遂に、本日、チャレンジしてみる事にしました。開発環境によって環境の整え方が違いますので、私の場合は既に構築済みのAngura学習環境とLaravel学習環境で試してみたいと思います。過去記事はこちらをご参照下さい。

Angular学習環境でデバッグできるようにする

環境準備

結論として、こちらに関しては、既にできる状態になっていました。
私が理解できていなかっただけなのですが、前述の過去記事の環境構築手順で言うと、「Angularプロジェクトの生成」のところで、下記コマンドを実行するのですが、そのタイミングでデバッグに必要な環境設定ファイルが同時に生成されておりました。

実行コマンド

$ ng new html --directory=./

デバッグに必要な環境設定ファイルは具体的に下記のファイルです。中身は生成された状態のまま変更する必要はありませんでした。

.vscode/launch.json

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "pwa-chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: test",
      "url": "http://localhost:9876/debug.html"
    }
  ]
}

強いてやった事と言えば、Google Chromeをインストールしたくらいです。今までSafariで間に合っていた為、Google Chromeをインストールしていませんでした。
VSCodeに標準搭載されているデバッグ機能を使ってAngularプロジェクトでデバッグするには、Google ChromeかFirefoxかMicrosoft Edgeが必要で、Safariは未対応のようです。しかも、Google Chromeを使えば、launch.jsonの中身も全く変更しなくていいので楽ちんです。FirefoxまたはMicrosoft Edgeを使いたい方は、「type」項目の値を変更する必要があります。
準備作業は以上となります。

デバッグしてみる

それではデバッグしてみます。
とりあえず、ブレークポイントを置いて、そこでプログラムが止まるのを確認できればいいので、今回は下記ファイルの適当な行にブレークポイントを置いてみました。ブレークポイントの置き方は簡単で、行番号の左辺りをクリックするだけです。赤丸印が付けばOKです。

そしたら、VSCode画面左の[実行とデバッグ]タブに切り替え、画面左上の[実行とデバッグ]プルダウンで"ng serve"を選択して下さい。選択したら、その左にある[▷]ボタンをクリックします。

そうすると、デバッグが始まり、Google Chromeが起動し、VSCodeでは先程置いたブレークポイントがハイライト表示されます。このような状態になれば、デバッグ成功です。
後は、画面中央上部にあるデバッグツールバーで、ステップ実行するなりして、デバッグしてみて下さい。デバッグに満足したら、デバッグツールバーの[|▷]ボタンをクリックしてみて下さい。

止まっていた処理が再開し、Google ChromeにAngularの画面が表示されます。

Laravel学習環境でデバッグできるようにする

環境準備

こちらに関しては、少々準備作業が必要でした。
まず、コンテナビルド時に、xdebugを追加でインストールする必要があり、Dockerfile(APPサーバー用)を下記の通りに変更しました。

build/app/Dockerfile

FROM php:8.1-apache

ARG USER_UID
ARG USER_NAME
ARG GROUP_GID
ARG GROUP_NAME

RUN groupadd -g ${GROUP_GID} ${GROUP_NAME} \
  && useradd -m -s /bin/bash -u ${USER_UID} -g ${GROUP_GID} ${USER_NAME} \
  && apt-get update \
  && apt-get install -y sudo \
  && echo "${USER_NAME} ALL=(root) NOPASSWD:ALL" > /etc/sudoers.d/${USER_NAME} \
  && chmod 0440 /etc/sudoers.d/${USER_NAME}

COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

RUN apt-get update \
  && apt-get install -y git libpq-dev \
  && docker-php-ext-install pdo_pgsql

+ RUN pecl install xdebug \
+   && docker-php-ext-enable xdebug

ADD 000-default.conf /etc/apache2/sites-available/
RUN a2enmod rewrite

USER ${USER_NAME}

さらに、"PHP Debug"拡張機能も追加する必要があり、devcontainer.jsonを下記の通りに変更しました。

.devcontainer/devcontainer.json

{
    "name": "laravel",
    "dockerComposeFile": "../docker-compose.yml",
    "service": "app",
    "workspaceFolder": "/var/www/app",
    "extensions": [
        "bmewburn.vscode-intelephense-client",
+       "xdebug.php-debug"
    ],
    "remoteUser": "${localEnv:USER}"
}

これで定義ファイルの準備は完了です。
いつも通りVSCodeを使って、Compose Down → Compose Upして、コンテナを再生成して下さい。
※手順が不明な方は、前述の過去記事に記載がありますので、そちらをご参照下さい。

コンテナの再生成が終わったら、コンテナにアクセスし、"PHP Debug"拡張機能がちゃんとインストールされているか確認してみましょう。

ここまで来たらもう一息です。
VSCode画面左の[実行とデバッグ]タブに切り替えて、"launch.jsonファイルを作成します"リンクをクリックし、[環境の選択]で"PHP"を選択して下さい。

すると、launch.jsonファイルが生成されます。素のPHP環境であればこのままの状態で問題無いと思いますが、Laravel環境ではDocumentルートが異なる為、デバッガーが正しく動作しません。また、私の環境では、Parallels Desktopの中のUbuntu Desktop仮想マシンにDocker環境を構築している関係で"Listen for Xdebug"ブロックの定義は全く動作しませんでした。その為、下記のハイライトの通り、記述を書き直しました。この定義内容の変更に関しては、ご自身の環境に合わせて色々試してみて下さい。

.vscode/launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
-       {
-           "name": "Listen for Xdebug",
-           "type": "php",
-           "request": "launch",
-           "port": 9003
-       },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 0,
            "runtimeArgs": [
                "-dxdebug.start_with_request=yes"
            ],
            "env": {
                "XDEBUG_MODE": "debug,develop",
                "XDEBUG_CONFIG": "client_port=${port}"
            }
        },
        {
            "name": "Launch Built-in web server",
            "type": "php",
            "request": "launch",
            "runtimeArgs": [
                "-dxdebug.mode=debug",
                "-dxdebug.start_with_request=yes",
                "-S",
                "localhost:0"
            ],
            "program": "",
-           "cwd": "${workspaceRoot}",
+           "cwd": "${workspaceRoot}/public",
            "port": 9003,
            "serverReadyAction": {
                "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
                "uriFormat": "http://localhost:%s",
                "action": "openExternally"
            }
        }
    ]
}

準備作業は以上となります。

デバッグしてみる

それではデバッグしてみます。
前述のAngular環境でやった時と要領は同じです。適当なファイルにブレークポイントを置き、[実行とデバック]プルダウンで"Launch Built-in web server"を選択し、その左にある[▷]ボタンをクリックして、デバッガーを起動させましょう。
どうですか。下記のように、ブレークポイントでうまくプログラムの実行が止まりましたでしょうか。
うまく行ったら、ステップ実行を試したりしてみましょう。デバッグに満足したら、デバッグツールバーの[|▷]ボタンをクリックして、止まっていた処理が再開しましょう。

Google ChromeにLaravelの画面が表示されます。ちなみに、xdebugの場合はSafariでも問題なくデバッグできました。

おまけ

Laravelプロジェクトの場合、.vscodeディレクトリはGit管理対象外に設定されています。launch.jsonもGit管理下に追加したいので、.gitignoreファイルを以下の通りに変更しておき、他の変更したファイルと合わせて、Gitにコミットしておきましょう。別にお試してでやっているだけなので、Git管理はしていないという方は読み飛ばして下さい。

.gitignore

/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
/.idea
- /.vscode
+ /.vscode/*
+ !/.vscode/launch.json

最後に

これで問題発生時の調査がとても捗るようになりますね。さよなら、var_dump。。。
お疲れ様でした！