vscode XAMPP

【備忘録】XAMPP で VSCode の拡張機能 PHP Debug を使う手順

投稿日:2020年5月29日 更新日:

この記事はだいたい 4 分ほどで読めます。

XAMPP をセットアップしたので VSCode の拡張機能 PHP Debug をセットアップして動かしてみました。

XAMPP をセットアップしたときの記事はこちらです。

>>【備忘録】XAMPPインストール からの hello world!

programing

環境

確認した環境はこちらです。

  • PC:Windows10
  • XAMPP:7.4.6

セットアップ

インストール

VSCodeに[PHP Debug]をインストールします。

setup1

VSCode を起動し拡張機能:MARKETPLACE で PHP Debug を検索してインストールをクリック。

setup2

詳細の  XDebug installation wizard をクリック。

ブラウザが立ち上がってXDebugのページが開きます。

後でここに戻ってくるのでとりあえず閉じずに置いときます。

XAMPP Apache起動

XAMPPのControlPanelを開きます。

xampp

[Start]をクリック。

index.php作成

index.php

phpinfo()表示用に index.php を作成する。

場所はとりあえずわかりやすいようにDocumentRootで。

phpinfo()をコピー

先ほど作成したindex.phpをブラウザで表示します。

DocumentRoot に index.php ファイルを作成した場合はブラウザのURLに http://localhost/ と入力してphpinfo()の内容を表示します。

phpinfo()

PHP Version …から全部選択して Ctrl+Cでコピーします。

phpinfo()を貼り付け

xdebug1

XDebug のページに戻ってブラウザからこぴった内容を貼り付けます。

[Analyse my phpinfo() output]をクリック。

dllダウンロード&移動

xdebug2

php_xdebug_…64.dll をクリックするとdllがダウンロードされます。

ダウンロードしたdllは xamp\php\ext に移動します。

php.ini編集

続いてXAMPPのphp.iniを編集します。

xampp2

XAMPP Control PanelでConfig -> PHP(php.ini) をクリックして php.ini を開きます。。

任意の場所に下記を追記します。

;以下は PHP Debug の詳細に記載されているもの
[XDebug]
xdebug.remote_enable=1
xdebug.remote_autostart=1
;以下はサイトに記載されてたもの
zend_extension = D:\xampp\php\ext\php_xdebug-2.9.5-7.4-vc15-x86_64.dll

※zend_extensionのファイル名はダウンロードしたdll名を記載する。

以上でとりあえず設定は完了。のはず

確認

設定が反映されてるかと動作の確認を行っていきます。

まずは設定から。

phpinfo()

phpinfo()で設定が反映されているか確認します。

XAMPP Control Panel で Apache を再起動します。

ブラウザをリロードしてphpinfo()の内容を確認。

phpinfo()2

XDebug が表示されてるのでOKだと思われます。

動かしてみる

とりあえず設定できてそうなのでVSCodeから[PHP Debug]を動かしてみます。

実行

実際にdebugするためにもう少しだけVSCodeで操作が必要です。

try1

実行の [launch.jasonファイルを作成します]をクリック。

環境の選択

try2

PHP を選択。

try3

Listen for XDebug を選択。

これでデバッグの準備が整いました。

debug開始

デバッグを開始します。

try4

適当にブレークポイントを設定してブラウザをリロード。

ステップ実行なども実行できることを確認。

一通りデバッグの確認ができました。

まとめ

VSCodeにPHP Debugをセットアップして動かしてみました。

Visual Studio って感じに使えそうです。

便利そうです。

設定はちょっと面倒なようなそこまでややこしくもないような感じでした。

おわり。

-vscode, XAMPP
-, , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

Material Icon Theme

【VSCode】 Material Icon Theme のインストール手順と感想

この記事はだいたい 5 分ほどで読めます。 とある動画で紹介されてたのでVSCodeに Material Icon Theme というプラグインをインストールしてみました。 個人的にそもそも必要性を感 …

programing

【備忘録】 VSCode のインストールと印刷可能なキーボードのチートシートを日本語化

この記事はだいたい 5 分ほどで読めます。 エディタを探してたら、評判が良さそうなので VSCode (Visual Studio Code)をインストールしてみました。 Visual Studio …

パソコン操作

【備忘録】 XAMPP インストール から hello world!までの手順

この記事はだいたい 4 分ほどで読めます。 VSCode で PHP をいじりたくて XAMPP のインストールと初期設定を行った際の備忘録です。 環境 PC:Windows10XAMPP:7.4.6 …

Search for…

フリーランスのITエンジニアで一人親方のページです

趣味は犬の散歩と洗車と草むしり

[IT系のこと・興味のあること・日常のこと]を記事にしています