PhpStorm で JavaScript のデバッグ環境を設定する方法

PhpStorm でも JavaScript のデバッグができるとのこと.
PhpStorm なら普段使い慣れた IDE 環境のように操作することができると思い,設定項目を調べてみました.

設定項目は以下の通りです.

1. PhpStormのPHP設定を行う
2. ChromeにJetBrains IDE Supportをインストールする
3. ビルトインウェブサーバの設定を行う
4. JavaScript Debugの設定を行う

macOS Catalina を使用していますが,PHP 7.3.9がインストールされていたので,PhpStormに使用するバージョンを設定します.

Run/Debug ConfigurationsでBuilt-inサーバの設定を行います.(Name,Document rootを設定)
PhpStormのプロジェクトを作成し,htmlとjsのファイルを配置します.
Run/Debug ConfigurationsでJavaScript Debugの設定を行います.(Nameを設定)

(ウィンドウ右上の)デバッグボタンを押下することでデバッグを実行することができます.

参考: [PhpStorm/WebStorm]JavaScriptデバッガを使おう!
参考: [PhpStorm]ビルトインウェブサーバでPHPアプリを動かす

PhpStorm で関数一覧を表示する

私が使用している PhpStorm は 2019.1 なのですが,関数一覧はどこから表示するのか分からなかったので,調べました.

以下の添付画像の赤枠をクリックすると Structure が表示され,参照できます.
大きめのファイルでもざーっとどのような関数が提供されているのか?確認できますね.

PhpStorm で Git リポジトリにプロジェクトを追加する方法

1. バージョンコントロールで git を選択

VCS – Enable Version Control Integration …

2. プロジェクト フォルダを add,commit する

処理時にアナライズ処理?が入るため,大量にコミットする場合は,SourceTree の方がいいかも?

参考: Gitリポジトリを設定する
参考: JetBrains IDE(IntelliJ IDEAなど)を使う時のgitignoreについて

JetBrains IDE Support と Xdebug helper について調べた件

PhpStorm のデバッグでなんとなく必要なのだろうと Chrome に2つの機能拡張をインストールしていたが機能を把握していなかったので,調べてみた.
結果,PhpStorm のデバッグ作業では,Xdebug helper だけでよいようだ.

日本語のPhpStorm 2019.1 ヘルプには以下の記述がある.

IntelliJ IDEAでアプリケーションをデバッグするために、ChromeのJetBrains IDEサポート拡張をインストールして使用する必要はありません。

▼ JetBrains IDE Support 2.0.10

JetBrains Chrome拡張機能を使用したデバッグセッション中、HTML、CSS、およびJavaScriptのライブ編集を使用できます。また、DOM ツリーと実際のページのソースコードを表示することもできます。

▼ Xdebug helper 1.6.1

Xdebugヘルパー拡張
PHP デバッグ接続のリッスンを開始
IDE key 設定などができる.

以前はブックマークレットでIDE key設定を行ったりしていた記憶がありますが,この機能拡張からも出来るのですね.
個人的には少し頭の整理が出来ました.笑

PhpStorm の日本語ヘルプを読んでみた件

久しぶりに PhpStorm を使用していて日本語ヘルプの存在を知りました.
英語が得意ではないので,必要最低限の箇所しか読んでいなかったのですが,これを機会にザーと読み流して気になるところをメモしておきます.

▼ 気になる項目

VimエディターとしてPhpStormを使用する
Toolbox Appを使ってPhpStormを管理する

JetBrains ToolboxアプリはJetBrains製品をインストールするための推奨ツールです。
早期アクセス・プログラム(英語)(EAP)リリースを含むさまざまな製品または同じ製品の複数のバージョンをインストールおよび保守し、必要に応じて更新およびロールバックし、ツールを簡単に削除するために使用します。

PhpStormワークショップ資料
コードとパスの自動補完
ソースコードナビゲーション
PhpStormのキーボードショートカットをマスターする

▼ キーボード ショートカット

どこでも検索 PhpStormウィンドウの右上隅にある虫めがねアイコン search_everywhere をクリックするか、Shift を2回押します
基本補完 ⌃Space
宣言に移動 ⌘B
実装に移動 ⌥⌘B
エラーまたは警告間を移動する F2 または ⇧F2
ナビゲーションにフォーカスを移動する ⌘↑
ウィンドウからエディターにフォーカスを切り替える

PhpStorm で JavaScript をデバッグする方法

PhpStorm で JavaScript のデバッグができるとは知っていたが試したことがなかった.
やってみたらとても簡単だったので,設定ポイントをメモしておきます.

▼ 設定ポイント

– Run/Debug Configurations([Run] – [Edit Configurations…] を選択)に JavaScript デバッグ設定ができているか?

JavaScript デバッグ設定ができていれば,エディタの右上のプルダウンリストで選択できる.
ブレークポイントを指定して,デバッグ ボタンを押下すると,ブラウザが起動し,指定行でブレークすることができる.

PHP Storm の Xdebug 設定で困ったら確認する点

先日,何度も行っている PHP Storm の Xdebug 設定が行えず,少し調べたのでメモしておきます.

▼ 使用している環境

MAMP バージョン4.1.1 (492)
PHP Version 7.0.15
PhpStorm Version 2017.1.4

PHP Storm にてデバッグが行えない場合,以下の点を確認します.

・PHP Storm にてデバッグの設定がされているか?
・php.ini に xdebug の設定がされているか?
・php.ini の xdebug 設定が適切か?
・xdebug が動作しているか?

PHP Storm のデバッグ設定についてはたくさん情報が公開されているので,あまり間違いはないかと思いますので,ざっと以下の事柄を確認すればよいかと思います.

▼ PHP Storm の PHP Server設定

Preferences > Languages & Frameworks > PHP > Debug
xdebug のデバッグポート番号を確認します.

Preferences > Languages & Frameworks > PHP > Servers
MAMP を使用している場合,正しくポート番号などが設定されているか?確認します.

▼ PHP Storm の リモートデバッグ設定

RUN > Edit Configurations…
Defaults > PHP Remote Debug
一応,こちらも Preferences の設定が反映されているか?確認します.

次に php.ini に xdebug の設定がされているか?確認します.
適用されている php.ini ファイルは環境により異なりますので,phpInfo により確認します.
私の場合,MAMP を使用しているので,MAMP の phpInfo より以下の項目を確認しました.

▼ phpInfo から .ini ファイルを特定する

Loaded Configuration File」項目の設定を参照する.
/Applications/MAMP/bin/php/php7.0.15/conf/php.ini

▼ xdebug 設定

上記の .ini ファイルを開き,[xdebug] セクションを確認します.
問題があった環境では以下のような設定になっていました.
一見問題がないような気がしますが,「xdebug.remote_connect_back」が設定されているとデバッグが行えないことがあるようです.

zend_extension="/Applications/MAMP/bin/php/php7.0.15/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
; zend_extension="/usr/libexec/apache2/xdebug.so"
xdebug.remote_enable = On
xdebug.remote_handler = dbgp
xdebug.remote_host = localhost
xdebug.remote_port = 9000
xdebug.profiler_enable = 1
xdebug.profiler_output_dir="/var/tmp/xdebug"
xdebug.idekey = "PHPSTORM"
xdebug.remote_connect_back = on   // ここが問題だった

remote_connect_back をオフにして動作を確認します.
私の環境では,この設定がオンになっていたためデバッグできなかったようです.

xdebug.remote_connect_back=0
または
xdebug.remote_connect_back=off

xdebug.remote_connect_back は,Xdebug 2.1 から追加された設定で xdebug.remote_host をコメントアウトして,この設定を追加すると,複数のリモート バッグ環境に対応できるとのこと.

▼ ブックマークレットを使わずに,常にデバッグするには

xdebug の設定で,idekey を設定して,remote_autostart をオンにしておけばよいようです.

xdebug.remote_autostart=1

参考:This section describes all available configuration settings available in Xdebug.

設定を変更した際には,サーバの再起動を行います.
再度,phpInfo で xdebug が有効になっているか確認します.

▼ xdebug が動作しているか?

ターミナルを開き,以下のコマンドで確認することができます.

$ lsof -n -P -i :9000

環境によっては,ポート番号: 9000 でデバッグできず,9001 などにされている方もいるようです.

上記の事柄が問題なければ,ツールバーにある「listen php debug connections」をクリックします.
スタートするとアイコンの上部が緑色になるはずです.

では!

PhpStorm キーボード操作について

最近、PhpStorm を始めたので、個人的によく使うキーボード操作をまとめた。

PhpStorm ver 7.1.3
Mac OS X 10.5+

エディタ操作 キー
定義へジャンプ cmd + b
進む、戻る opt + cmd + ← / →
文字列行を選択する shift + ↑ / ↓
インデントする tab
インデントを戻す tab + shift
フォーマットを整える opt + cmd + l (エル)
選択箇所のインデントをそろえる ctrl + opt + i
ステートメントを閉じる shift + cmd + return
行選択 / 単語選択 opt + ↑ / ↓
行を連結する ctrl + shift + j
行を複製する cmd + d
行を削除する cmd + del
カーソル行を上に移動する cmd + shift + ↑
カーソル行の下に行を追加する shift + enter
現行ファイルのパスをコピーする cmd + shift + c
指定行へ移動する cmd + l
検索の操作 キー
ファイル検索 cmd + shift + f
どこでも検索(※1) shiftを2回押下
最近開いたファイルを参照 cmd + e

※1: ファイル、アクション、クラス、シンボル、設定、およびUI要素を単一のエントリポイントから検索

コメントの操作 キー
コメントする / 解除する cmd + /
デバッグ操作 キー
ステップイン F7
ステップアウト Shift + F8
プロジェクトビューからソースファイルへの操作 キー
プロジェクト ビューを表示する. Cmd + 1
プロジェクト ビューでフォーカスがあるファイルのソースコードを表示する. Cmd + ↓
ブックマークの操作 キー
ブックマーク0番 ctrl + shift + 0
ブックマーク0番へジャンプ ctrl + 0

【コメント】
shift + enter って結構使うなぁー