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

2019-06-08T10:30:51+09:00

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やテストの開発時には便利そうですね。また他の言語も試してみたいと思います。

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

2019-06-06T22:53:45+09:00

VSCodeのStable版でRemote Developmentのプレビュー版が使えるようになったので試してみました。とりあえずDockerコンテナ内のNode.jsでブレークポイントを貼ってデバッグしてステップ実行したりするところを試しました。

基本的には下記のマニュアルどおりにやればいいのですがちょこちょこつまづいたり冗長な部分もあるのでとりあえず最小で試すところを書いてみます。

Visual Studio Code Remote Development

Remote Developmentをインストール

まずはRemove Developmentの拡張機能をインストールします。これをインストールするとSSH、コンテナ、WSL用の拡張機能も同時にインストールされます。

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

下記がコンテナの場合のマニュアルです。

Developing inside a Container using Visual Studio Code Remote Development

ここに書かれているように、試す用のGitHubリポジトリがいくつか用意されています。Visual Studio Code用の設定や、Remote Development用の設定も含まれているため簡単に試すことができます。今回はこれを使って試していきます。Node.js用のvscode-remote-try-nodeというリポジトリをcloneしてきます。

ただ、2019/6/6現在Dockerイメージ作成でエラーになって失敗するようですので、.devcontainer/Dockerfileのベースイメージだけnode:10から下記に変更して最新のものがインストールされるようにしておきます。

FROM node

まずは普通にcloneしてきたフォルダをVSCodeで開きます。次に、下記画像のようにステータスバーの一番左にRemote Development用のメニューが追加されていますのでここでRemote-Containers: Open Folder in Container...を選択すると初回のみDockerイメージがビルドされ、そのイメージのコンテナ内としてVSCodeが開きなおされます。（ちなみにdocker-compose.ymlがあればそちらからの起動を選択したりもできるみたいです）

デバッグしてみる

準備はできたのでデバッグしてみます。まずはブラウザでページを開いた時の処理あたりにブレークポイントを貼ってみます。

左のメニューから虫のようなボタンを押してデバッグメニューを開きます。

緑色の実行ボタンを押すとデバッグが始まります。開始したら http://localhost:3000 にアクセスするとページ表示が始まり、先程のブレークポイントのところで停止します。ここでresやreqの変数などを見ることができたりします。おわったらVSCodeの上部に停止ボタンが出ているので止めます。

これで最小の確認は完了です。

TypeScriptの場合

おまけとしてTypeScriptの場合ですが、tsconfig.jsonでsourceMapをtrueにします。あとはts-nodeで実行するか、もしくはビルド用のタスクを作ってlaunch.jsonのpreLaunchTaskにそのタスクを指定すれば同様に試すことができます。

まとめ

この様な感じでDockerコンテナ内のシステムを使って動かすことができました。やはりデバッグやテスト実行が思いつく限り一番有用な気がしますが、他にも色々と便利な使い方はできそうな気がします。

個人的にはいろんなコンテナの処理を実行したいな、という場合もある気がするので中で起動するのではなくて一部だけ中で実行する、のような連携がもっと簡単にできればいいなぁと思いましたが、とりあえずPreview版ですので今後にも色々期待したいと思います。

PHPも下記で試してみました。
VSCodeのRemote DevelopmentでDocker内のPHPでデバッグしてみた

「RemoteDevelopment」の記事 - Crieit

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

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