Getting Xdebug, vsCode, and my container to play together

I've been working for weeks now, probably over a month to get vs code to stop on break points, but everytime I launch the web page it loads and vs code's debugger never stops. I'm doind this in a container and it took several weeks to get xdebug installing right (I only get to work on this stuff on the weekends) and several more weeks to work out two remaining xdebug erros that were appering when I would run echo xdebug_info(); in my php script. It's installed, and I'm no longer getting any errors, but I'm still completely stuck as vs code is not stopping when I load the page in the browser. Any help would be greatly appreciated as I have been unable to move forward with my php Udemy courses for over a month now. Thanks.

// direcotry structure

Code:Garrett@ideaPad-3:newTest3$ ls -lR
.:
total 24
drwxrwxr-x 3 garrett garrett 4096 Mar 17 09:01 docker
-rw-rw-r-- 1 garrett garrett 796 Mar 24 09:32 docker-compose.yml
-rw-rw-r-- 1 garrett garrett 674 Mar 17 10:22 Dockerfile
-rw-rw-r-- 1 garrett garrett 238 Mar 17 09:01 httpd-vhost.conf
-rw-rw-r-- 1 garrett garrett 61 Mar 17 11:10 index.php
drwxrwxr-x 3 garrett garrett 4096 Mar 17 09:01 mariadb

./docker:
total 4
drwxrwxr-x 3 garrett garrett 4096 Mar 17 09:02 php

./docker/php:
total 4
drwxrwxr-x 2 garrett garrett 4096 Mar 17 09:01 conf.d

./docker/php/conf.d:
total 16
-rwxr-xr-x 1 garrett garrett 241 Mar 17 11:02 docker-php-ext-xdebug.ini
-rw-rw-r-- 1 garrett garrett 21 Mar 17 09:01 error_reporting.ini
-rw-rw-r-- 1 garrett garrett 91 Mar 17 10:37 php.ini
-rw-rw-r-- 1 garrett garrett 228 Mar 17 11:47 xdebug.iniNote that docker-php-ext-xdebug.ini & xdebug.ini are identical.

// index.php
PHP Code:<?php

phpinfo();
echo"helloworld";
echoxdebug_info();

?>// docker-php-ext-xdebug.ini
Code:zend_extension=xdebug
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20220829/xdebug.so

[xdebug]
xdebug.mode=debug
xdebug.client_host=127.0.0.53
xdebug.start_with_request=yes
xdebug.log=/tmp/xdebug.log
xdebug.remote_port=9003// launch.json(note that I have tried ./ & ../ for localRoot, ../ seemed correct for my directory structure)
Code:{
// 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": "node",
"request": "attach",
"localRoot": "../",
"remoteRoot": "/var/www/html",
"port": 9003
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 0,
"runtimeArgs": [
"-dxdebug.start_with_request=yes"
],
"env": {
"XDEBUG_MODE": "debug",
"XDEBUG_CONFIG": "client_port=${port}"
}
},
{
"name": "Launch Built-in web server",
"type": "php",
"request": "launch",
"runtimeArgs": [
"-dxdebug.mode=debug",
"-dxdebug.start_with_request=yes",
"-S",
"localhost:0"
],
"program": "",
"cwd": "${workspaceRoot}",
"port": 9003,
"serverReadyAction": {
"pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
"uriFormat": "http://localhost:%s",
"action": "openExternally"
}
}
]
}// Dockerfile
Code:FROM php:8.2-apache
COPY . /var/www/html
COPY ./httpd-vhost.conf /etc/apache/sites_available/
WORKDIR /var/www/html
RUN apt-get update && apt-get install -y \
libfreetype6-dev \
libjpeg62-turbo-dev \
libpng-dev \
&& docker-php-ext-configure gd --with-freetype --with-jpeg \
&& docker-php-ext-install -j$(nproc) gd \
&& docker-php-ext-install pdo_mysql \
&& a2enmod rewrite \
&& pecl install xdebug-3.3.1 && docker-php-ext-enable xdebug
# \
# && sed -i '/LoadModule rewrite_module/s/^#//g' /usr/local/apache2/conf/httpd.conf \
# && sed -i 's#AllowOverride [Nn]one#AllowOverride All#' /usr/local/apache2/conf/httpd.conf
// docker-compose
Code:version: '3.1'

services:
php:
build:
context: .
dockerfile: Dockerfile
volumes:
[./:/var/www/html,
./docker/php/conf.d/php.ini:/usr/local/etc/php/php.ini,
./docker/php/conf.d/xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini,
./docker/php/conf.d/error_reporting.ini:/usr/local/etc/php/conf.d/error_reporting.ini
]
ports:
["8081:80"]
stdin_open: true
tty: true
db:
image: mariadb:10.6
restart: always
volumes:
["./mariadb/data:/var/lib/mysql"]
environment:
MYSQL_ROOT_PASSWORD: notSecureChangeMe
MYSQL_USER: product_db_user
MYSQL_PASSWORD: secret
phpmyadmin:
image: phpmyadmin
restart: always
ports:
- 8001:80
environment:
- PMA_ARBITRARY=1// php.ini
(this file is blank, it just was one line that's commented out)

Thanks.

Update, below or attached is my newest launch.json rendetion, VS Code is still not stopping on my breakpoints when I visit or refresh the stie in my browser but it running the script if I 'Launch currently opened script' in the top left debug Play button/dropdown, in that case it will start walking through the code. A very small victory I guess but not sufficient for web development. Any advice? I'm wanting vs code/xdebug to always be listening to my browsers interation with the site, the way php storm does at my normal dev job. Having a heck of a time getting this up and running at home with Vs Code.

Code:{
// 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": "node",
"request": "attach",
"localRoot": "../",
"remoteRoot": "/var/www/html",
"port": 9003
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9003,
"runtimeArgs": [
"-dxdebug.start_with_request=yes"
],
"env": {
"XDEBUG_MODE": "debug",
"XDEBUG_CONFIG": "client_port=${port}"
}
},
{
"name": "Launch Built-in web server",
"type": "php",
"request": "launch",
"runtimeArgs": [
"-dxdebug.mode=debug",
"-dxdebug.start_with_request=yes",
"-S",
"localhost:80"
],
"program": "",
"cwd": "${workspaceRoot}",
"port": 9003,
"serverReadyAction": {
"pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
"uriFormat": "http://localhost:%s",
"action": "openExternally"
}
}
]
}