記事の詳細
「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法
今回は、弊社社長がPHPのコードをデバッグする際に「超便利！」と太鼓判を押す「Visual Studio Code」のインストール方法とデバッグ環境の設定方法について記載します。
今回のブログの見出しはコチラです！
- 1 「Visual Studio Code」とは？
- 2 「Visual Studio Code」でPHPのデバッグ環境を整えるには？
- 3 「Visual Studio Code」のインストール方法
- 4 「XAMPP」のインストール方法
- 5 「Visual Studio Code」と「XAMPP」を紐づけるための環境設定方法
- 6 「Visual Studio Code」の拡張機能「PHP IntelliSense」のインストール方法
- 7 「Xdebug」のインストール方法
- 8 「Visual Studio Code」のデバッグ環境を整える方法
- 9 「Visual Studio Code」でデバッグを実行する方法
「Visual Studio Code」とは？
30種類以上のプログラミング言語をサポートしている超高機能な統合開発環境です！
…
ちょっと凄さが伝わらないですね…。
とはいえ、私もまだまだ初心者なので全貌を把握しておりません…。
「Visual Studio Code」の溢れんばかりの魅力は下記の公式サイトからチェックをお願いします！
Visual Studio Code お気に入りのクライアント環境で動く軽量、高速な高機能エディター
「Visual Studio Code」でPHPのデバッグ環境を整えるには？
「Visual Studio Code」のPHPのデバッグ環境を整えるためには、下記の作業が必要となります。
・「Visual Studio Code」のインストール
・「XAMPP」のインストール
・「Visual Studio Code」と「XAMPP」を紐づけるための環境を設定
・「Visual Studio Code」の拡張機能「PHP IntelliSense」をインストール
・「Xdebug」のインストール
・「Xdebug」の環境を設定
ちょっと多いように感じますが、実際は結構簡単な作業になります。
では、上から順に作業の内容をご説明致します。
「Visual Studio Code」のインストール方法
下記URLより最新版の「Visual Studio Code」をダウンロードします。
Download Visual Studio Code
インストール時には、特に設定は変えずに「次へ」を押して下さい。
ソフトを起動する頻度が高い場合は、デスクトップにショートカットを作成しても良いかもしれません。
ここまでの作業で「Visual Studio Code」のインストールは完了となります。
「XAMPP」のインストール方法
「XAMPP」のインストール方法に関しては、私が以前に書いた下記記事を参考にして下さい。
上記記事の「XAMPP」のインストールまでの作業を実施するだけで大丈夫です。
「Visual Studio Code」と「XAMPP」を紐づけるための環境設定方法
「Visual Studio Code」を起動します。
画面左下の歯車のアイコンからメニューを開いて「設定」の項目を選択します。
「設定」の項目を押すと、画面左に「規定の設定」、画面右に「ユーザー設定」の画面が表示されます。
画面右の「ユーザー設定」に下記の記述を行います。
|
1 2 3 4 5 6 7 8 9 10 11 |
"php.validate.executablePath": "C://xampp//php//php.exe", "php.executablePath": "C://xampp//php//php.exe", "php.suggest.basic": false, "workbench.iconTheme": "vs-minimal", "files.autoSave": "afterDelay", "editor.minimap.enabled": true, "window.menuBarVisibility": "default", "git.ignoreMissingGitWarning": true, "editor.renderWhitespace": "none", "editor.renderControlCharacters": false, "window.zoomLevel": 0 |
ここまでの作業で「Visual Studio Code」と「XAMPP」を紐づけるための環境設定は完了となります。
「Visual Studio Code」の拡張機能「PHP IntelliSense」のインストール方法
「Visual Studio Code」の画面の左側のサイドバーにアイコンが5つほどありますので、5つ目の四角いアイコンをクリックします。
四角いアイコンをクリックすると、拡張機能検索用のテキストボックスが表示されます。
テキストボックスに「PHP IntelliSense」と入力すると自動で検索候補が出てきますので「PHP IntelliSense」を探してインストールのボタンを押します。
インストールボタンを押すと、自動でインストールが完了します。
ここまでの作業で「PHP IntelliSense」のインストールは完了となります。
「Xdebug」のインストール方法
「Visual Studio Code」と「XAMPP」で「Xdebug」を使うためには、下記の二つの作業が必要となります。
・「Visual Studio Code」への「PHP Debug」のインストール
・「XAMPP」への「Xdebug」のインストール
上記のインストール方法を順にご紹介致します。
「Visual Studio Code」への「PHP Debug」のインストール方法
「Visual Studio Code」のインストールと同じように、拡張機能の検索で「PHP Debug」を検索してインストールします。
インストールボタンを押すと、自動でインストールが完了します。
「Visual Studio Code」側の作業はこれで完了となります。
「XAMPP」への「Xdebug」のインストール方法
「XAMPP」への「Xdebug」のインストールを行う際には、Xdebugの公式サイトよりライブラリのダウンロードを行う必要があります。
ダウンロードするライブラリはXAMPPのPHPのバージョンによって変わってきますので、まずはXAMPPのPHPのバージョンを確認してみましょう。
XAMPPのApacheとMySQLのStartボタンを押してローカルサーバーを起動します。
サーバーを起動したら、下記のURLをブラウザで開きます。
http://localhost/dashboard/phpinfo.php
すると、下記のような画面が出てきますので、画面の上部に書かれているPHPのバージョンを確認します。
※PHPのバージョンが7.0以下の場合は、本記事の内容では設定が足りない可能性があります。そのため、本記事を参考にしてXdebugを導入する際は、XAMPPのPHPのバージョンを7.0以上にして下さい。
私が使っているXAMPPのPHPのバージョンは7.2.2であることがわかりました。
次に、Xdebugの公式サイトより、ライブラリのダウンロードを行います。
下記URLにアクセスして、PHPのバージョンに対応したライブラリをダウンロードします。
https://xdebug.org/download.php
私の場合は下記のライブラリをダウンロードしました。
※ダウンロードするファイルの末尾が「TS」かつ「32bit」のものをダウンロードしてください。
ダウンロードしたファイルを「php_xdebug.dll」にリネームして、xamppのphpフォルダ内のextフォルダに格納します。
ここまでの作業で「XAMPP」への「Xdebug」のインストールは完了となります。
次に「Xdebug」の環境設定を行います。
「Xdebug」の環境設定方法
「Xdebug」を有効にするためには、php.iniファイルを編集する必要があります。
php.iniファイルをテキストエディタで開いて、下記の文言をファイルの最下部に追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[XDebug] zend_extension = "C:\xampp\php\ext\php_xdebug.dll" xdebug.profiler_append = 0 xdebug.profiler_enable = 1 xdebug.profiler_enable_trigger = 0 xdebug.profiler_output_dir = "C:\xampp\tmp" xdebug.profiler_output_name = "cachegrind.out.%t-%s" xdebug.remote_enable = 1 xdebug.remote_autostart = 1 xdebug.remote_handler = "dbgp" xdebug.remote_host = "127.0.0.1" xdebug.remote_port = 9000 xdebug.auto_trace = 1 xdebug.trace_output_dir = "C:\xampp\trace" xdebug.idekey = "phpstorm" |
php.iniファイルの編集が終わりましたら、再度下記のURLをブラウザで表示します。
http://localhost/dashboard/phpinfo.php
ページ内に「xdebug」の記述があれば、正常にライブラリが読み込めています。
ここまでの作業で全てのインストールの作業が完了となります。
続いて、「Visual Studio Code」のデバッグ環境を整える方法に関して記載していきます。
「Visual Studio Code」のデバッグ環境を整える方法
XAMPPにアクセスする「htdocs」内に作業用のフォルダを作成します。
今回は「php_test」というフォルダを作成して、フォルダ内には「test.php」のファイルを格納しました。
「Visual Studio Code」の画面に戻り、左側のサイドバーの5つのアイコンの1つ目のアイコンを選択します。
フォルダーを開くボタンを選択します。
作業用のフォルダを選択します。
フォルダの読み込みが完了しましたら、再度左側のサイドバーの1つ目のアイコンを選択します。
すると、選択したフォルダの内容がエクスプローラーの項目に表示されます。
「test.php」を選択すると、画面の右側にコードが表示されます。
この状態で、キーボードのF5ボタン（デバッグの開始）を押します。
すると、環境の選択が表示されますので「PHP」を選択します。
「PHP」を選択すると「.vscode」というフォルダが自動で生成されます。
※「.vscode」にはデバッグに必要なファイルが格納されていますので、削除はしないように注意して下さい。
これで、デバッグができる環境が整いました！
「Visual Studio Code」でデバッグを実行する方法
デバッグを行う際には、ブレイクポイントを設定する必要があります。
※「ブレイクポイント」は処理を一旦止めるポイントのことです。
「Visual Studio Code」のエクスプローラーの欄から、実行するファイルを選択します。
ファイルを選択すると、右側にソースコードが表示されます。
ソースコード内の処理を止めたい行を選択して、F9ボタン（ブレイクポイントの設置）を押します。
F9ボタンを押すと、行の先頭に赤い丸が表示されます。
ブレイクポイントの設定はこれで完了となります。
ブレイクポイントを設定した状態で、再度F5ボタン（デバッグの開始）を押します。
F5ボタンを押すと、先ほどまでエクスプローラーを表示していた項目が「デバッグ」に変化します。
デバッグのドロップダウンリストを「Launch currently open script」に変更します。
この状態で、デバッグを行うファイルをブラウザでアクセスします。
アクセスした後に「Visual Studio Code」を見ると、ブレイクポイントを設定した位置で処理が止まります。
これで、PHPの処理を止める事ができましたので、その時点での変数の値を確認したり、ステップ実行をして行ごとの動きを確認したりと、デバッグ作業が行えるようになります！
以上で「Visual Studio Code」へのデバッグ環境の設定が完了となります！
デバッグ機能を使って、より良いコードを作っていきましょう！
ではまた！
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
コメント
この記事へのトラックバックはありません。
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
わかりやすかったです。
一点、extフォルダに php_xdebug.dll をコピーしたあと、phpinfo.php をリロードすると xdebugが表示される、というように読めますが、実際は その後述の『「Xdebug」の環境設定方法』を実施しないとxdebugモジュールの表記は出ないので、ここで戸惑う方がおられるかもしれない、と感じました。
コメントをいただきまして、ありがとうございます！
ご指摘の通り、順番が前後していて分かりづらい記述となっておりましたので、記事を編集致しました。