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

前提

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

Ubuntuにphp-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 CodeにPHP Debugをインストール

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

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

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

設定ファイル（.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

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

$test = "test";

$number = 100;

$number2 = 200;

$number3 = $number + $number2;

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

wsl php echo.php

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

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

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

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

感想

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

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

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

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

参考

togetter.com

参考にしたサイト

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

developer's diary

最近はc#のエントリが多いです