Vimでもデバッグしたい

最近var_dumpやChrome.phpを使ったブラウザに変数を表示させるデバッグ方法に疲れてきたのでVimにデバッガ入れてみるかという話。こんな感じでブレークポイント入れたり変数の確認とかのデバッグができます。

f:id:rasukarusan:20180729220611g:plain

環境

Vagrant(1.94)
PHP(5.16)
Mac(El Capitan)
Vim(8.1：Vagrantではなくローカルにインストールされているものです)

筆者の環境はVagrantでPHPが動作しており、ソースはローカルとVagrantがマウントしている状態。いわゆるリモートデバッグがしたいという状況です。

死ぬほど参考になったサイト

基本的には以下のサイトに従って導入したが、以下の記事ではうまくいかなかったこともあったのでそれも含めて記載します。

PHPでVim使って開発していてvar_dump()を唱えているならVim Plugin のvdebugを使ってみろって - Qiita

https://blog.code-life.net/blog/2012/10/01/vim-vdebug-xdebug/

VagrantにXdebugをインストール

$ vagrant ssh

# Xdebugをインストール
[vagrant@muscle ~]$ sudo pecl install xdebug-2.0.3

# Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF
# ERROR: `phpize' failedと出たら以下を実行してください
[vagrant@muscle ~]$ sudo yum install autoconf

筆者の環境ではCentOSのバージョンが低く、普通にyumでインストールできなかったのでXdebugのバージョンを指定してインストールしました。 XdebugのHPから自分のPHPのバージョンに合っているXdebugのバージョンを確認。

php.iniにXdebugの設定を追加

# xdebug.soのパスを確認
[vagrant@muscle ~]$ sudo find / -name 'xdebug.so'

[vagrant@muscle ~]$ sudo vi /usr/local/lib/php.ini
# php.iniに以下を追加
[Xdebug]
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20192838/xdebug.so ; #<= ここはfindで見つかったxdebug.soのパス
xdebug.default_enable=1
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=10.0.2.2 ; #<= Vagrantだとこのホストになるそうです。筆者の環境ではprivate_networkのIPを指定してもだめでした。
xdebug.remote_port=9001
xdebug.remote_log=/tmp/xdebug.log
xdebug.max_nesting_level=10000
xdebug.remote_connect_back=1

Xdebugを入れるとその分メモリを喰うのでphp.iniを編集してメモリの上限を上げておきます

[vagrant@muscle ~]$ sudo vi /usr/local/lib/php.ini
;memory_limit = 50M      ; Maximum amount of memory a script may consume (50MB)
memory_limit = 128M      ; Maximum amount of memory a script may consume (128MB) ; #<= Xdebugでメモリを喰うため

apacheを再起動

# vagrant reloadでも良い
[vagrant@muscle ~]$ sudo service httpd restart
httpd を停止中:                                            [  OK  ]
httpd を起動中:                                            [  OK  ]

インストールされているか確認

[vagrant@muscle ~]$ php -i | grep xdebug
xdebug
xdebug support => enabled
xdebug.auto_trace => Off => Off
xdebug.collect_includes => On => On
....
xdebug.remote_host => 10.0.2.2 => 10.0.2.2
xdebug.remote_log => /tmp/xdebug.log => /tmp/xdebug.log
xdebug.remote_mode => req => req
xdebug.remote_port => 9001 => 9001
xdebug.show_exception_trace => Off => Off
xdebug.show_local_vars => Off => Off
xdebug.show_mem_delta => Off => Off
xdebug.trace_format => 0 => 0
xdebug.trace_options => 0 => 0
xdebug.trace_output_dir => /tmp => /tmp
xdebug.trace_output_name => trace.%c => trace.%c
xdebug.var_display_max_children => 128 => 128
xdebug.var_display_max_data => 512 => 512
xdebug.var_display_max_depth => 3 => 3

上記が表示されていればインストールはOKです。
これでVagrant上の操作は終了です。ここからはローカルの設定です。

VimにVdebugをインストール

Vimでデバッグするのには「Vdebug」というプラグインを使用。 github.com

deinでインストール

call dein#add('joonty/vdebug')

vimrcにVdebugの設定を追加

" ========Vdebug======== "
let g:vdebug_options= {
\    "port" : 9001,
\    "timeout" : 20,
\    "on_close" : 'detach',
\    "break_on_open" : 0,
\    "remote_path" : "",
\    "local_path" : "",
\    "debug_window_level" : 0,
\    "debug_file_level" : 0,
\    "debug_file" : "",
\    "path_maps" : {
\       '/home/yourpath/web' : '/Users/'.$USER.'/workspace/web',
\    },
\    "window_arrangement" : ["DebuggerWatch", "DebuggerStack"]
\}

上記のpath_mapsが重要です。これをVagrant上でマウントしている先のパスと合わせます。左側がVagrantのパス、右側がローカルPCのパスとなります。また、上記では書かれていませんが"server":"127.0.0.1"という設定をよく見ます。ただ、筆者の環境ではこれを書いている限りVagrantと疎通が取れずデバッグができなかったので削除しました。(remote_pathも同じ理由で空白しています)

以下は筆者の好みでデフォルトから変更しているもの。

キー名	意味
break_on_open	いきなりブレークポイントまで行くかどうかデフォルトは1で行かないようになっている
window_arrangement	デバッガ画面に表示する項目デフォルトは"DebuggerWatch", "DebuggerStack","DebuggerStatus"の3つが指定。

Xdebug helperのインストール

ブラウザからデバッグするために以下のChrome拡張を入れます。 chrome.google.com 設定は特にありません。デバッグしたい画面で以下の画像のように「Debug」を選択するだけです。

いざ実行

F10でブレークポイント、F5でデバッグ開始です。デバッガ中はF3でステップ実行、F6をデバッグ終了、もう一度F6 を押すとデバッガ画面が閉じます。

※F6二回押しで閉じずに:qとかで閉じるとvimが止まるか次回起動時にエラーが出るので注意してください。

vimrcでキーマップを変えることができます。デフォルトは以下になってます。

let g:vdebug_keymap = {
\    "run" : "<F5>",
\    "run_to_cursor" : "<F9>",
\    "step_over" : "<F2>",
\    "step_into" : "<F3>",
\    "step_out" : "<F4>",
\    "close" : "<F6>",
\    "detach" : "<F7>",
\    "set_breakpoint" : "<F10>",
\    "get_context" : "<F11>",
\    "eval_under_cursor" : "<F12>",
\    "eval_visual" : "<Leader>e"
\}

ちなみにこういうデフォルト値とか配列の指定どうやって見つけるの？という話だが、READMEに書いてあるのを見るのが一番だが書いていないときはソースを見に行くのが早道のときもある。今回でいうなら.vim/dein/repos/github.com/joonty/vdebug/plugin/vdebug.vimを見てデフォルト値とか引数がわかった。vimのプラグインだったらXXX.vimというのを見に行けば大体解決する(と思う)。

非常に快適だ。