1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

初学者の登竜門のひとつ「Xdebugの導入」sailを使用したプロジェクト

Posted at

はじめに

Xdebugって導入難しすぎません?
初学者の皆さんどうですか? 自力でできました?
記事通りにやってもうまくいかないし、、、

やっとできたので備忘録で取っておきます。

※laravel sailを使用をしようしてdockerを使ったデバックの記事になります。
※vscodeの拡張「php debug」のインストールは済ませること。
※Xdebugのバージョンは3になります。2だと設定が違います。確認はphpinfo関数を使用してください。

.envファイルに以下2行追加

SAIL_XDEBUG_MODE=develop,debug,
SAIL_XDEBUG_CONFIG="client_host=host.docker.internal"

xdebug.iniファイルを作成

/自分のプロジェクト/vendor/laravel/sail/runtimes/今回のPHPのバージョン/ここに作成

image.png

※vendorフォルダがない場合は以下のコマンドを実行

composer install

※バージョンがわからない場合は、
image.png
プロジェクト直下にあるdocker-compose.ymlのcontext:の右に書かれている最後の8.3がバージョンになる。
 
/自分のプロジェクト/vendor/laravel/sail/runtimes/今回のPHPのバージョン/ここに

xdebug.iniを作成し、ファイル内に以下を貼り付ける

zend_extension=/usr/lib/php/20220829/xdebug.so
xdebug.mode=debug
xdebug.start_with_request=yes

php.iniの編集

先ほど確認したPHPのバージョン配下にあるphp.iniを編集する
/自分のプロジェクト/vendor/laravel/sail/runtimes/今回のPHPのバージョン/php.ini←これ

以下を貼り付ける

xdebug.client_host = host.docker.internal
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.discover_client_host = 0
xdebug.remote_handler = "dbgp"
xdebug.client_port = 9003
zend_extension=/usr/lib/php/20230831/xdebug.so

client_port の値についてはポートを変えてもいいが、launch.jsonで合わせる必要があるので注意

Dockerファイルの編集

先ほど確認したPHPのバージョン配下にあるdockerfileを編集する
/自分のプロジェクト/vendor/laravel/sail/runtimes/今回のPHPのバージョン/Dockerfile←これ

# peclのインストール
RUN apt-get install -y php-pear

RUN pecl install xdebug \
&& docker-php-ext-enable xdebug	

COPY xdebug.ini /etc/php/8.2/cli/conf.d/20-xdebug.ini

どこでもいいとは思うが自分は写真のところに配置した。
image.png

コマンドを打ってコンテナを再度作り直し

./vendor/bin/sail down
./vendor/bin/sail up -d --build

launch.jsonの作成、編集

サイドバーに存在する△と虫のアイコンをクリックし、
launch.jsonを作成する。この後PHPを選択
a.png

image.png

ここのPathMappingsがいろいろ記事によって言い方が違うが
変数を使うのはおすすめしません。
(${workspace}みたいな)

:の左の場所は
image.png
プロジェクト直下のdokcer-compose.ymlファイルのvolumesに書かれています。

:右側の場所はプロジェクトをおいている場所
cドライブ直下にプロジェクトをおいている場合は

"c:/プロジェクト名"

これで必要な設定は全部です。
ブレイクポイントを打って(行の数字の左をクリック)
デバックを起動!(写真の緑△ボタン)
image.png

あとは画面を動かす。
image.png

成功するとこのようにブレイクポイントで止まります。
プログラムの処理が行われるところでないと止まらないので
止まらないときブレイクポイントもチェック!

お疲れ様でした!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?