xDebugとSublime Text3でPHPのデバッグ環境を作ろう

2018/08/24

PHPのデバッグはxDebugがいい
導入時の環境
xDebugをインストール・有効化
1. php.iniの編集
Sublime Text 3にxDebug Clientをインストール
xDebug Clientの設定

こんにちは、コーダーの仁木です。

PHPで開発しているときに変数をいちいちvar_dump()で画面に出力して確認したり、いくつものソースコードを読み解きながらファイルをまたいで処理を追いかけたりしている人に読んで欲しい…
これらの時間の浪費ってモチベーションも下がりがちで辛いですよね。

それはデバッグ環境がないから！
デバッグ環境をしっかり整えると作業時間がグッと短くできるし、プログラムをより深く理解する手助けになってくれます。

PHPのデバッグはxDebugがいい

xDebugとは？

PHPのデバッグ用の拡張モジュール。
var_dumpの出力結果を見やすくしてくれたり、プロファイリングツールとして処理が遅い部分を突き止めてくれます。またステップ実行という、設定したブレークポイント毎に処理を中断して確認が出来たりします。

今回は普段僕が使用しているエディター「Sublime Text 3」上でxDebugを利用できるようにしたいと思います。

さっそく導入手順を説明していきます。

導入時の環境

OSはMac
開発環境はMAMP（PHPバージョンは5.6.33）
Sublime Text 3はインストール済み

xDebugをインストール・有効化

まずはxDebugをインストール・有効化しましょう。
開発環境にMAMPをしている場合はxDebugは既にインストールされているので有効化するだけです。

php.iniの編集

MAMPを使用している場合のphp.iniファイルの場所ですが、
「/Applications/MAMP/bin/php/使用しているPHPバージョン/conf/php.ini」になります。

php.iniを適当にエディターで開いて、ファイル末尾付近にある[xdebug]の項目を書き換えます。

~~色々書いてある~~

[xdebug]
;zend_extension="/Applications/MAMP/bin/php/使用しているPHPバージョン/lib/php/extensions/no-debug-non-zts-20131226/xdebug.so"

~~色々書いてある~~

[xdebug]

;zend_extension="/Applications/MAMP/bin/php/使用しているPHPバージョン/lib/php/extensions/no-debug-non-zts-20131226/xdebug.so"

以下に書き換え

~~色々書いてある~~

[xdebug]
zend_extension="/Applications/MAMP/bin/php/使用しているPHPバージョン/lib/php/extensions/no-debug-non-zts-20131226/xdebug.so" <-コメントアウトを外す
xdebug.profiler_output_dir="/tmp/xdebug/"
xdebug.profiler_enable=On
xdebug.remote_enable=On
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"
xdebug.idekey="sublime.xdebug"
xdebug.overload_var_dump = 0
xdebug.var_display_max_children = 128
xdebug.var_display_max_data = 1024
xdebug.var_display_max_depth = 10
xdebug.dump.GET= *
xdebug.dump.POST= *
xdebug.dump.SESSION= *

~~色々書いてある~~

[xdebug]

zend_extension="/Applications/MAMP/bin/php/使用しているPHPバージョン/lib/php/extensions/no-debug-non-zts-20131226/xdebug.so" <-コメントアウトを外す

xdebug.profiler_output_dir="/tmp/xdebug/"

xdebug.profiler_enable=On

xdebug.remote_enable=On

xdebug.remote_host="localhost"

xdebug.remote_port=9000

xdebug.remote_handler="dbgp"

xdebug.idekey="sublime.xdebug"

xdebug.overload_var_dump = 0

xdebug.var_display_max_children = 128

xdebug.var_display_max_data = 1024

xdebug.var_display_max_depth = 10

xdebug.dump.GET= *

xdebug.dump.POST= *

xdebug.dump.SESSION= *

これでMAMPを再起動して、ローカル環境でphpinfoを確認します。
下記の画像のように、[xdebug]の項目が表示されていれば有効化されています。

Sublime Text 3にxDebug Clientをインストール

次はSublime Text3でxDebugを使うために「xDebug Client」パッケージをインストールします。

Sublime Text3を開いたらメニューバーから
「ツール」 -> [コマンドパレット] を選択して、表示された入力カーソルに

「install Package」、「xdebug client」と続けて入力するとパッケージがインストールされます。
続けてコンフィグファイルを編集していきます。

xDebug Clientの設定

*.sublime-projectファイル

sublime-projectファイルに以下の内容を追記します。

{
    "folders":
    [
        {
            "path": "/Users/2t0/Sites/ginza-print.com_git"
        }
    ],
    //ここから追記
    "settings":
    {
        "xdebug":
        {
            "url": "http://localhost/プロジェクトのディレクトリ名/",
        }
    }
    //ここまで追記
}

{

"folders":

[

{

"path": "/Users/2t0/Sites/ginza-print.com_git"

}

//ここから追記

"settings":

{

"xdebug":

{

"url": "http://localhost/プロジェクトのディレクトリ名/",

}

//ここまで追記

}

Xdebug.sublime-settingsファイル

[ツール] -> [Xdebug] -> [settings – user]からxDebug Clientのカスタマイズができます。
以下は実際に自分が設定したものになります。

{
  // コンテキストでのスーパーグローバル変数の表示。trueで表示される
  "super_globals": true,
  // コンテキストに表示される変数の階層数
  "max_depth": 10,
  // PHPエラーが出た時点ブレークする。falseにするとエラー箇所でもブレークしなくなる。fatalエラーのみブレークするなど、エラーレベルの設定も可能
  "break_on_exception": false
}

{

// コンテキストでのスーパーグローバル変数の表示。trueで表示される

"super_globals": true,

// コンテキストに表示される変数の階層数

"max_depth": 10,

// PHPエラーが出た時点ブレークする。falseにするとエラー箇所でもブレークしなくなる。fatalエラーのみブレークするなど、エラーレベルの設定も可能

"break_on_exception": false

}

その他の設定はXdebug Clientのパッケージページで確認できます。
Xdebug Client – Packages – Package Control

/etc/bashrcファイル

以下を追記します。
追記した後はターミナルからsource /etc/bashrcでbashrcを再読み込みします。

# User specific aliases and functions
export XDEBUG_CONFIG="idekey=sublime.xdebug"

1 2	# User specific aliases and functions export XDEBUG_CONFIG="idekey=sublime.xdebug"

xDebugを使う

Sublime Text3でxDebugを使うには以下の手順になります。
ショートカットキーでの説明になっていますが、全て[ツール] -> [Xdebug]からでも操作できます。

ソースコード上で、ブレークポイントを置きたい場所で「⌘ + F8」
[ツール] -> [Xdebug] -> [Start Debugging]でデバッグを開始します。（「⌘ + Shift + F9」）
デバッグしたいページのURL末尾に「?XDEBUG_SESSION_START=sublime.xdebug」のパラメータをつけてアクセス。ブレークポイントを置いた箇所でブレイク。
次のブレークポイントに移るには「⌘ + Shift + F5」
ステップインは「⌘ + Shift + F6」

ブレークポイント時点での変数の確認が「Xdebug Context」のウィンドウで確認できます。ステップインではブレークポイントで実行している関数が書いてあるファイルの行に移動できます。

以上がSublime Text 3上でxDebugを使うための導入手順になります。
いかがでしたでしょうか、興味のある方はぜひ試してみてください。

快適なエンジニアライフを作っていきましょう。
ではでは。