Visual Studio Code で Vagrant のPHP を Xdebug

Visual Studio Code(以下、VSCと省略)を試用してみました。

日本語でインストールすると、コマンドパレットも日本語で打たないといけないというバグが今のところある様です。英語にするには、表示→コマンドパレット→言語を構成する(言語と入力したら絞り込まれます)→開いた “locale”:”en-US” と書いてあるファイルを保存。これでVSCを再起動したら英語になります。

あとは Color Theme を Monokaiにしたり、カーソル下にある単語のハイライトを停止したりしました。

// Controls whether the editor should highlight similar matches to the selection
“editor.selectionHighlight”: false,

 

で、本題のVagrant上のサーバーをXdebugでリモートですが、なんとなーくですが出来ました。環境はCentOS 7.2.1511、Apache 2.4.6、PHP 5.6.18、Xdebug 2.3.3、xdebugの設定は下記の2行です。

xdebug.remote_enable=1
xdebug.remote_host=10.0.2.2

 

もともと、PhpStormでデバッグをおこなっていた環境ですので詳細は省略されてるかもです。まずはコマンドパレットを開いて ext install php-debug と入力して、エクステンションをインストールして下さい。

次に File の Open Folder でデバッグ対象のファイルを含むフォルダを開いて下さい。

開いたら View の Debug を選んで左上のほうにある歯車アイコンをクリックして、launch.jsonを開いて下さい。

上の Listen for XDebug の下に下記の2行を追加します。 /var/www/html はVagrantで共有してるフォルダなので設定によります。${workspaceRoot} は上で開いたフォルダに対応します。

“serverSourceRoot”: “/var/www/html”,
“localSourceRoot”: “${workspaceRoot}”,

PHP Debug | Visual Studio Marketplace

 

あとは、PhpStormのデバッグのために下記のページ作ったブックマークレットでクッキーを追加して、適当な場所にF9でブレイクポイントを設定して、歯車の左の緑の実行ボタンをクリックし、ブラウザでブレイクポイントを設定したファイルにアクセスしたら無事、停止しました。

Xdebug & Zend Debugger bookmarklets generator for PhpStorm

IDE keyは私はvagrantとしてますが、エクステンション側には設定するとこはありませんので、何でもいいのかもです。

ブックマークレットが必要なのはたぶんVagrant上だからだと思いますがよく分かっていません。メインで使ってる Sublime Text の Xdebug Client ってパッケージが不安定で、デバッグだけPhpStormを使ってるんで、Visual Studio Codeだけで済んだらいいなぁと。ちょっと試した限りでは問題なさそうです、デバッグは。

 

前後しますがVagrantfileの設定は下記な感じで、Vagrantfileと同じとこにhtmlフォルダがあります。

config.vm.network :public_network, ip: “192.168.12.34”
config.vm.synced_folder “html/”, “/var/www/html”