Cannot debug php line by line in vscode - php

Question

Given this setting in my vscode
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9003,
"hostname":"::1",
"pathMappings": {
"/var/www/html/": "${workspaceRoot}/item-street"
}
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"hostname": "::1",
"port": 9003
}
]
}
and xdebug.ini
zend_extension=xdebug.so
xdebug.mode=debug
xdebug.client_port=9003
xdebug.discover_client_host=1
This xdebug configuration is located in /etc/php/8.0/mods-available/ in WSL2 Ubuntu-20.04
following the setting here
https://github.com/felixfbecker/vscode-php-debug
But adding break point on php code and pressing f5, and visit the local php project in chrome
just nothing happen.
I did also read the following
Setting up VSCode with xdebug: pathMapping
VSCode - XDebug connected to client but break points does not work
but seems doesn't work to my case.
Do you know why?
previously its fine but now it's not

Answer 1

Just found an answer myself. On VSCode click the remote explorer not sure if this is really part of it and next install PHP debugger extension on Google Chrome.
Put a break point on PHP file, click PHP debugger on chrome, press f5 on VSCode, and it worked.
Edit:
My initial statement works, but not really the answer.
The actual answer is the https://github.com/felixfbecker/vscode-php-debug only support port:9000 or it's just xdebug the only support port 9000.
So instead of
xdebug.client_port=9003
Set it as
xdebug.client_port=9000