2019-06-08に更新

VSCodeのRemote DevelopmentでDocker内のPHPでデバッグしてみた

VSCodeのStable版でRemote Developmentのプレビュー版が使えるようになったので先日Node.jsで試してみましたが、PHPのXdebugによるデバッグも試してみました。

Remote Developmentの拡張機能のインストールは下記の記事と同じです。

VSCodeのRemote DevelopmentでDocker内のNodeでデバッグしてみた

サンプルのプロジェクトをclone

PHPにもサンプルのプロジェクトがありますので、そちらをcloneしてきます。

git clone https://github.com/microsoft/vscode-remote-try-php.git

プロジェクトを開く

cloneしてきたフォルダを開いたら、下記のボタンをクリックしてRemote-Containers: Open Folder in Container...を選択します。フォルダを指定するとDockerイメージがビルドされ、コンテナの中でVSCodeが開き直され準備完了です。

デバッグする

基本的な準備はできたのでデバッグしてみます。下記のように、適当な箇所にブレークポイントを設置します。

デバッグをスタートするためF5を押すか、下記のようにデバッグメニューの実行ボタンをクリックします。

問題なければ下記のように停止し、変数の中身を見ることができます。

ブラウザアクセスでデバッグする

上記の方法だと、コマンドラインでの実行としてのデバッグになりますので、ブラウザでアクセスしてもブレークポイントで停止できません。そのため、サーバーとしての動作でも止められるように.vscode/launch.jsonのconfigurationsに下記のような設定を追加します。

        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },

次にデバッグメニューでその設定を選択して起動します。するとXdebugのListenがスタートします。

次に、プログラムをサーバー起動させます。これでブラウザからアクセスできるようになります。

php -S localhost:8000

これでhttp://localhost:8000にブラウザアクセスすると先程の同様にブレークポイントで止まります。

まとめ

通常の開発にはあまり使わないかもしれませんが、フレームワークの中の処理を追いたいとか、APIやテストの開発時には便利そうですね。また他の言語も試してみたいと思います。


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント