PHP 初心者が WordPress の プラグイン 作成 ! part09 (開発 デバッグ)

この記事では PHP 初心者 が WordPress プラグイン を 作成 します。 part09 では実際にPHPのデバッグを行います。

前回はVS Codeの設定を行い、実際いDockerコンテナを生成しコンテナ内で作業できることを確認しました。
PHP 初心者が WordPress の プラグイン 作成 ! part08 (VS Code設定)

警告が1つ、エラーが1つ出ましたね😣
そのうち警告の意味が分かりました。

Filesharingの警告

Filesharingの警告はWindows(ホスト)のフォルダとコンテナ内(ゲスト)のディレクトリを
結びつけたため、Dockerが「結びつけたフォルダはパフォーマンスが悪いからやめたほうがいい」
という警告をしていたようです。

WSL2+VSCode Dev ContainerでFilesharingの警告 – Qiita

実際の定義はdocker-compose.ymlの以下のvolumesの部分です。

- ./src:/var/www/html
- ./docker/mysql/lib:/var/lib/mysql
- ./docker/mysql/sql:/docker-entrypoint-initdb.d
- ./docker/phpmyadmin/sessions:/sessions

上記のうち、./src:/var/www/htmlはとても重要な紐づけなのです。
何も定義していないとコンテナ内でフォルダやファイルはコンテナ内でしか生きられません。
コンテナを消去すると当然がんばって作ったファイルは消えてなくなってしまうのです。
このvolumesでホスト側と結びつけておけばコンテナが消滅してもホスト側に作ったフォルダやファイルは残るので安心です。

今回はこの警告を無視することにしました!

エラーの件は・・・また考えます(笑

開発

では前回の続きです。

まずポートがフォワードされているか確認しましょう。
パネルのポートのタブを確認を確認します。

まだパネルが表示されていない場合は表示→外観→パネルを表示をクリック。

するとVS Codeの右下ペインにパネルが表示されます。
そのパネルの「ポート」をクリック。

2つのアイテムが表示され、1つ目のアイテムがグリーンになっていますね。
1つ目はIPv4のポート転送、2つ目はIPv6のポート転送でしょうか。
IPv6のことはよくわからないのでIPv4だけ使えれば問題なし!

すでにDockerコンテナ内でapacheが起動していてWindwosから8099でアクセスができることを示しています。
早速Windowsのブラウザでアクセスしてみましょう。
URLは「http://localhost:8099」です。

おお!hogeと表示されましたね。
上記の画像のように表示されれば成功です。
VS Codeに戻り左ペインから「index.php」をクリックします。

先ほどのhogeはこのindex.phpの処理結果ですね。
3行目の"hoge"を"ほげ"に修正して保存し、再度ブラウザで確認してみましょう。

<?php
$a = 1;
if ($a === 1) {
    echo "ほげ";
} else {
    echo "fuga";
}
?>

見事「ほげ」になりました。

 

デバッグ

この状態はまだデバッグできる状態ではありません。
デバッグを行うには「実行とデバッグ」のアイコンをクリックします。

すると事前に組み込んだ「.vscode/launch.json」が読み込まれてデバッグできる状態になっているはず・・・

なっていないですね😓
これはlaunch.jsonファイルが存在しない状態です。おかしい・・・
「.vscode/launch.json」をよく見るとわかりました。スペルミスです😇

正しくは「configurations」です。
修正し保存後、「実行とデバッグ」アイコンをクリック。
「実行とデバッグ」ボタンをクリックするとようやく目当ての画面が出ました。

と、同時に以下のようなインフォメーションも表示されます。

私は「アクセスを許可する」をクリックしました。

次にVS Codeからのメッセージ

びっくりして×で決してしまいました(笑
まあ大丈夫でしょう。

ポートのタブを確認しておきます。
9003のアイテムがグリーンで追加されていますね。
これで大丈夫なはず!

VS Codeのエディタ上部にデバッグツールが表示されました。
index.phpの3行目にブレークポイントを設置しましょう。
行番号の左側をクリックします。すると赤い丸が付与されました。
これでデバッグ準備完了です。

再度「http://localhost:8099」にブラウザでアクセスします。
すると、VS Codeが「おいでおいで」し始めます((´∀`))

クリックしてVS Codeのウィンドウを表示すると・・・
3行目に黄色の帯が表示されています。
この行で処理が停止している証拠です。

$aにマウスを重ねると「1」と表示されました!
完璧ですね。用事がすんだらデバッグツールで「続行」アイコンをクリックします。

そうすると次のブレークポイントまで処理が進みます。
今回の場合は次のブレークポイントは無いので処理完遂します。(デバッグモードは継続しています。)

大事なこと

そうそう、いまのうちにこの設定をしておきましょう。
Laravelでの開発を行う場合、このままではエラーとなってしまう場合があります。
どんなエラーだったか・・・たしか payload なんちゃらでした。
この解決法で正しいかわかりませんがご紹介します。

VS Codeのデバッグ画面の左ペイン下に「ブレークポイント」の一覧が表示されています。
この一覧の「Everything」にチェックがついている場合は外しておきましょう。

終了

デバッグ停止

デバッグを終えるときはデバッグツールの「停止」アイコンをクリックします。

デバッグは終了しますがapacheは終了しません。

VS Code終了

現在Dockerコンテナ上での開発を行っている状態です。
なのでDockerコンテナから抜ける必要があります。

左下のグリーンのエリアをクリックします。

すると、コマンド一覧が表示されるので「リモート接続を終了する」をクリックします。

VS Codeのトップ画面(?)に戻ることができます。
この後は普通に×をクリックでVS Codeを終了します。

 

まとめ

VS Codeを使って簡単な開発やデバッグができることを確認しました。
一部定義ファイルが誤っていて焦りましたが何とか修正することができました。

以前の記事も修正しておきます(´・ω・`)

今日はここまで!