環境
VSCode : バージョン: 1.47.3
PHP 7.4.1
xampp
VSCodeのデバッグの設定をまだされてない場合は下記から設定してください。
それでは前回に引き続き今回はブラウザ側からフォームの送信ボタンを押したと想定してVSCodeでブレイクポイントを設定して変数の中身を見ていきたいと思います。
それではいってみましょう(*^^)v
launch.jsonファイルの編集
実行マークをクリックします。
launch.jsonファイルを作成しますをクリック
testをクリック
下記のような初期状態のlaunch.jsonファイルが開きます。
下記のように編集します。
コピぺ↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | { // IntelliSense を使用して利用可能な属性を学べます。 // 既存の属性の説明をホバーして表示します。 // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387 "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 } ] } |
ブラウザ側からデバッグ
test.php（右画面）のechoのライン（14行目）にブレイクポイント（赤丸）を設定して左上のListen for XDebug(test)を選択しての再生マークをクリックします。
※もし目的の名前のフォルダ名が出てこなかったらワークスペースに使用するファイルのフォルダを追加してください。
下の箇所がオレンジ色に変わると実行開始の合図です。（VSCodeの外観テンプレートによっては色が変わりません）
xamppのapacheが起動してるのを確認して、ブラウザのhttp://localhost/test/test.phpを表示後、
赤枠の更新ボタンをクリックします。
VSCodeを開くと先ほどの右側の赤丸が黄色い枠に囲まれechoの場所で一時中断してることがわかります。
左画面を見ると変数と連想配列の中身が見事に丸見えになってます。
終了するときはF5キーを数回押すか画面の右上部にある赤の四角い停止ボタンを押せば終了できます。
まとめ
ブラウザからのデバッグ方法がわかったのでフォームの送信ボタンを押したときなどにブレークポイントで一時中断させて、変数の値を確認できるのでかなり重宝できる機能が手に入ったので作業効率があがり有効活用できるかと思います。
以上です。
