n-Archives.net

VSCodeを使ったPHPのデバッグ環境をWindows10に構築する方法(2/2)

Table of Contents

前のページ   1    2   次のページ

 

本記事は、「VSCodeを使ったPHPのデバッグ環境をWindows10に構築する方法」の2回目です。前回の記事では、PHPデバッグ環境の全体像、XAMPPのインストール、Xdebugのインストールまでを行いました。それに続き今回は、Visual Studio Code のインストール、PHP Debugのインストール、そしてデバッグの実行まで、解説したいと思います。

前回記事:VSCodeを使ったPHPのデバッグ環境をWindows10に構築する方法(1/2)

 

Visual Studio Codeの各種設定

Visual Studio CodeはMicrosoftが開発した無料で公開されているエディタです。リファクタリングなどのコード作成支援機能や多数の拡張機能が提供されているなど、高度な機能を持っていますが、デバッグやGitとの連携なども可能な統合開発環境となっています。今回Visual Studio Codeで PHPのstep debugging の環境を構築してみます。

 

VSCode のインストール

まず、以下のページを参考にVisual Studio Codeをインストールしてください。

記事:Visual Studio CodeをWindows10にインストールする方法

 

インストールできたら起動してみてください。以下のような画面が表示されればOKです。

 

PHP Debug のインストール

VS Code に PHP Debugをインストールします。VS Code を起動して、画面左端のアクティビティバーに縦に並ぶアイコンの一番下、Extension アイコンをクリックします。表示されるサイドバーの一番上に検索欄が表示されるので、そこに "PHP debug" と入力します。

 

PHP Debug は複数表示されますが、Felix Beckerさんの PHP Debugをインストールしますので、青い Installボタンをクリックします。

 

PHP Debugのインストールが完了すると以下のような画面になります。この画面を下にスクロールすると、デバッグ環境の設定に必要な情報が細かく記載されています。英語なのですが、本記事で史説明する内容よりさらに詳細な情報が記載されているので、詳細を確認したい方は読んでみることをお勧めします。

 

PHP Debugのインストールは以上で終わりです。

 

ドキュメントフォルダの設定

次にデバッグ対象のソースファイルが格納されているドキュメントフォルダをオープンします。

注意いただきたいのは、VS Codeでデバッグを行う場合、1ファイル単体で編集を始めただけでは、デバッグは行えない点です。「フォルダ」の単位(またはワークスペースの単位)でオープンする必要があります。今回のような HTML/PHPのドキュメントの場合、DocumentRoot をフォルダとしてオープンするのが一般的な方法です。今回の例ですと、Apache の DocumentRoot は、D:\path\to\htdocs としていますので、そのフォルダをオープンします。(「ワークスペース」とは、複数のフォルダから構成される作業空間です。)

 

早速フォルダをオープンします。アクティビティバーの一番上、Explorer アイコンをクリックします。青い「Open Folder」ボタンをクリックし、ダイアログ画面で、D:\path\to\htdocs を選択します。(または、メニューから File → Open Folder... )

 

htdocs フォルダがオープンされました。サイドバーに HTDOCSが表示されていることが分かります。

 

オープンしたフォルダは、デフォルトで Restricted Mode になっています。上図画面の左下に Restricted Mode となっているのが分かります。デバッグを実行するためには、これを 「Trusted」 にする必要があります。

この Trusted の設定は、デバッグなどにおいて、信頼されていないコードが勝手に実行されることがないようにするための仕組みで、各フォルダが信頼できるものかをユーザに確認するためのものとなっています。このWorkspace Trust機能は、2021/6月ごろリリースされたv1.57から導入された機能となっており、最近急にデバッグができなくなったといった方も多いようですので、ご注意ください。

 

フォルダをTrusted にするには、フォルダが開かれた状態で、画面の一番左下の「Restricted Mode」となっている箇所をクリックします。すると、このフォルダを Trusted にするかどうか確認する画面が表示されます。問題なければ、Trustボタンをクリックします。

 

フォルダが Trusted に設定されました。画面左下の Restricted Mode という表示が消えました。

 

launch.json の作成

さて次に、VS Code のデバッグ実行に関連する設定ファイルである launch.json の作成を行います。この launch.json ファイルは、オープンしたフォルダ直下の .vscode\launch.json に作成されます。

 

設定方法は、初めてlaunch.jsonを作成するか、既存のlaunch.jsonに設定を追加するかによって変わってきます。既にlaunch.jsonが作成されているが、最初から作り直したい、という場合は、.vscode\launch.json を削除しておくこともできます。

 

(1) 初めてlaunch.json を作成する場合

まず、デバッグしたいソースファイルを開きます。通常はPHPファイル *.php を選択することになると思いますが、以下の例では、DocumentRoot直下にある index.html というファイルを開いています。 その場合、1つ確認が必要です。PHPのデバッグを開始するためにはファイルの Language Mode を PHPにしておく必要があります。右下の青い部分に "HTML" と書かれている箇所をクリックし、メニューからPHPを選択します。(この設定は私の個人的な環境による作業です。*.htmlにPHPを記述していない方はこの作業は不要です。)

PHPを選択します。

右下に表示されているLanguage Modeが PHPに変わりました。

なお、VS Code の設定で自動的に .html ファイルを PHPモードとして認識するようにするには以下の記事をご覧ください。

記事:Visual Studio Codeで html ファイルをPHPモードにする方法

 

次に、アクティビティバーの上から4番目の Run and Debug アイコンをクリックします。launch.jsonが存在しないと、以下のような画面となります。

サイドバーに表示されている「create a launch.json file」 をクリックするか、メニューから Run → Add Configuration... を選択します。

 

すると自動的に launch.json ファイルが作成され、その内容がエディタ画面に表示されます。

 

launch.json に以下の内容の構成が登録されていることを確認します。上図では一番最初に登録されていることが分かります。なお、Xdebugが 2.X.X の場合はportを 9000に修正してください。

          {
             "name": "Listen for XDebug",
             "type": "php",
             "request": "launch",
             "port": 9003,
         }, 

これで、launch.json の作成は完了です。

 

(2) 既存のlaunch.json に設定を追記する場合

 

既にPHP以外のデバッグの目的で launch.json が存在する場合は、今回PHPのデバッグ構成を追記する必要があります。

メニューから Run → Open Configurations を選択します。launch.json の編集画面が開きますので、以下の構成情報を追加してください。

          {
             "name": "Listen for XDebug",
             "type": "php",
             "request": "launch",
             "port": 9003,
         }, 

Xdebugが 2.X.X の場合はportを 9000に修正してください。

これで、launch.json の作成は完了です。

 

ブレークポイントの設定

デバッグ実行を開始する前に、ブレークポイントをあらかじめ設定します。今回デバッグしたいソースコードの箇所にブレークポイントを設定します。

以下の例では、index.html の 2行目にブレークポイントを設定しています。ブレークポイントには、行番号の左側に赤い●が付きます。赤い●の個所をクリックすると、ブレークポイントの設定/解除がトグル可能です。

 

デバッグの待ち受け開始

次に、VS Codeが、Xdebugからデバッグ情報が送信されるのを待ち受ける状態にします。

アクティビティバーの上から4番目の Run and Debug アイコンをクリックします。サイドバーの上部に、デバッグ構成を選択するメニューがあるので、"Listen for Xdebug" (下図では文字列の最後が切れてますが)を選択します。そして、その左側に緑色の右向き三角印があるので、それをクリックして待ち受けを開始します。(または、Run → Start Debugging)

 

するとWindowsの設定によっては、以下の確認ダイアログが表示されます。VS Code にネットワーク通信を許可してよいか聞かれますので、通常はデフォルトの設定のまま(プライベートネットワークのみ通信を許可する)とし、「アクセスを許可する」ボタンをクリックします。

 

待ち受けがうまく開始されると、エディタ画面の上部真ん中に、ステップでバッギングを制御するボタンが表示されます。また、一番下のステータス行がオレンジになり、 "Listen for debug (htdocs)" と表示されていることが分かります。

 

これで、デバッグの待ち受けが完了しました。

 

デバッグの実行(HTTPリクエストの送信)

全て準備ができたら、実際にブラウザでページの表示を実行してみます。

以下の例では、同じPCのブラウザから、http://localhost/index.html を表示しようとしています。localhostとは、ブラウザが実行されているPC自身を指します。

 

ブラウザから上記リクエストを送信した瞬間、VS Code 側でブレークポイントで実行が停止した状態になります。この状態で、サイドバーには、使われている変数の値やコールスタックの状態が表示されます。

 

後は、画面上部中央に表示されているステップデバッグのボタン、Continue/Step over/Step out/Step in/Restart/Stop で実行をステップ実行させることができます。1行実行を進めると、変数の値も変わります。

 

ブレークポイントの設定、ウォッチ式、など、あらゆるデバッグ機能を利用することができます。

デバッグが終わり、待ち受けを解除するためには、Stopボタン(オレンジの四角ボタン)をクリックします。

 

快適なPHPデバッグを是非お試しください。

 

前のページ   1    2   次のページ

 

 

Related Articles

 

Submit your comment
Name:
Comment:
Submission type:



Submitted comments will be processed manually. So, please understand it will take about a day to publish your comment.