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

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

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

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

Xdebug側の設定

設定ファイル修正

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

最初は１行しか無い。

これを

にする。

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

Apacheの再起動

PhpStorm側の設定

【Windows10Pro】IIS＋PhpStormによるPHPアプリの開発準備

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

ygkb.jp

2017-10-18 04:34

の応用になる。

プロジェクトを開いたら、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の２行目以降をコメントアウトしてデバッグOFFにしておいた方が良い。

関連記事

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

【Windows10Pro】IIS＋PhpStormによるPHPアプリの開発準備

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

ygkb.jp

2017-10-18 04:34

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

Ubuntu 16.04にWordPressをインストールする方法

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

ygkb.jp

2018-03-20 01:11