【WordPress】LaragonでXdebug3+vscodeのデバッグ環境を準備する方法

アフィリエイト広告を利用しています

Web

こちらではLaragonでローカル環境にインストールしたwordpressにてXdebugを準備/設定する方法を解説します。
(以下の記事はXdebug3を準備する記事です。少し昔のXdebug2は解説していません。)

Laragonに関しては以下もご参照ください。

Xdebugとは?

「Xdebug」は、PHPのデバッグ用の拡張モジュールです。

Xdebugを使うとphpファイルの特定の行で実行を一時停止して変数・配列・オブジェクトの中身を確認できたり、一行ずつ実行できたり(ステップ実行)できたりするので効率よくデバッグできます。

いちいちprint_rやechoで変数の中身を調査しなくてよくなります。

Xdebugの準備の流れ

  1. インストールされているphp情報を取得しコピーする
  2. php情報を元にXdebugをダウンロードする
  3. Xdebugを所定のフォルダに置く
  4. php.iniにXdebugを読むよう追記する
  5. vscodeにXdebugを設定する

以下から詳細にXdebugの設定方法を解説します。

1.インストールされているphp情報を取得しコピーする

まず、Laragonにインストールされているphp情報を取得します。

Laragonを起動し、「ターミナル」を開いて以下を入力し、Enterを押します。

> php --info | clip

するとクリップボードにphp情報がコピーされて、テキストとしてコピーしたphp情報が貼り付けられるようになります。

2. php情報を元にXdebugをダウンロードする

Xdebugの以下のページにアクセスします。

Xdebug: Support — Tailored Installation Instructions
Xdebug: A powerful debugger for PHP

1.でコピーしたphp情報を貼り付けて2.「Analyse my phpinfo() output」を押します。

するとlaragonにインストールされているphpに適したXdebugのダウンロードリンクが表示されるのでこれをクリックしてXdebugをダウンロードします。

3.Xdebugを所定のフォルダに置く

Laragonに戻り、メニュー>PHP>dir:extをクリックします。
すると、PHPの拡張機能が置かれたフォルダが開きます。
(PHP8.1の場合はC:\laragon\bin\php\php-8.1.7-Win32-vs16-x64\extが開く)

このフォルダにダウンロードしたXdebugを置いて、php_xdebug.dllに名前を変更します。

4.php.iniにXdebugを読むよう追記する

Laragonのメニュー>PHP>dir:extで開いたフォルダの上位のフォルダ
(PHP8.1の場合はC:\laragon\bin\php\php-8.1.7-Win32-vs16-x64)
に移動すると、php.iniファイルがありますのでこれをvscodeなどで開きます。
(もしくは メニュー>PHP> php.ini にてnotepadで開けます。 )

以下をphp.iniに追記して保存します。

zend_extension = xdebug
xdebug.mode = debug
xdebug.start_with_request = yes


これでxdebugが起動できるようになります。

5.vscodeにXdebugを設定する

vscodeを開き、左の拡張機能アイコン>php debugで検索すると拡張機能「PHP Debug」が現れます。
これをインストールしてください。

次にLaragonでインストールしたwordpressフォルダをvscodeで開いて、
さらに「wp-blog-header.php」などのphpファイルを開きます。

その上で
左の虫▷アイコン> launch.jsonファイルを作成します
をクリックすると、デバッグ設定ファイルであるlaunch.jsonが作成されます。

あとは1.プログラムの実行を止めたい行番号左をクリックして「ブレイクポイント」を置き、
2.▷をクリックしてXdebugを起動します。

wp-blog-header.phpの8行目に置き、Xdebugを起動後WordPressにアクセスした場合、
以上のようにブレイクポイントにて実行が一時停止されます。

Xdebugが正常に動作していることがわかります。

元講師&現役エンジニアがおすすめプログラミングスクールを詳細解説!

正直プログラミングは独学でもなんとか習得できますが、スクールに通ったほうが断然習得が早く、実務的なスキルが身につきます。

独学で疲弊している方やプログラミングで手に職をつけたい方はスクールを検討してみませんか?

プログラミングスクールの講師を経験した現役エンジニアが他のサイトにはない視点でプログラミングスクールの詳細やおすすめのスクールを徹底解説!

WebWordPressプログラミング--環境回り
xingxingをフォローする
tech x note |

コメント