些細なきっかけで、統合開発環境ATOMを利用してPHP開発を出来るようにしなければならなくなった。
私にとっては新しい開発環境であったため、ワクワクして環境構築してましたが、デバック環境を作るのに、大変悩んだので、忘備録として残しておきます。
この環境構築はバージョンってのがとても重要です。
■前提
私は開発環境ごとに、バージョンごとにXAMPPを切り替えて活用しています。
Atom用XAMPPとして、今回は初期インストール場所「C:\xampp」ではなく、意図的に「D:\Atom\xampp」にインストールしています。
もし、このブログを参考にされる方で、xamppを初期インストール場所のCドライブ直下「c:\xampp」にインストールしている方は、この記事上に記載されている「D:\Atom\xampp」という記述全てを「c:\xampp」に読み替えて参考にしてください。
■環境
- Windows 10 Pro(64bit)
- XAMPP Version 7.2.9
※zend_extension = D:\Atom\xampp\php\ext\php_xdebug-2.6.1-7.2-vc15.dll - Atom 1.31.1 x64
■Atom Install Packages
- atom-ide-ui 0.13.0
- ide-php 0.7.15
- atom-debug-ui 1.0.4
- php-debug 0.3.5
■ブラウザ拡張
- Chrome拡張機能: Xdebug helper
- Firefox Add-on: Xdebug Helper for Firefox
■環境構築方法
-
-
XAMPP(https://www.apachefriends.org/index.html)から、インストーラ” xampp-win32-7.2.9-0-VC15-installer.exe”をダウンロードしてインストールする。
※注意:AtomのPackages「ide-php」はPHP7.0以上でなければ動かないため、PHPバージョンが7.0以上のXAMPPをインストールする事。
なお、今回は以下ディレクトリにXAMPPをインストールする。D:\Atom\xampp
-
Atom(https://atom.io/)から、インストーラ” AtomSetup-x64.exe”をダウンロードしてインストールする。
-
AtomにPHPデバックに必要なPackagesをインストールする。
Atomを起動し、File->Settings->Installを選択し、以下のファイル名を入力してインストールする。
- atom-ide-ui 0.13.0 ※AtomをIDE(統合開発環境)に変更するもの。
- ide-php 0.7.15 ※AtomでPHP開発するために必要なもの。PHP7以上でなければならない。
- atom-debug-ui 1.0.4 ※Atomでデバックさせるのに必要なもの。
- php-debug 0.3.5 ※PHPのステップ実行デバックさせるために必要なもの。atom-debug-uiがないと動かない。
-
File->Settings->Packages->ide-phpのSettingsボタンをクリックして、以下の設定値を更新する。
PHP Path = D:\Atom\xampp\php\php.exe
-
File->Settings->Packages-> php-debugのSettingsボタンをクリックして、以下の設定値を更新する。
Path Mappings= [{"remotePath":"D:/Atom/xampp/htdocs","localPath":"D:/Atom/xampp/htdocs"}]
-
XDEBUGの環境を構築に必要なDLLをダウンロードする。
- フォルダ「D:\Atom\xampp\php」をカレントディレクリとして、コマンドプロンプトを開く。
- コマンド「php -i > phpinfo.txt」を実行する。
- ファイル「D:\Atom\xampp\php\phpinfo.txt」を開き、コピーする。
- Webサイト「https://xdebug.org/wizard.php」にアクセスして、テキストエリアに先程コピーした文字列を張り付ける。
- 「Analyse my phpinfo() output」ボタンをクリックする。
- 指示に従いファイルをダウンロードして指定の場所に格納する。
※私の環境の場合、php_xdebug-2.6.1-7.2-vc15.dllが対象でした。
-
php.iniを更新する。
“D:\Atom\xampp\php\php.ini”を開き、Xdebugを利用してデバックできるように設定する。
[xdebug] zend_extension = D:\Atom\xampp\php\ext\php_xdebug-2.6.1-7.2-vc15.dll xdebug.remote_enable=1 xdebug.remote_host=localhost xdebug.remote_connect_back=0 # Not safe for production servers xdebug.remote_port=9000 xdebug.remote_handler=dbgp xdebug.remote_mode=req xdebug.remote_autostart=false xdebug.idekey=xdebug-atom # atomのIDEKEYを指定する。※バージョンによって名称が変わるため、php-debugのSettingに記載された指示にしたがって更新する。 xdebug.remote_log=D:\Atom\xdebug.log
-
Apacheを起動(再起動)する。
xampp-control.exeからApacheをStartする。
-
Atomを起動(再起動)する。
-
ブラウザの環境をXDEBUGでデバックできるよう拡張する。
【Chromeを使う場合】
- Chromeを開き、拡張機能「Xdebug helper」を追加する。
- 虫マークを右クリック→オプションを選択する。
- IDE Keyにて「Other」を選択し、「xdebug-atom」を入力、「Save」をクリックする。
【Firefoxを使う場合】
- Firefoxを開き、拡張機能「Xdebug Helper for Firefox」を追加する。
- ブラウザメニューから、アドオンを選択する。
- 「Xdebug helper」の「設定」ボタンをクリックする。
- IDE Keyにて「Other」を選択し、「xdebug-atom」を入力、「Save」をクリックする。
-
デバック用ソースコードを作成する。
例)D:\Atom\xampp\htdocs\atomphpdebug\index.php
-
ソースコード上の左側をマウスでクリックしてブレークポイントをつける。
-
AtomのPHP Debugをクリック
-
ブラウザを起動し、アドレスに「http://localhost/atomphpdebug/」と入力する。
-
ステップ実行できるよう虫マークをクリックして、デバックを有効にする。
-
改めてブラウザのアドレスバーに「http://localhost/atomphpdebug/」を再表示する。
すると、Atomが点滅してデバック実行できるようになっています。
ContexのLoaclをクリックしたりするとその時のローカル変数の値などが分かります。 -
以上です。
-
■所感
公式サイトを見て指示の通りにしてもうまくいかない。
皆簡単に設定しているのに、なぜ私の環境だけできないのだ…という悩みが激しい状況でした。
特に、どこのWebページをみても、環境構築をするにあたってメニュー(Packages -> php-debug->Toggle Breakpoint)を操作しているのだけれど、私にはそのメニューがどこにも存在しない。辛いのはphp-debug開発者サイトの解説ページにもこのメニューの存在が記載されているのです。(更新忘れているのかな?)
おそらく、以前のバージョンには存在していたメニューなんだと思っています。ただ、このメニューが存在しないという事が、何か動かない重要な問題じゃないのか???と思い非常に悩みました。
また、PHPのビルドインサーバーの起動(コマンドプロンプト上で以下コードを実行)が必要と書いている人も入ましたが、今回の件には、全然関係なかったです。
php -S localhost:9000 -t ( デバックしたいファイルのあるパス )
存在しないメニューを復活させる方法やビルドインサーバーの起動など色々試してみましたが、最終的に全然関係なかったです。
バージョンの違いによって設定方法が違うことが分かったが、それに対して、どうすればいいのかが全然わからなかった。
なんだかんだphp.iniの設定値やphp-debugの設定情報を変更して試してました。
結論として、以下の設定がどこのサイトにも記載されていないけど、デバック実行の為に重要な情報っぽいです。
Path Mappings= [{"remotePath":"D:/Atom/xampp/htdocs","localPath":"D:/Atom/xampp/htdocs"}]
しかし、これは分からないですよ。。。また環境構築しようとしても絶対に忘れると思う。
だから、忘備録として残しました。
今回は良い勉強になったと思います。同じような環境の人は是非参考にしてみてください。
以上、ではでは!
この記事へのコメント
コメントはまだありません。