記事の詳細

今回は、弊社社長がPHPのコードをデバッグする際に「超便利!」と太鼓判を押す「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

インストール時には、特に設定は変えずに「次へ」を押して下さい。
ソフトを起動する頻度が高い場合は、デスクトップにショートカットを作成しても良いかもしれません。
VSCodeのインストール時のオプション選択

ここまでの作業で「Visual Studio Code」のインストールは完了となります。
VSCodeインストール

「XAMPP」のインストール方法

「XAMPP」のインストール方法に関しては、私が以前に書いた下記記事を参考にして下さい。

はじめまして、網干と申します。本日は表題の通り、XAMPPで仮想環境を構築してwordpressをインストールする方法を掲載します。※本記事ではセキュリティの設定を考慮して...

上記記事の「XAMPP」のインストールまでの作業を実施するだけで大丈夫です。

「Visual Studio Code」と「XAMPP」を紐づけるための環境設定方法

「Visual Studio Code」を起動します。
画面左下の歯車のアイコンからメニューを開いて「設定」の項目を選択します。
VSCode設定

「設定」の項目を押すと、画面左に「規定の設定」、画面右に「ユーザー設定」の画面が表示されます。
画面右の「ユーザー設定」に下記の記述を行います。
VSCode環境設定

ここまでの作業で「Visual Studio Code」と「XAMPP」を紐づけるための環境設定は完了となります。

「Visual Studio Code」の拡張機能「PHP IntelliSense」のインストール方法

「Visual Studio Code」の画面の左側のサイドバーにアイコンが5つほどありますので、5つ目の四角いアイコンをクリックします。
VSCode拡張機能

四角いアイコンをクリックすると、拡張機能検索用のテキストボックスが表示されます。
VSCode拡張機能検索

テキストボックスに「PHP IntelliSense」と入力すると自動で検索候補が出てきますので「PHP IntelliSense」を探してインストールのボタンを押します。
VSCodeのPHPIntelliSenseインストール

インストールボタンを押すと、自動でインストールが完了します。

ここまでの作業で「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」を検索してインストールします。
VSCodeのXDebugインストール

インストールボタンを押すと、自動でインストールが完了します。
「Visual Studio Code」側の作業はこれで完了となります。

「XAMPP」への「Xdebug」のインストール方法

「XAMPP」への「Xdebug」のインストールを行う際には、Xdebugの公式サイトよりライブラリのダウンロードを行う必要があります。
ダウンロードするライブラリはXAMPPのPHPのバージョンによって変わってきますので、まずはXAMPPのPHPのバージョンを確認してみましょう。

XAMPPのApacheとMySQLのStartボタンを押してローカルサーバーを起動します。
XAMPP起動

サーバーを起動したら、下記のURLをブラウザで開きます。
http://localhost/dashboard/phpinfo.php

すると、下記のような画面が出てきますので、画面の上部に書かれているPHPのバージョンを確認します。
PHPバージョンチェック

※PHPのバージョンが7.0以下の場合は、本記事の内容では設定が足りない可能性があります。そのため、本記事を参考にしてXdebugを導入する際は、XAMPPのPHPのバージョンを7.0以上にして下さい。

私が使っているXAMPPのPHPのバージョンは7.2.2であることがわかりました。

次に、Xdebugの公式サイトより、ライブラリのダウンロードを行います。
下記URLにアクセスして、PHPのバージョンに対応したライブラリをダウンロードします。
https://xdebug.org/download.php

私の場合は下記のライブラリをダウンロードしました。
XDebugライブラリダウンロード

※ダウンロードするファイルの末尾が「TS」かつ「32bit」のものをダウンロードしてください。

ダウンロードしたファイルを「php_xdebug.dll」にリネームして、xamppのphpフォルダ内のextフォルダに格納します。
XDebugのライブラリ格納

ここまでの作業で「XAMPP」への「Xdebug」のインストールは完了となります。
次に「Xdebug」の環境設定を行います。

「Xdebug」の環境設定方法

「Xdebug」を有効にするためには、php.iniファイルを編集する必要があります。
phpiniファイルの場所

php.iniファイルをテキストエディタで開いて、下記の文言をファイルの最下部に追記します。
phpiniのXDebug記載箇所

php.iniファイルの編集が終わりましたら、再度下記のURLをブラウザで表示します。
http://localhost/dashboard/phpinfo.php

ページ内に「xdebug」の記述があれば、正常にライブラリが読み込めています。
XDebugのインストール成功時の表示

ここまでの作業で全てのインストールの作業が完了となります。

続いて、「Visual Studio Code」のデバッグ環境を整える方法に関して記載していきます。

「Visual Studio Code」のデバッグ環境を整える方法

XAMPPにアクセスする「htdocs」内に作業用のフォルダを作成します。
今回は「php_test」というフォルダを作成して、フォルダ内には「test.php」のファイルを格納しました。
テストファイル

「Visual Studio Code」の画面に戻り、左側のサイドバーの5つのアイコンの1つ目のアイコンを選択します。
VSCodeファイル選択

フォルダーを開くボタンを選択します。
VSCodeフォルダ選択

作業用のフォルダを選択します。
VSCodeフォルダ選択の例

フォルダの読み込みが完了しましたら、再度左側のサイドバーの1つ目のアイコンを選択します。
すると、選択したフォルダの内容がエクスプローラーの項目に表示されます。
VSCodeファイル選択

「test.php」を選択すると、画面の右側にコードが表示されます。
VSCodeのエディタ

この状態で、キーボードのF5ボタン(デバッグの開始)を押します。
すると、環境の選択が表示されますので「PHP」を選択します。
VSCodeのデバッグ環境設定

「PHP」を選択すると「.vscode」というフォルダが自動で生成されます。
※「.vscode」にはデバッグに必要なファイルが格納されていますので、削除はしないように注意して下さい。
jsonファイルの自動生成

これで、デバッグができる環境が整いました!

「Visual Studio Code」でデバッグを実行する方法

デバッグを行う際には、ブレイクポイントを設定する必要があります。
※「ブレイクポイント」は処理を一旦止めるポイントのことです。

「Visual Studio Code」のエクスプローラーの欄から、実行するファイルを選択します。
VSCodeのファイル選択

ファイルを選択すると、右側にソースコードが表示されます。
ソースコード内の処理を止めたい行を選択して、F9ボタン(ブレイクポイントの設置)を押します。
F9ボタンを押すと、行の先頭に赤い丸が表示されます。
VSCodeのブレイクポイント設定

ブレイクポイントの設定はこれで完了となります。

ブレイクポイントを設定した状態で、再度F5ボタン(デバッグの開始)を押します。
F5ボタンを押すと、先ほどまでエクスプローラーを表示していた項目が「デバッグ」に変化します。
VSCodeのデバッグメニュー

デバッグのドロップダウンリストを「Launch currently open script」に変更します。
VSCodeのデバッグ環境選択

この状態で、デバッグを行うファイルをブラウザでアクセスします。
テストファイルへのアクセス

アクセスした後に「Visual Studio Code」を見ると、ブレイクポイントを設定した位置で処理が止まります。
VSCodeのブレイクポイント停止状態

これで、PHPの処理を止める事ができましたので、その時点での変数の値を確認したり、ステップ実行をして行ごとの動きを確認したりと、デバッグ作業が行えるようになります!

以上で「Visual Studio Code」へのデバッグ環境の設定が完了となります!

デバッグ機能を使って、より良いコードを作っていきましょう!

ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. アバター
    • 山崎晴可
    • 2018年 8月 27日

    わかりやすかったです。
    一点、extフォルダに php_xdebug.dll をコピーしたあと、phpinfo.php をリロードすると xdebugが表示される、というように読めますが、実際は その後述の『「Xdebug」の環境設定方法』を実施しないとxdebugモジュールの表記は出ないので、ここで戸惑う方がおられるかもしれない、と感じました。

  2. 網干 裕介
    • 網干 裕介
    • 2018年 8月 27日

    コメントをいただきまして、ありがとうございます!
    ご指摘の通り、順番が前後していて分かりづらい記述となっておりましたので、記事を編集致しました。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る