デバッグ」タグアーカイブ

PHPをWindows 10上のVisual Studio Codeを使って「Webサーバなしで」デバッグする方法

Windows 10でPHPをサーバサイド開発ではなく、VBScriptやPowerShellと同じようにローカルで実行するスクリプトとして使っている。

MicrosoftのVisual Studio Codeを使えばIntellisenseの自動補完でコーディングもできて便利だが、どうすればデバッグでステップ実行ができるのか、ネットで調べ始めた。

とりえあずXdebugというPHPの拡張機能(DLLファイル)が必要なことは分かった。

Xdebug – Debugger and Profiler Tool for PHP

ところが、Xdebugの使い方について、リモートのWebサーバやローカルにApacheかIISで構築したWebサーバでPHPを動かす前提の記事ばかりで参考にならない。

試行錯誤してようやくWebサーバなしでデバッグする方法が分かった。

すでにPHPスクリプトは実行できる状態になっているとする。

(1) XdebugのDLLのダウンロード

上記リンク先からXdebugのDLLファイルをダウンロードし、PHPのインストールフォルダ配下の「ext」フォルダ内に保存する。長いファイル名のままでいい。

ただしダウンロードするDLLファイルのバージョンを間違えないこと。

正しいバージョンをダウンロードするには、Windowsのコマンドラインで「php.exe -i」を実行、出力結果部分だけをコピーし、Xdebugの下記ページに貼り付け、「Analyse my phpinfo() output」ボタンをクリックする。

Xdebug: Support; Tailored Installation Instructions

すると正しいバージョンのダウンロードリンクが自動的に表示される。

(2) php.iniファイルの編集

php.iniファイルの冒頭に以下の内容を追記する。

zend_extension = C:\php\ext\php_xdebug-2.7.2-7.3-vc15-x86_64.dll
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_host = 127.0.0.1
xdebug.remote_port = 9000

「zend_extension」の後のDLLファイルのフルパスは、自分がダウンロードしたDLLファイルのフルパスに適宜変更すること。その他はこのままコピペすればよい。

Webサーバなしでなのに、どうしてremote_hostやremote_portの指定が必要なのかと思うが、これらの記述がないとXdebugが動いてくれないので、何も考えずに記述すること。

ここまででXdebugが正しく動くかどうかは、コマンドラインプロンプトで先ほどの「php.exe -i」を再度実行し、以下のメッセージが表示されないことを確認すればよい。

Failed loading C:\php\ext\php_xdebug-2.x.x-x.x-vc15-x86_64.dll

(3) Visual Studio Codeに拡張機能 PHP Debug をインストール

Visual Studio Codeを起動、メニューの「表示>拡張機能」をクリック。

画面左上に「Marketplace で拡張機能を検索する」という入力欄が出てくるので「PHP Debug」と入力。緑色の「インストール」ボタンをクリックする。

ついでに「PHP IntelliSense」がインストールされていなければ、「PHP IntelliSense」と入力。同様に緑色の「インストール」ボタンをクリックしてインストールする。

(4) 編集するPHPファイルのあるフォルダを Visual Studio Codeで開く

筆者はここでつまずいた。PHPファイルを編集するんだから、そのPHPファイルを開けばいいと普通は思う。

しかしXdebugでデバッグするには、PHPファイルのあるフォルダを開く必要がある

Visual Studio Codeを起動したら、メニュー「ファイル>フォルダーを開く…」をクリックする。

そして編集したいPHPファイルのあるフォルダを開いて「フォルダーの選択」ボタンをクリックする。

その後、メニュー「表示>エクスプローラー」をクリックし、左側に選択したフォルダ内のファイル一覧が出てきたらOK。

本来、Visual Studio Codeはフォルダ単位(プロジェクト単位)でPHPをコーディングするもので、PHPファイルを単体でコーディングするものではないので、ファイルではなくフォルダーを開くのが正しい。

(5) 編集したいPHPファイルを開く

左に表示されたフォルダ内のファイル一覧で、編集したいPHPファイルをクリックすると、右側のエディター部分にPHPファイルの中身が表示される。

(6) launch.json ファイルを作成する

このlaunch.jsonファイルをどうやって作成すればいいのかが、どの記事にも書かれていなかった。

メニュー「デバッグ>構成を開く」をクリックすればいい。

すると開いているフォルダ内に「.vscode」というフォルダが自動作成され、その中にlaunch.jsonファイルが自動作成される。

そして自動作成されたlaunch.jsonがエディター画面に自動的に開く。

中身はだいたい以下のようになっているはず。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

このうち後半の「Launch currently open script」の設定部分の「”port”: 9000」という行の直下に、次のような行を追加する。

"runtimeExecutable": "c:\\php\\php.exe"

runtimeExecutableというパラメータに、php.exeのフルパスを指定する。フルパスは自分の環境に合わせて正しく指定すること。

さらに、前半の「Listen for XDebug」のパラメータ設定部分をまるごと削除してしまう。

launch.jsonファイルの中身全体は以下のようになる。太字部分が追加した1行。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
            "runtimeExecutable": "c:\\php\\php.exe"
        }
    ]
}

編集したらメニュー「ファイル>保存」やCtrl + Sで保存し、このJSONファイルのタブは閉じてしまっていい。

(7) デバッグしてみる

以上で準備はととのったので、実際にデバッグしてみる。

何度も書くが、PHPファイルを単体で開くのではなく、あくまでメニュー「ファイル>フォルダを開く…」でフォルダを開くこと。

つまり左側に開いたフォルダ内のファイル一覧を表示できる状態にすること。(左上隅の書類のアイコンをクリックすると表示、非表示を切り替えられる)

そのファイル一覧からデバッグしたいPHPファイルを開く。

そして適当な場所にF9キーでブレークポイントを設定してみる。(行頭に赤丸が付く)

F5キーでデバッグ実行を開始する。(Ctrl + F5だとデバッグなしの単なる実行になる)

するとデバッグ実行の状態になり、F10やF11でステップ実行ができる。

上記で「launch.json」ファイルから「Listen for XDebug」のデバッグ構成部分を削除したのは、この構成ではステップ実行のデバッグができないため。

上記で削除しておいたので使えるデバッグ構成は「Launch currently open script」のみとなり、正しくステップ実行ができる。

ついにWebサーバなしでPHPのデバッグができるようになった。

(8) 他のフォルダにあるPHPファイルをデバッグする場合

ここまででお分かりのように、PHPファイルのあるフォルダ配下に「.vscode」というフォルダと、そのフォルダ内に上記の「launch.json」と同じ内容の「launch.json」ファイルが必要になる。

そのつど上記の手順で作成するのは面倒なので、「.vscode」フォルダごとコピペすればいい。

これでechoやログファイルへの書き出し結果を見ながらデバッグをする手間がなくなり、楽しくPHPをスクリプト言語として使える。

AndroidのScreenCaptureを取るまでがとっても面倒

Androidの画面キャプチャを取るまでが、とっても面倒だった、というお話。
インストール先のPCは32bit Windowsなので、下記のページから「Recommended(おすすめ)」となっているWindows用のインストーラー(exe形式)をダウンロードし、実行した。
すると、2つめの画面でJava SE(Standard Edition) SDKがないというメッセージが表示され、それ以上インストールが進まない。
そこでその画面にあるOracleサイトへのボタンをクリックすると、Webブラウザが立ち上がってOracleのJava Standard Edition SDKのダウンロード画面が開く。
そのページを少しスクロールすると、Java Standard Editionの「JDKダウンロード」という、赤字に白文字のボタンがあるので、これをクリック。(これを書いている時点でのJDKのバージョンは6)
すると、英語のダウンロード・ウィザード画面に遷移するので、まず「Platform」欄で「Windows」を選択し、「I agree to the Java SE Development Kit 6u24 License Agreement」にチェックマークを入れ、「Continue」ボタンをクリック。
画面が切り替わり、「jdk-6u24-windows-i586.exe」というファイルへのリンクがあるので、これをクリックしてダウンロード。ダウンロード後のファイルを実行してJDKをインストールする。
ここまでは、いちおう順調。
JDKのインストールが完了したので、先程のAndroid SDKのインストーラーをダブルクリックして起動する。
ところが、やっぱり2つめの画面でJava SE(Standard Edition) SDKがないというメッセージが表示され、インストールを進められない。
過去にJDKをインストールした経験から、たぶんJDKのコンパイラのあるbinフォルダにWindowsのPATHが通っていないのではと思い、環境変数を確認してみる。
すると、PATHという環境変数にちゃんとjavac.exeのあるbinフォルダへのパスが設定されているではないか。しかし、よく見ると設定されているパスが、一つマイナーバージョンの古いパスになっている。
どうやら、過去に別バージョンのJDKをインストールしたマシンの場合、旧バージョンのbinフォルダへのパスが残ったままとなり、新バージョンのパスが追加されないことが分かった。
そこで、環境変数PATHに設定されているbinフォルダを、いまインストールしたJDKのバージョンに手で書き換えると、無事、コマンドラインプロンプトで、「javac」と入力するだけでJavaコンパイラが実行できた。
これで大丈夫だろうということで、もう一度Android SDKのインストーラーをダブルクリックして起動するが、やっぱり2つめの画面でJava SE SDKがないというメッセージが表示され、インストールが進まない。
なので、インストーラでのインストールは断念して、Android SDKのWindows用インストーラ(exe形式)ではなく、zip形式のファイルをダウンロードし、C:Program Files直下に展開した。
たぶん、C:Program Filesandroid-sdk-windows内のSDK Manager.exeを起動すればいいのだろうと思って、起動すると、追加モジュールをインストールするように、という画面が出てきた。
それを受け入れると、Android開発用の追加モジュールやヘルプドキュメントのダウンロードが始まる。これがかなり時間がかかる。
ようやく終わったところで、スクリーンショットをとるための「ddms.bat」が、「C:Program Filesandroid-sdk-windowstools」配下に見つかる。
いよいよAndroid端末側で、USB接続の設定のデバッグモードをONにし、PCに接続すると、「新しいハードウェアの検索ウィザード」が始まってしまった。
要するに、Android端末用のドライバがまだインストールされていないのだ。(ちなみにここではWindows XP SP3のPCを前提としている)
僕の手持ちのAndroid端末はHTC Desire IIだが、HTC Syncという付属のソフトウェアをPCにインストールしていない状態だと、Android SDKで端末を認識させるためのドライバがない状態らしい。
そこでウェブを検索してみたところ、非常にトリッキーなことをやらなければならないことが分かった。
「C:Program Filesandroid-sdk-windowsextrasgoogleusb_driver」内にある「android_winusb.inf」というファイルの、[Google.NTx86]セクションに、以下の3行を追加しなければいけないらしいのだ。
;HTC Desire
%SingleAdbInterface% = USB_Install, USBVID_0BB4&PID_0C87
%CompositeAdbInterface% = USB_Install, USBVID_0BB4&PID_0C87&MI_01
取りあえずこの3行を追加してから、改めてAndroid端末をPCに接続する。
「新しいハードウェアの検索ウィザード」が開始されたら、「はい、今すぐおよびデバイスの接続時には毎回接続します」を選択し、「次へ(N)」をクリック。
「一覧または特定の場所からインストールする」を選択し、「次へ(N)」をクリック。
「次の場所で最適のドライバを検索する」を選択し、「次の場所を含める」にチェックマークが入った状態で「参照(R)」ボタンをクリック。先ほど書き換えたINFファイルのある「C:Program Filesandroid-sdk-windowsextrasgoogleusb_driver」を選択し、「次へ(N)」をクリック。
するとHTC Desire II用のドライバのインストールが無事に始まる。このドライバのインストールはOSの再起動は必要ない。
インストールが終わると、Android端末がAndroid SDKからアクセス可能な状態で接続される。

ここまで来てやっと、「C:Program Filesandroid-sdk-windowstools」配下の「ddms.bat」を起動する。
すると、CUIの黒いウィンドウとともに、「Dalvik Debug Monitor」というウィンドウが立ち上がり、接続中の端末がデバイスとして認識され、黒いウィンドウにAndroid端末の動作ログがずらずらと書き出され、スクロールしていく。
ここで、Dalvik Debug Monitorのメニューにある「Device」⇒「Screen capture」をクリックすると、画面キャプチャを表示するためのウィンドウが立ち上がある。
あとはAndroid端末側でキャプチャを取りたい画面を表示させた状態で、画面キャプチャをとるためのウィンドウの左上「Refresh」ボタンをクリックしてから、右上「Copy」ボタンをクリックする。
そして、Windowsの「ペイント」なり、Excelなりに貼りつけると、画面キャプチャを画像ファイルとして保存できる。
いやいや、たかが画面キャプチャを取るだけのために、ここまで時間をかけなければいけない理由がよく分からない。
まあでもAndroid端末には、それを上回るだけの利便性と将来性があるので、良しとしよう。ははは。