開発環境

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

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

はじめに

小さなプロジェクトで、特に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 は コチラからダウンロードできます。

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

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

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

XAMPP のインスール

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

XAMMP – Wikipedia より引用

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

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

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

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

/Applications/XAMPP/etc/httpd.conf
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 をインストール

Mac Terminal
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 をインストール

Mac Terminal
pecl install xdebug

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

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」を実行状態にした状態でブラウザでアクセスすることで、プログラムが実行され、デバッグをおこなうことができます。

Mac Terminal
$ 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

おわりに

嫁ちゃん
嫁ちゃん

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

わたし
わたし

今日は良く眠れそー♪

この記事がお役に立ちましたら幸いです。
ブログランキングに参加しております。よろしければクリックお願いいたします。
にほんブログ村 IT技術ブログ PHPへ
※本サイトに掲載する情報には充分に注意を払っておりますが、その内容について保証するものではありません。
※本サイトの使用ならびに閲覧によって生じたいかなる損害にも責任を負いかねます。

コメント

タイトルとURLをコピーしました