UbuntuとPhpStormでリモートデバッグする方法

Gustavo_Belemmi / Pixabay

WordPressのプラグインを作っていたとき。
Ubuntu上のWordPressをPhpStormでステップ実行デバッグしたくなった。
UbuntuにXdebugをインストールしてPhpStormを設定した。

スポンサーリンク
スポンサーリンク

パッケージのインストール

を実行すると入る。

PHPのバージョンを確認するとXdebugのコピーライトが追加されている。

Xdebug側の設定

設定ファイル修正

設定は /etc/php/7.0/apache2/conf.d/20-xdebug.ini にある。

最初は1行しか無い。

これを

にする。

ミソは2箇所、xdebug.remote_hostにはPhpStormを実行するPCのアドレスを、xdebug.idekeyには"PHPSTORM"を指定する。

Apacheの再起動

を実行。

PhpStorm側の設定

Windows10 Proに標準添付のIIS 10を使い、PHP 7.0を開発・デバッグできるようにするまでの手順。 php.iniも配布。

の応用になる。

プロジェクトを開いたら、File⇒Settignsで設定画面を開く。

リモートデバッグの有効化

  1. Languages & Frameworks⇒PHP⇒Debugを辿る
  2. Debug portをxdebug.iniと合わせる
    また、Can accept external connectionsにチェックを入れる
  3. 設定が初めてなら以下の設定も行っておく
    1. [Use debugger bookmarklets to initiate debugging from your favorite browser]をクリックしてブックマークレットを設定
    2. デバッグプロファイルの作成

リモートサーバーの指定

設定画面を引き続き操作。

  1. Languages & Frameworks⇒PHP⇒Serversを辿る
  2. +ボタンで項目追加
  3. HostにWordPressが動いているマシンのIPアドレスを指定
    Portは80、DebuggerはXdebug
  4. Use path mappingsにチェックを入れる
  5. 左側はローカルマシンでのWordPressディレクトリを、右側はサーバー機でのWordPressディレクトリを指定

デバッグ実行のやり方

  1. デバッグしたいページをPhpStorm、ブラウザの両方で開く
  2. PhpStormの画面右上、電話?みたいなマークをクリックする
    (デバッグOFF)

    (デバッグON)
  3. ブラウザ側で「Start debugger」ブックレットをクリック
  4. ブラウザをリロード
  5. ブレークポイントで止まるようになる
    (ブレークポイントは行番号の辺りをクリックすると赤丸が付く)

注意:デバッグONだと糞遅くなる

Xdebugが有効だと露骨に動作が遅くなる。

以前Vagrant+VCCWが遅くて諦めたが、これが原因だったか…!

普段はxdebug.iniの2行目以降をコメントアウトしてデバッグOFFにしておいた方が良い。

関連記事

IISとPhpStormの組合せでリモートデバッグしたい方へ。

Windows10 Proに標準添付のIIS 10を使い、PHP 7.0を開発・デバッグできるようにするまでの手順。 php.iniも配布。

UbuntuにWordPressをインストールする方法を知りたい方へ。

Ubuntu 16.04 ServerへWordPressをインストールする方法を説明します。 ローカル環境にWordPressがあるとCSSスタイルやプラグインの開発がやりやすくなります。