ホーム > 技術情報 > VSCodeを使おう!-XAMPP×XDebug×PHP-

VSCodeを使おう!-XAMPP×XDebug×PHP-

投稿日 : 2019年05月12日   更新日 : 2019年10月12日
カテゴリー : PHP/javascript/CSS / 開発環境(Pleiades/Eclipse/Xampp他) / 技術情報
VSCodeを使おう!-XAMPP×XDebug×PHP-の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして6年~の経験があります。WordPressは2年~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

前回の記事(ダウンロード&インストール、PHP設定編)でVisual Studio Code(VSCode)を導入しました。

これは、エディタとしての機能も優秀です…Eclipseよりもずっと軽くて補完もタイプミスもしてくれるなんて…!

ですが、デバッグを設定してからが彼の本気です。

彼を設定すると、こんなに軽快にデバッグが実行できるんですよ…!

php.iniのXDebug設定

今回はXAMPPを使用するので、XAMPPのphp.iniを編集します。前回、Visual Studio Codeに適用させたphp.iniとは別物なので注意してください。

pleiades環境の場合、大体「C:\pleiades\xampp\php」にあると思います。

XAMPPのphp.ini XDebug
XAMPPのphp.ini XDebug
zend_extension = "C:\pleiades\xampp\php\ext\php_xdebug.dll"
xdebug.remote_enable = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_mode = "req"
xdebug.remote_host = 127.0.0.1
xdebug.remote_port = 9000
xdebug.remote_autostart = 1

xdebug.remote_autostartはVisual Studio Codeでデバッグする場合に必須です。必ず入れるようにします。

その他は通常のデバッグするときと変わりません。

XDebugの各項目についてはこちら(仮想開発環境を構築-4.Xdebugを設定しよう)を参照してください。

また、画像はEmEditorのものですが、こういったphp.iniもVisual Studio Codeで開いて編集することができます。

Visual Studio CodeのXDebug設定

Visual Studio Codeを起動し、デバッグしたいソースをエクスプローラーから読み込みます。「フォルダーを開く」などです。

今回はXAMPPのhtdocsの中にある適当なソースを選択します。

エクスプローラーを開いた状態で左側の虫アイコンを押下します。

Debugを起動する-Visual Studio Code-
Debugを起動する-Visual Studio Code-

押下後、デバッグ開始横の歯車ボタンを押下します。

Debug設定を開く -Visual Studio Code-
Debug設定を開く -Visual Studio Code-

launch.jsonというファイルが開きます。これはデフォルトで既にある程度記載されています。

launch,json -Visual Studio Code-
launch,json -Visual Studio Code-

このlaunch.jsonファイルを編集します。

Portの下に、PathMappingsを記述します。

launch.jsonにPathMappingsを追記 -Visual Studio Code-
launch.jsonにPathMappingsを追記 -Visual Studio Code-
"pathMappings" : { "${workspaceRoot}" : "${workspaceRoot}" }

左側がデバッグを実行するサーバールート、右側がデバッグ元のソースを読み込むローカルルートです。

先ほどエクスプローラーにファイルを読み込むときに、XAMPPのhtdoceの中の物を読み込みました。これが今回のローカルルートになります。

XAMPPを起動した状態でブラウザアクセスして表示されるものはXAMPPのhtdocsの中のもので、今回のサーバールートになります。

これによりサーバーとローカルが一緒になるので、どちらも「${workspaceRoot}」と記述しています。

XAMPP内でもサーバーとローカルを別にしたい場合

ローカルソースを任意の場所に変更してください。その場合はXAMPPのサーバールートを直接書くことになります。その場合は「C:\\pleiades\\xampp\\htdocs\\play」などになるでしょう。

※Windowsの「\(¥)」マークはエスケープして記述するので、2つ重ねにします。

デバッグを実行してみよう

予めXAMPPを起動しておきます。

Visual Studio Codeのエクスプローラーからテスト用のファイルを開き、行の左側をクリックしてブレークポイントを置きます。

BreakPointをセット -Visual Studio Code-
BreakPointをセット -Visual Studio Code-

ブレークポイントをセットしたら左側の虫アイコンを押下してデバッグ画面を開きます。

デバッグの実行ボタンを押下します。

Debug実行 -Visual Studio Code-
Debug実行 -Visual Studio Code-

正常に実行されると、Visual Studio Codeの下の青いバーがオレンジ色になります。

Debugが実行された状態 -Visual Studio Code-
Debugが実行された状態 -Visual Studio Code-

この状態で、ブラウザから該当のアドレスにアクセスします。

ブレークポイントで止まれば成功です。

デバッグ実行 -Visual Studio Code-
デバッグ実行 -Visual Studio Code-

左側の「変数」で現在格納されている変数が、「ウォッチ式」で任意の変数や式の結果を確認することができます。Eclipseなど、他の開発環境でデバッグをやったことがある方はなんとなく操作がわかると思います。

「F5」キーで次のブレークポイントまで実行、「F10」でステップ実行になります。行のところで「F9」を押すとブレークポイントを設定できます。

尚、このソースはエラーになるように書いているため、ステップ実行するとエラーが表示されます。

デバッグ実行時のエラー表示 -Visual Studio Code-
デバッグ実行時のエラー表示 -Visual Studio Code-

停止ポイントの設定

「Noticeごときでいちいち止まっていたら仕事にならないよ!もし出たら画面で確認するからいいよ!」

という方(※フレームワーク使用時などに頻繁にNotice検出されてしまうことがあるようです)は、実行を停止する場所を選ぶことができます。

左側にあるブレークポイントを開くと項目が出てきます。

Everythingはデフォルトでついていますが、任意のものしか停止させたくない場合はEverythingを外し、Warningにチェックするなどをします。

Debug停止ポイントの設定 -Visual Studio Code-
Debug停止ポイントの設定 -Visual Studio Code-

また、ここでブレークポイントがどこに張られているかの確認もできます。

デバッグの停止や再起動はデバッグツールバーから行うことができます。

デバッグ中、うまく動かなくなってしまったら

デバッグしているとたまに正常動作しなくなるときがあります。

そんなときは

  • Visual Studio Codeの再起動
  • XAMPPの再起動

をしてください。それでも動きが悪い場合はPCごと再起動です。

大体はこれで解消されます。

Visual Studio Code(VSCode)×XAMPP×XDebugの使用感

個人的乾燥にはなりますが、従来の私が使っていたEclipseよりも、やはり起動が早くデバッグ中ももっさりと動く感じが一切ありません。

Eclipseも悪くないんですが、たまにバグってそのままお亡くなりになることがあるので、これを回避できる上に軽量なら、VSCodeでいいね、と思う次第です。

もっと使い込んでいくうちに色々思うところはあるかもしれないし…ないかもしれないです。

とはいえ、軽量動作は待ち時間が非常に短くなるので、気分が乗っているときは集中を阻害されずにガンガン行こうぜ!開発ができます。

完全な初心者で手軽にデバッグを実行してみたい!という方はPleiades統合開発環境がいいと思いますが、ある程度慣れてきた方はこういったもので自分で整えてみるのもいいと思います。

楽しい物造りを

NaoLight

自分のブログやサイトを、楽しく作ってもらえたら。

プログラムを使って望み通りに、拡張しやすく、自分の思うように。

できたときに、すごく楽しい!と思ったら。

控えめに言って、「最高です」。

NaoLight -NAOT-(なおらいと、なおと、と呼んでください)はそんな思いをカタチにする、WordPressのテーマです。

ご購入はこちらからお願いします(BOOTHへ移動します)。

Nao Light-NAOT-公式サイト