使用したバージョン
![](https://lil.la/wp-content/uploads/image-822.png)
![](https://lil.la/wp-content/uploads/image-809.png)
Visual Studio Codeの準備
インストール
![](https://code.visualstudio.com/opengraphimg/opengraph-home.png)
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio C...
日本語化
View-Extensions
![](https://lil.la/wp-content/uploads/image-810.png)
検索窓に「Japanese Language」と入力してInstallクリック、再起動すると日本語化完了
![](https://lil.la/wp-content/uploads/image-811.png)
PHP拡張機能をインストール
先ほどの検索ボックスに、「PHP IntelliSense」と入力してインストール
![](https://lil.la/wp-content/uploads/image-812.png)
先ほどの検索ボックスに、「PHP Debug」と入力してインストール
同名の拡張機能があるが、Felix Bekcker氏の拡張機能をインストールした。
![](https://lil.la/wp-content/uploads/image-813.png)
PHP側の設定
コマンドプロンプトを開き以下のコマンドを実行。
php -iの内容はクリップボードに張り付けられている。
php -i | clip
Xdebugインストール
Xdebugが必要なので以下のページにアクセスし、表示されているテキストエリアに張り付ける。
Xdebug: Support — Tailored Installation Instructions
Xdebug: A powerful debugger for PHP
解析結果が表示されるので、画面の指示に一部従う
zend_extension = xdebugの項は無視してよい。
![](https://lil.la/wp-content/uploads/image-814.png)
php_xdebug-3.1.1.8.0-vs16-x86_64.dll をダウンロードして c\xampp\php\ext にコピー
php.ini の編集
php.iniに以下の記述を追加する
[xdebug] zend_extension=C:\xampp\php\ext\php_xdebug-3.1.1-8.0-vs16-x86_64.dll xdebug.mode=debug xdebug.start_with_request=yes xdebug.client_port=9003
VSCodeでPHPをデバッグする
とりあえずデバッグできることを確認できればいいので以下のコードをテストしてみる。
<?php
$a="aaa";
$b="bbb";
$c=$a . $b;
echo $c;
適当にローカルに立てたwebサーバーにアップロードしてブラウザで動作確認。
![](https://lil.la/wp-content/uploads/image-819.png)
デバッグ開始
左端の三角マークをクリックする。
![](https://lil.la/wp-content/uploads/image-815.png)
launch.json ファイルを作成
![](https://lil.la/wp-content/uploads/image-816.png)
ブレイクポイントを設定して左の小さな三角をクリック
![](https://lil.la/wp-content/uploads/image-817.png)
ブラウザでwebサーバーにアクセスするとブレークポイントで停止していることがわかります。
F10でステップ実行できます。
404 Not Found
![](https://lil.la/wp-content/uploads/image-818-585x229.png)
ローカルでPHPをデバッグ
Launch currently open scriptを選択してデバッグを開始するとPHPスクリプトが即時実行される。
![](https://lil.la/wp-content/uploads/image-820-585x263.png)
コメント