How to set up VSCode, PHP Debug and XDebug (Windows 10)

I want to use VSCode’s ‘PHP Debug’ plugin with Xdebug to debug PHP scripts.

But when I choose “Debug|Start Debugging F5” the little debug pop-up appears and I am stuck. Buttons for Pause, Restart, Stop are active. Buttons for Step over, into, out are inactive (greyed out). Nothing happens in the debug console.

(1) VSCode 1.42.1 is installed

(2) XAMPP v3.2.4 is up and running

(3) Xdebug is installed using the wizzard and pasting my phpinfo() data to determine the correct version. When I start ‘admin’ from XAMPP Control Panel and review phpinfo, the browser shows me (amongst many other things):

[...]
This program makes use of the Zend Scripting Language Engine: 
  Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Xdebug v2.9.2, Copyright (c) 2002-2020, by Derick Rethans
[...]

(4) php.ini has

[XDEBUG]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.show_local_vars = 1
xdebug.remote_log = "C:Program Files_xamppphplogsxdebug.log"
zend_extension = "php_xdebug-2.9.2-7.4-vc15-x86_64.dll"

(please note that “Program Files_” is NOT the protected “Program Files” directory, XAMPP has write access as shown for point (9) below)

(5) the Windows path has C:Program Files_xamppphp; in it

(6) when I use Code Runner extension in VSCode to run a “Hello World.php” script is runs just fine

(7) launch.json for the VSCode debugger has

"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,
    }
] 

(8) my Windows firewall has an inbound rule to allow TCP traffic on port 9000.

(9) when I just run the code, xdebug.log (see php.ini) is updated with

[94396] Log opened at 2020-03-08 07:45:28
[94396] I: Connecting to configured address/port: localhost:9000.
[94396] E: Time-out connecting to client (Waited: 200 ms). :-(
[94396] Log closed at 2020-03-08 07:45:28

But when I use “Debug|Start Debugging F5” nothing happens in xdebug.log.

That is all the information that I thought relevant so far. Which leaves me like so:

me -> update_status("at wit's end")

Do you wizards out there have any idea where to dig? Which config file to tweak? Which log file to consult?

footnote: debugging of Python scripts in VSCode works just as expected.

Answer

@LazyOne’s comment provided the clue and the tools to stumble upon the solution …

And the answer turns out to be quite embarrassing.

Long story (how to check that VSCode is listening on port 9000)

1. start XAMPP, start VSCode
2. open your php script
3. set a breakpoint
4. open a Linux shell (I used Bash on Ubuntu on Windows)
5. run telnet 0.0.0.0 9000 or telnet localhost 9000 in the shell and observe the connection fail

root ~ $ telnet localhost 9000 
Trying 127.0.0.1... 
telnet: Unable to connect to remote host: Connection refused 
root ~ $ telnet 0.0.0.0 9000
Trying 0.0.0.0... 
telnet: Unable to connect to remote host: Connection refused

4. start debugging and see the frozen debug pop-up as described above
5. run telnet 0.0.0.0 9000 or telnet localhost 9000 in the shell and note the difference: you are connected to VScode!

root ~ $ telnet 0.0.0.0 9000 
Trying 0.0.0.0... 
Connected to 0.0.0.0.
Escape character is '^]'.

6. click the stop button on the frozen debug pop-up and observe in the shell

stop -i 1 Connection closed by foreign host.
root ~ $ 

Conclude that VSCode is indeed listening to both 0.0.0.0:9000 and localhost:9000.

7. scratch your head and go back to VSCode
8. start debugging
9. notice the orange status bar at the bottom that says “Listen to XDebug”
10. notice the drop down menu just below the menu bar that says “green arrow” and “Listen for XDebug”
11. explore the drop down and (re)discover the second configuration “Launch currently open script”, realize/remember that your launch.json had 2 configurations
12. click the green arrow when “Launch currently open script” is selected, see a error pop up along the lines “listen EARDRINUSE: address already in use :::9000”
13. cancel the error message, stop debugging by clicking on the stop button of debug pop-up, notice that menu bar at the bottom turns blue
14. click the green arrow when “Launch currently open script” shows in the drop-down again … and notice that debugging starts as expected
15. rejoice! praise @LazyOne for their help! thank the heavens for the stackoverflow community!
16. the “Listen for XDebug” configuration in launch.json is used to debug a script that was started from a browser session: (i) set your breakpoints in VSCode, (ii) start debugging with “Listen for XDebug” configuration, (iii) start the scripts by initiating a request i the browser, (iv) observe VSCode if a breakpoint is triggered while the request is processed

Short Story

Make sure that “Launch currently open script” is selected as configuration when you start debugging your php script in VSCode, see screenshot below.

Afterthought

I have changed my launch.json to

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

This way the “Launch currently open script” is the default and will be used when I start debugging with “Debug|Start Debugging F5” from the main menu.