【Mac】Visual Studio Code を使ったPHPの最低限のデバッグ環境の構築

皆さん、こんにちは（こんばんは）、「大-はなまる(@oooohanamaru)」です。

はじめに

小さなプロジェクトで、特にGUIを必要としない小さなプログラム作成には、MacのターミナルでPHPのソースを作成し、そのまま実行するという感じでやってきたのですが、少しリッチな環境「Visual Studio Code」で作業（デバッグ）をしてみたいと思い、この記事にまとめてみました。

嫁ちゃん

今回は「Visual Studio Code」を使ってPHPのデバッグ環境を構築することになりました。なんだか難しそうで不安だわー。。。

わたし

そうだね、でも、テキストエディタだけでは大きなアプリケーション開発が困難になってきたね。今回の記事で、「Visual Studio Code」の統合環境の恩恵に与ろう！

作業環境

• MacBook Pro (Retina, 13-inch, Early 2015)
• macOS Catalina バージョン 10.15.3
• PHP 7.3.11

作業概要

MacにPHPをインストールされていることが前提となります。ターミナル上でPHPコードが実行できる状態になっています。Visual Studio Code をインストールすることで、ブラウザで実行されているPHPのトレースができるようになり、デバッグできるようになります。また、Visual Studio Code がコーディングに便利な拡張機能を提供してくれますので、コーディングやデバッグの効率アップ。

Visual Studio Code のインスール

Visual Studio Codeはソースコードエディタである。マイクロソフトにより開発され、Windows、Linux、macOS上で動作する。デバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持つ。カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できる。
Visual Studio Code – Wikipedia より抜粋

Visual Studio Code は コチラからダウンロードできます。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Visual Studio Code のインストール方法は下記サイトを参考にインストールしました。

参考：MacOSでVisual Studio Codeをインストールする手順

XAMPP のインスール

XAMPP（ザンプ）とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。
XAMMP – Wikipedia より引用

XAMPP のインストール方法は下記サイトを参考にインストールしました。

参考：Macにxamppをインストール – Qiita

VM版ではない方を選択してインストールします。

わたしは、WEB用フォルダの位置を下記のように変更しました。

DocumentRoot "/Users/[ユーザ名]/htdocs"
<Directory "/Users/[ユーザ名]/htdocs">

XAMPP の WEBサーバを再起動します。

XDebug のインストール

XDebug のインストール方法は下記サイトを参考にインストールしました。

参考：mac > install xdebug – Qiita
参考：Macにもともと入ってるPHP7.1にxdebugを入れる方法（2018年7月版）- Qiita
参考：MacOSでPHP7.2にxdebugを組み込みデバッグする – Qiita
参考：Visual Studio Codeを使ったPHPの開発環境の構築 (Windows, Mac)

pear をインストール

curl -O https://pear.php.net/go-pear.phar
php -d detect_unicode=0 go-pear.phar
sudo php /usr/lib/php/ install-pear-nozlib.phar

XDebug をインストール

pecl install xdebug

/Applications/XAMPP/xamppfiles/etc/php.ini 追記

zend_extension=/Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so
xdebug.remote_host = "localhost"
xdebug.remote_port = 9000
xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "/Applications/XAMPP/xamppfiles/prof"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = "dbgp"
xdebug.auto_trace = 1
xdebug.trace_output_dir = "/Applications/XAMPP/xamppfiles/trace"
xdebug.idekey = "phpstorm"

XAMPP の WEBサーバを再起動します。

デバッグ

参考：「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法

Visual Studio Code の 拡張機能「PHP Debug」をインストールして、デバッグができるようにする手順になります。「PHP Debug」を実行状態にした状態でブラウザでアクセスすることで、プログラムが実行され、デバッグをおこなうことができます。

$ vi /Users/[ユーザ名]/htdocs/sample.php
<?php
    echo 'Hello World.';
?>

ブラウザのアドレス欄に下記を入力し実行

http://localhost/sample.php

ブラウザに「Hello World.」が出力されていれば完了です。Visual Studio Code のPHPコード上にブレークポイントをつけておくと、ブラウザでPHPを実行した際、ブレークポイント上で処理が止まってくれます。

Visual Studio Code その他の拡張機能をインストール

• Japanese Language Pack for Visual Studio Code
  この拡張機能をインストールすると、Visual Studio Code が日本語化されます。
• Vim
  わたしはコーディングをVimエディタを使っているためインストールしました。
• PHP IntelliSense

おわりに

嫁ちゃん

途中すこしパニくったけど、ほとんど、参考にさせて頂いたサイトの内容だけで、環境構築ができちゃった。先人達よありがとうー♪

わたし

今日は良く眠れそー♪

この記事がお役に立ちましたら幸いです。

では、また。

※本サイトの漫画やイラストはフィクションであり、実在の製品・団体・人物・地名とは関係ありません。
※本サイトに掲載する情報には充分に注意を払っておりますが、その内容について保証するものではありません。
※本サイトの使用ならびに閲覧によって生じたいかなる損害にも責任を負いかねます。