"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

Brakets1.14のPHP正式サポート機能&「php-debugger」でリモートデバッグする方法

BraketsのRelease1.14のリリースノートに、PHP正式サポートとあったので、試しに使ってみると、なかなか良かったので、記事にしておきます。

自分は今eclipseを使っていますが、のりかえていこうと考えてます。

f:id:arakan_no_boku:20190919190948p:plain

 

はじめに

今回の主な内容です。

  • XAMPPのインストール(PHP7.3)
  • Braketsのインストール
  • BraketsでPHPサポート機能を使うための設定
  • 拡張機能追加なしで使えるPHPサポート機能
  • XAMPPのxdebugを有効にしてリモートデバッグ可能に
  • 拡張機能php-debuggerのBraketsへの追加と設定
  • php-debuggerでリモートデバッグする方法

この記事のきっかけは、Braketsの最新(1.14)のページで、以下のようなコメントをみたことがきっかけです。

言語サーバープロトコルのサポート
Brackets で言語サーバープロトコルがサポートされるようになりました。組み込みの言語クライアントを使用し、言語サーバー(PHPPython など)の統合を容易にするようにカスタマイズして、コードヒント、パラメーターヒント、定義にジャンプなどの機能を利用できます。

PHP サポート
BracketsPHP 言語サーバーの統合による PHP がサポートされるようになりました。PHP コードの記述時に、コードヒント、関数パラメータヒント、定義にジャンプ、ドキュメントとプロジェクト全体のシンボル、参照の検索、および構文チェックを活用できます。

今、PHPの開発にはeclipseを使ってたのですが、他の環境に慣れてきたせいか「eclipseのエディターの行間」が狭く感じるようになってました。

なのに、eclipseのエディタは行間調整できないのですね。

ということで。

若干ストレスを感じていて、他のエディタを試したいなと思っていたのです。

 

XAMPPのインストール(PHP7.3)

 

せっかくなので、XAMPPも最新のものをダウンロードします。

www.apachefriends.org

デフォルトでC:\XAMPPにインストールして、その下にある「xampp-control.exe」を起動すると、XAMPPコントロールパネルが表示されるので、それで最低限の設定をしただけで動かしてます。

それも書こうと思ったんですけど、こちらのページの内容とほぼ同じになってしまうので、とりあえず、リンクを貼って流します(笑)

www.radia.jp

今回の主眼はXAMPPの話ではないですからね。

実際は違うのですが、話の都合上、デフォルトの「C:/xampp/htdocs」にソースを置く前提ですすめます。

 

Braketsのインストール

 

Braketsのダウンロードとインストールはこちらから。

brackets.io

インストール自体は指示にしたがうだけなので特に書きません。

まずはデフォルトのまま使ってみます。

ただ、テーマだけ「Brackets Dark」に変えてます。

表示>テーマで選ぶだけです。

 

BraketsでPHPサポート機能を使うための設定

 

Braketsはインストールしただけで、自動的に日本語表示に切り替わります。

このへん、親切設計で良いと思います。

早速、既存のPHPプログラムをコピーしてきて開いてみました。

さすがに、何も設定していないと怒られます(笑)

f:id:arakan_no_boku:20190919195654p:plain

ここで環境設定を開くで「brakets.json」を開いて以下を追記します。

    "php": {
		"enablePhpTooling": true,
		"executablePath": "C:\\xampp\\php\\php.exe",
		"memoryLimit": "4095M",
		"validateOnType": "false"
	},

デフォルトの、executablePathの"php"の部分を、実際にインストールしたPHP.exeのパスに書き換えてます。

"executablePath": "C:\\xampp\\php\\php.exe",

パスの区切りが\\とエスケープしないといけないのだけ気をつけないとね。

これは必須です。

あと、validateOnTypeを"true"にしてます。

これがデフォルトのfalseのままだと、構文チェッカが保存時にしかききません。

ここはtrueにして入力都度チェックされるようにしときます。

追記したJSONファイルがこちらです。

{
    "brackets-eslint.gutterMarks": true,
    "brackets-eslint.useLocalESLint": false,
    "fonts.fontSize": "16px",
    "fonts.fontFamily": "'SourceCodePro-Medium', MS ゴシック, 'MS Gothic', monospace",
    "php": {
		"enablePhpTooling": true,
		"executablePath": "C:\\xampp\\php\\php.exe",
		"memoryLimit": "4095M",
		"validateOnType": "true"
	},
    "themes.theme": "dark-theme"
}

これだけで、PHPサポートの機能が使えるようになります。

なお、当然ですが上記の環境設定用のJSONはメニューからいつでも開くことができます。

デバッグ>環境設定ファイルを開くです。

f:id:arakan_no_boku:20190921094707p:plain

 

拡張機能追加なしで使えるPHPサポート機能

 

コード編集機能として、最低限、これくらいはできてほしいなというところはあるので、そこがどの位デフォルトでカバーされているのかチェックしてみます。

もちろん。

デバッガなどは、Brakets以外のプログラムなどをインストールする必要があるので、そのへんは、はずして・・ですけど。

自分が最低限ほしいなと思うのは以下です。

  • コード・パラメータのヒント表示と入力保管
  • リアルタイム構文チェック
  • クラス・パラメータの定義場所へのジャンプ
  • メソッドなどを参照している場所の検索

さて、確認してみます。

 

コード・パラメータのヒント表示と入力保管

 

編集中に、入力可能なコードのヒントをガイドしてくれます。

f:id:arakan_no_boku:20190919214621p:plain

パラメータもこんな感じ。

f:id:arakan_no_boku:20190919214738p:plain

これは、ちょこっと触った限りでは十分です。

 

リアルタイム構文チェック(linting)

 

リアルタイムに構文チェックはかかります。

わざとエラーを作ってみたら、きっちり警告してくれました。

f:id:arakan_no_boku:20190919215116p:plain

lintingは、ちゃんとデフォルトでサポートされているようです。

まあ。

このへんの機能は、もっとちゃんとコーディングしながら確認しないとわからない部分はありますけどね。

 

定義している場所にジャンプする

 

コーディング中に、クラスとかメソッドとかの定義場所へジャンプして、実装を確認したいことは普通にあります。

だから、これができるかできないか・・は、気になります。

結果として、これは対応してました。

最初、ショートカットがわからなくて、無いのかな?と思ってしまいましたけど。

f:id:arakan_no_boku:20190919220022p:plain

たとえば、上記の「PracCtrl()」の部分をポイントして、「Ctrl + j」キーを押すと、クラスを定義しているファイルへジャンプします。

f:id:arakan_no_boku:20190919220159p:plain

いい感じです。

もうひとつ。

シンボル(クラスとかメソッドとかプロパティなどの定義名)をリストして、そこにジャンプするという機能もあります。

ソース上で「Ctrl + t」を押すと、右上にシンボルのリストが表示されます。

f:id:arakan_no_boku:20190919222917p:plain

そこで、目指すシンボルを選択すると。

こんな感じでジャンプしてくれます。

f:id:arakan_no_boku:20190919223010p:plain

これが「Ctrl + Shift + t 」だと、プロジェクト全体のシンボルをリストしてくれて同じようにジャンプできます。

f:id:arakan_no_boku:20190919223227p:plain

なかなかスマートでいいですね。 

 

メソッドなどを参照している場所の検索

 

上記の逆で、例えば「このメソッドを参照している機能はどこか?」を確認したいケースというのも、よくあります。

こちらも問題なく対応されてました。

すべての参照を検索という機能です。

調べたいメソッドをポイントして右クリックして、すべての参照を検索すると、それを参照しているファイルとかをリストしてくれます。

f:id:arakan_no_boku:20190919222325p:plain

検索結果。

f:id:arakan_no_boku:20190919222351p:plain

あと、そのファイル内のシンボルをリストして、その場所にジャンプできます。

まったく問題ないです。

うーーん。

なんら拡張機能を追加していないインストールしただけ状態で、これだけ使えたら、なかなかのもんです。

あと、デバッグができれば、自分としては十分使えると思ったので、リモートデバッグできように、拡張機能をインストールしていきます。

 

XAMPPのxdebugを有効にしてリモートデバッグ可能化

 

リモートデバッグするために、XAMPP側でXDEBUGを有効にします。

とりあえず、xdebug.dllファイルを探します。

今回インストールした環境だと「C:\xampp\php\ext\php_xdebug.dll」がありました。

php.iniの末尾に以下を追加して、xdebugを有効にします。

[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug.dll"
xdebug.idekey="bkt"
xdebug.remote_enable=true
xdebug.remote_port=9001
xdebug.remote_autostart = 1

これを保存して、Apacheを再起動して、なんか適当なエラーのあるソースを動かしてみます。

f:id:arakan_no_boku:20190920192705p:plain

よしよし。

このデザインのエラーメッセージが表示されていれば、xdebugは有効になってます。

 

拡張機能php-debuggerのBraketsへの追加と設定

 

今度は。

Braketsと連携させるため、PHP-DEBUGGERを拡張機能でインストールします。

f:id:arakan_no_boku:20190919234105p:plain

インストールに成功したら、右側に虫マークが追加されます。

f:id:arakan_no_boku:20190919234334p:plain

 

デバッグ>環境設定ファイルを開くで、brakets.jsonを開きます。

以下の設定を追加します。。

"php-debugger.port": 9001,
"php-debugger.idekey": "bkt",
"php-debugger.debug": true

ここで重要なのは、idkeyとport番号をxdebug側とあわせておくことです。

idkeyは任意の文字列でかまいませんし、portも変更してもOKですが、変更するならあわせることだけ忘れないように。

ちなみに、上記の設定は変えてます。

デフォルトは、idkeyが「xdebug」、portは「9000」です。

 

php-debuggerでリモートデバッグする方法

 

ソースの右クリックメニューに、「toggle breakpoint」が追加されているはずです。

それを使ってブレークポイントを設定します。

ブレークポイントを設定した行は、見づらいですが、左側に赤い点がつきます。

さて。

デバッグを動かしてみます。

右側の虫ボタンを押して、デバッガを起動します。

f:id:arakan_no_boku:20190919234433p:plain

普通にURLをブラウザでたたいても、リモートデバッグはできません。

リモートデバッグを有効にするには、PHPを実行するURLの末尾に

?XDEBUG_SESSION_START=bkt

をつける必要があります。

最後の「bkt」はidkeyです。

なので、例えば・・

http://localhost:8080/prac/views/PracView.php

なら、通常実行。

http://localhost:8080/prac/views/PracView.php?XDEBUG_SESSION_START=bkt

ならデバッグ実行。

ということです。

さて・・。

とりあえず、ブレークポイントを一か所だけ設定して、そこで止まるかどうかを確認してみると・・・おーー、ちゃんとブレイクポイントで止まって(赤のラインの部分)、変数などの情報がちゃんと表示されています。

f:id:arakan_no_boku:20190920195714p:plain

OKです。

リモートデバッグはきちんと動いてます。

 

まとめです

 

一通り設定して使ってみました。

当初の予想以上に良かったです。

たぶん、拡張機能をくみあわせて、いろいろ設定すれば、今まででもできたのかもしれませんが、インストールしただけの、ほぼ初期設定のままでこれだけのことができるというのは有難いです。

PHP対応エディターとうたってもいいくらいです。

自分も、eclipseから乗り換えていこうと思ってます。

今回はこんなところで。

ではでは。