WSL + Ubuntu + PHP + xdebug + Visual StudioCode + PHP DebugでPHPの学習環境構築

前提
  • OSがWindows 10 Proであること。
  • WSLを有効化していること。
  • WSLにUbuntuインストール済みであること。
  • WSLのUbuntuPHPインストール済みであること。
  • ローカル環境にVisual Studio Codeインストール済みであること。

Ubuntuphp-xdebugをインストール

sudo apt install php-xdebug

php-xdebugの設定ファイルを修正

vi で設定ファイルを開く

sudo vi /etc/php/7.2/cli/conf.d/20-xdebug.ini

設定ファイルの内容を以下のように修正

zend_extension=xdebug.so
xdebug.remote_enable=on
xdebug.remote_autostart = 1

Visual Studio CodePHP Debugをインストール

赤色の枠の部分をクリックしていく。

PHP Debugをインストールする様子
PHP Debugをインストール

Visual Studio CodeにインストールしたPHP Debugの設定

設定ファイル(.vscode/launch.json)は、歯車マークをクリックして開けられる

PHP Debugの設定ファイルの開き方
PHP Debugの設定ファイルの開き方

設定ファイル(.vscode/launch.json)を以下のように修正

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "php local debug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/mnt/c":"c:/"
            }
        }
    ]
}

準備OK!デバッグ実行してみよう。

  • 赤〇で囲った虫を押下。
  • オレンジで囲ったところをクリックしてブレークポイントを指定
  • 緑で囲ったところを「php local debug(ここはlaunch.jsonに指定したnameが表示される)」に変更して再生ボタンを押下
  • 水色で囲った部分にターミナルを表示しておく(ここでプログラムの実行を行う)

PHP Debugの準備
PHP Debugの準備

プログラムは以下の通り

<?php

echo "hello\n";
echo "hello\n";

$test = "test";

$number = 100;

$number2 = 200;

$number3 = $number + $number2;

プログラム実行してみる。

wsl php echo.php

PHP Debugのブレークポイントで止まった様子
PHP Debugのブレークポイントで止まった様子

ブレークポイントで止まった。

ステップオーバーしてみる。

赤〇で囲ったのアイコンをクリックして、1行ステップオーバー(プログラムが1行進む)

ステップオーバーの様子
ステップオーバーの様子

オレンジ色で囲ったところで変数の中身も確認できる。

感想

apacheをインストールする必要もなく、 簡単にできた。

こんな感じでPHPがステップ実行できると、 プログラム初級の部分(変数・演算・分岐・ループ・関数)で躓きにくくなるかもしれない。

改めて、Visual Studio Code の凄さを実感。

これが無償で利用できるなんて。。。

参考

togetter.com

togetter.com

togetter.com

参考にしたサイト

Setting up PHP for development on Windows Subsystem for Linux in Windows 10 | Tim Anderson's IT Writing