Visual Studio Code(以下VSCode)は、Microsoftが無料で提供しているコードエディタで、ほとんどの言語に対応しており、 プラグインも豊富で、今回は、特にPHPに特化したカスタマイズを行い、高度なデバッグも可能に設定します。 プログラムを開発するのは簡単ですが、不具合が有ったときに原因を見つけることが大変です。 1時間で作った機能のバグ取りに1日かかることも日常茶飯事です。このデバッグ作業を効率よく行うため、 ブレークポイントを設定して、ステップ実行させ、処理の流れや、変数の値なども確認しながらデバッグします。 デバッグコンソールでのステップ実行ならどこにでもありますが、ここではブラウザで実行させたプログラムを ステップ実行することが可能になります。
- まずは、https://code.visualstudio.com/download
こちらからWindowsの[User Installer 64 bit]をダウンロードします。
- インストーラーは、ウィザードですので、指示に従って、できる限りデフォルトのままインストールを進めてください。 設定を変更すると、以下の解説と異なる箇所が発生して不具合の原因ともなりかねません。
- ここからが少し厄介な設定になります。
とりあえず起動してみましょう。
右下に何か表示されています。拡大してみると、
起動直後は英語版になっていますので、「日本語にできますよ」というメッセージでしたのでクリックして言語パックをインストールします。
このメッセージは、最初だけですので、出なくなった場合は、左のプラグインボタンを押します。
上部のプラグイン検索ボックスに[Japa]とでも入力すると日本語言語パックが表示されますので、インストールします。 インストールが完了して、vscodeを再起動するとメニューも日本語になっています。 - ここからPHPに関するプラグインのインストールと設定です。
プラグインボタンを押して、プラグイン検索ボックスに[php]と入力します。 検索結果からこれらのプラグインをインストールします。 同名のプラグインが数多く存在しますので、作者や概要を見て同じものをインストールしてください。 - 次にPHPに関する設定を行います。
左下にある設定ボタン押して「設定」をクリックします。
設定フォームが開いたら、上部の項目検索ボックスに[php]と入力します。 PHPに関する項目だけが表示されますが、この中に設定項目がありませんので、「settings.jsonで編集」をクリックしてください。
以下の設定が有るかを確認して、無ければ追加します。"php.validate.executablePath": "C:/xampp/php/php.exe", "php.executablePath": "C:/xampp/php/php.exe", "php.validate.enable": false, "php.suggest.basic": false, "files.associations": { "*.inc": "php" }, "php.debug.executablePath": "C:/xampp/php/php.exe"
- 最後にデバッグための設定です。
windowsメニューを右クリックして[ファイル名を指定して実行]を選択し、[cmd]と入力してコマンドプロンプトを開きます。 今回は管理者モードでなくて結構です。C:\>php -i | clip C:\>
上記のようにPHPのインフォメーションをクリップボードにコピーします。 コマンドラインには何も表示されませんが、クリップボードにPHPの設定がすべてコピーされています。
この状態のまま、Xdebugのサイト(https://xdebug.org/wizard) の以下のテキストボックスにクリップボードの内容をペーストします。
貼り付けが完了したら[Analyse my phpinfo() output]ボタンを押します。
あなたの環境にあったXdebugのDLLを生成してダウンロード可能になっています。
四角に囲まれたDLLをクリックしてダウンロードします。 このファイルは、とりあえずC:\xamppと、C:\xampp\php\extの二か所にコピーしておき、 C:\xampp\php\extのほうを「php_xdebug.dll」にリネームしてください。
XdebugのInstall Wizardにも有るようにC:\xampp\php\php.iniを設定しますので、エディタで開いてください。 すでに、VSCodeがインストールされていますので、VSCodeで開くのがベストです。この種のファイルは、常にVSCodeで開くように設定しておくと良いでしょう。
php.iniが開いたら、上記のように、最後に以下の4行追加します。[XDebug] zend_extension = xdebug xdebug.mode = debug xdebug.start_with_request = yes
これを保存すればデバッグ環境も完成です。