Skip to content

Instantly share code, notes, and snippets.

@antfroger
Last active July 4, 2025 16:09
Show Gist options
  • Save antfroger/1f2b24fdba0f215a41c8a94e8aa062f7 to your computer and use it in GitHub Desktop.
Save antfroger/1f2b24fdba0f215a41c8a94e8aa062f7 to your computer and use it in GitHub Desktop.

Revisions

  1. antfroger revised this gist Nov 30, 2020. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -5,15 +5,15 @@ This is a quick reminder of how I've done that.

    ## Configuring the environment

    **1. Install and configure xdebug in Docker**
    1. **Install and configure xdebug in Docker**
    ```dockerfile
    # Install xdebug according to the Docker image you're using
    RUN pecl install xdebug
    COPY xdebug.ini $PHP_INI_DIR/conf.d/
    ```
    (cf. the [xdebug.ini](#file-xdebug-ini) file in this gist)

    **2. Setup VS Code**
    2. **Setup VS Code**

    [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) is the extension to debug PHP in VS Code.
    Once installed and your project opened, create the configuration file `.vscode/lauch.json`
    @@ -24,7 +24,7 @@ This is a quick reminder of how I've done that.
    * `pathMappings` must associate the path of your app on Docker and the path of your VSCode project
    (do not use an absolute or relative path. You must use the variables VSCode provides)

    **3. Configure Windows Defender Firewall**
    3. **Configure Windows Defender Firewall**

    Even after starting debugging, breakpoints might never be hitten. That's because of Windows Defender Firewall.
    It treats WSL as a public network by default and blocks access. This can be fixed by adding a rule. Just run (with Powershell):
  2. antfroger revised this gist Nov 30, 2020. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,19 @@
    # Configuring xdebug to work with Windows 10 (WSL2), Docker and VS Code

    Configuring your dev environment to be able to use xdebug when you're working on Windows 10 (with WSL2) and Docker with VS Code can be (a bit) tricky.
    Configuring your dev environment to be able to use xdebug when you're working on Windows 10 (with WSL2) and Docker with VS Code can be (a bit) tricky.
    This is a quick reminder of how I've done that.

    ## Configuring the environment

    1. **Install and configure xdebug in Docker**
    **1. Install and configure xdebug in Docker**
    ```dockerfile
    # Install xdebug according to the Docker image you're using
    RUN pecl install xdebug
    COPY xdebug.ini $PHP_INI_DIR/conf.d/
    ```
    (cf. the [xdebug.ini](#file-xdebug-ini) file in this gist)

    2. **Setup VS Code**
    **2. Setup VS Code**

    [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) is the extension to debug PHP in VS Code.
    Once installed and your project opened, create the configuration file `.vscode/lauch.json`
    @@ -24,7 +24,7 @@ This is a quick reminder of how I've done that.
    * `pathMappings` must associate the path of your app on Docker and the path of your VSCode project
    (do not use an absolute or relative path. You must use the variables VSCode provides)

    3. **Configure Windows Defender Firewall**
    **3. Configure Windows Defender Firewall**

    Even after starting debugging, breakpoints might never be hitten. That's because of Windows Defender Firewall.
    It treats WSL as a public network by default and blocks access. This can be fixed by adding a rule. Just run (with Powershell):
    @@ -39,7 +39,7 @@ Now that your environment is set up, it's time to debug!

    1. Run a debugging session

    In the left side panel of VSCode, select the Debug view (or just press `Ctrl + Shift + D`), make sure that the chosen configuration is the one you added in the file lauch.json. Then click on the little green triangle titled Start debugging.
    In the left side panel of VSCode, select the "Debug view" (or just press `Ctrl + Shift + D`), make sure that the chosen configuration is the one you added in the file lauch.json. Then click on the little green triangle titled "Start debugging".

    2. Add breakpoints wherever you want to debug your app

    @@ -48,8 +48,8 @@ In the left side panel of VSCode, select the Debug view (or just press `Ctrl + S
    Optional:
    You can add [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc) to debug in Chrome.

    Yeah!
    You're ready to create an awesone app!
    **Yeah!
    You're ready to create an awesone app!**

    Want to know more on debugging with xdebug?
    Let's read the ['Step Debugging' doc](https://xdebug.org/docs/step_debug)
  3. antfroger revised this gist Nov 30, 2020. 2 changed files with 18 additions and 13 deletions.
    28 changes: 16 additions & 12 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -5,26 +5,28 @@ This is a quick reminder of how I've done that.

    ## Configuring the environment

    1. Install and configure xdebug in Docker
    1. **Install and configure xdebug in Docker**
    ```dockerfile
    # Install xdebug according to the Docker image
    # Install xdebug according to the Docker image you're using
    RUN pecl install xdebug
    COPY docker/xdebug.ini $PHP_INI_DIR/conf.d/
    COPY xdebug.ini $PHP_INI_DIR/conf.d/
    ```
    (cf. the [xdebug.ini](#file-xdebug-ini) file in this gist)

    2. Setup VS Code
    [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) is the extension to debug PHP in VS Code.
    Once installed and your project opened, create the configuration file `.vscode/lauch.json`
    2. **Setup VS Code**

    [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) is the extension to debug PHP in VS Code.
    Once installed and your project opened, create the configuration file `.vscode/lauch.json`
    (cf. the [lauch.json](#file-lauch-json) file in this gist)

    Two impostant things here :
    * The port must match the one defined in xdebug.ini
    * `pathMappings` must associate the path of your app on Docker and the path of your VSCode project
    * `pathMappings` must associate the path of your app on Docker and the path of your VSCode project
    (do not use an absolute or relative path. You must use the variables VSCode provides)

    3. Configure Windows Defender Firewall
    Even after starting debugging, breakpoints might never be hitten. That's because of Windows Defender Firewall.
    3. **Configure Windows Defender Firewall**

    Even after starting debugging, breakpoints might never be hitten. That's because of Windows Defender Firewall.
    It treats WSL as a public network by default and blocks access. This can be fixed by adding a rule. Just run (with Powershell):
    ```powershell
    New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias "vEthernet (WSL)" -Action Allow
    @@ -36,16 +38,18 @@ This is a quick reminder of how I've done that.
    Now that your environment is set up, it's time to debug!

    1. Run a debugging session

    In the left side panel of VSCode, select the Debug view (or just press `Ctrl + Shift + D`), make sure that the chosen configuration is the one you added in the file lauch.json. Then click on the little green triangle titled “Start debugging”.

    2. Add breakpoints wherever you want to debug your app

    3. Refresh your browser!

    Optional:
    Optional:
    You can add [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc) to debug in Chrome.

    Yeah! You're ready to create an awesone app!
    Yeah!
    You're ready to create an awesone app!
    Want to know more on debugging with xdebug?
    Want to know more on debugging with xdebug?
    Let's read the ['Step Debugging' doc](https://xdebug.org/docs/step_debug)
    3 changes: 2 additions & 1 deletion lauch.json
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,8 @@
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 5902, // I changed the port, by default xdebug 3 uses 9003
    // I changed the port, by default xdebug 3 uses 9003
    "port": 5902,
    "pathMappings": {
    "/var/www/my-app": "${workspaceFolder}"
    },
  4. antfroger revised this gist Nov 30, 2020. 3 changed files with 43 additions and 29 deletions.
    65 changes: 39 additions & 26 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -1,38 +1,51 @@
    # Configuring xdebug to work with Windows 10, WSL2, Docker and VS Code
    # Configuring xdebug to work with Windows 10 (WSL2), Docker and VS Code

    ## Install and configure environment
    Configuring your dev environment to be able to use xdebug when you're working on Windows 10 (with WSL2) and Docker with VS Code can be (a bit) tricky.
    This is a quick reminder of how I've done that.

    1. Install and configure xdebug in Docker
    ## Configuring the environment

    ```dockerfile
    RUN ...
    COPY ...
    ```
    1. Install and configure xdebug in Docker
    ```dockerfile
    # Install xdebug according to the Docker image
    RUN pecl install xdebug
    COPY docker/xdebug.ini $PHP_INI_DIR/conf.d/
    ```
    (cf. the [xdebug.ini](#file-xdebug-ini) file in this gist)

    2. Setup VS Code
    [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) is the extension to debug PHP in VS Code.
    Once installed and your project opened, create the configuration file `.vscode/lauch.json`
    (cf. the [lauch.json](#file-lauch-json) file in this gist)

    Two impostant things here :
    * The port must match the one defined in xdebug.ini
    * `pathMappings` must associate the path of your app on Docker and the path of your VSCode project
    (do not use an absolute or relative path. You must use the variables VSCode provides)

    3. Configure Windows Defender Firewall
    Even after starting debugging, breakpoints might never be hitten. That's because of Windows Defender Firewall.
    It treats WSL as a public network by default and blocks access. This can be fixed by adding a rule. Just run (with Powershell):
    ```powershell
    New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias "vEthernet (WSL)" -Action Allow
    ```
    More about this issue [here](https://github.com/microsoft/WSL/issues/4585#issuecomment-610061194)
    [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) is the extension to debug PHP in VS Code
    .vscode/lauch.json ...

    ```json

    ```

    3. Debugging in Chrome

    Install [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc) to debug in Chrome
    ## Debug a request
    4. Configure Windows Defender Firewall
    Now that your environment is set up, it's time to debug!

    ```powershell
    New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias "vEthernet (WSL)" -Action Allow
    ```
    More about this issue [here](https://github.com/microsoft/WSL/issues/4585#issuecomment-610061194)
    1. Run a debugging session
    In the left side panel of VSCode, select the Debug view (or just press `Ctrl + Shift + D`), make sure that the chosen configuration is the one you added in the file lauch.json. Then click on the little green triangle titled “Start debugging”.

    2. Add breakpoints wherever you want to debug your app

    More ... https://xdebug.org/docs/step_debug
    3. Refresh your browser!

    ## Debug a request
    Optional:
    You can add [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc) to debug in Chrome.

    Yeah! You're ready to create an awesone app!
    1. Run debugging session
    `Ctrl + Shift + D` ou click on the
    Want to know more on debugging with xdebug?
    Let's read the ['Step Debugging' doc](https://xdebug.org/docs/step_debug)
    2 changes: 1 addition & 1 deletion lauch.json
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 5902,
    "port": 5902, // I changed the port, by default xdebug 3 uses 9003
    "pathMappings": {
    "/var/www/my-app": "${workspaceFolder}"
    },
    5 changes: 3 additions & 2 deletions xdebug.ini
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,8 @@
    zend_extension=/path/to/xdebug.so
    zend_extension=xdebug

    xdebug.mode=debug,develop
    xdebug.client_host=host.docker.internal
    xdebug.client_port=5902
    xdebug.client_port=5902 #same port as in launch.json

    #Uncomment this line to enable xdebug for each request
    #xdebug.start_with_request=yes
  5. antfroger revised this gist Nov 30, 2020. 3 changed files with 21 additions and 7 deletions.
    21 changes: 18 additions & 3 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -1,23 +1,38 @@
    # Configuring xdebug to work with Windows 10, WSL2, Docker and VS Code

    ## Install and configure environment

    1. Install and configure xdebug in Docker
    ```

    ```dockerfile
    RUN ...
    COPY ...
    ```

    2. Setup VS Code

    [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) is the extension to debug PHP in VS Code
    .vscode/lauch.json ...

    ```json

    ```

    3. Debugging in Chrome

    Install [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc) to debug in Chrome

    4. Configure Windows Defender Firewall
    ```

    ```powershell
    New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias "vEthernet (WSL)" -Action Allow
    ```
    More about this issue [here](https://github.com/microsoft/WSL/issues/4585#issuecomment-610061194)


    More ... https://xdebug.org/docs/step_debug
    More ... https://xdebug.org/docs/step_debug

    ## Debug a request

    1. Run debugging session
    `Ctrl + Shift + D` ou click on the
    2 changes: 0 additions & 2 deletions lauch.json
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,3 @@
    # .vscode/lauch.json
    # one configuration file per project
    {
    "version": "0.2.0",
    "configurations": [
    5 changes: 3 additions & 2 deletions xdebug.ini
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    zend_extension=/path/to/xdebug.so

    xdebug.mode=debug,develop
    #xdebug.start_with_request=yes
    xdebug.client_host=host.docker.internal
    xdebug.client_port=5902
    xdebug.client_port=5902
    #Uncomment this line to enable xdebug for each request
    #xdebug.start_with_request=yes
  6. antfroger revised this gist Nov 27, 2020. 2 changed files with 23 additions and 3 deletions.
    24 changes: 22 additions & 2 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,23 @@
    Configuring xdebug to work with Windows 10, WSL2, Docker and VS Code
    # Configuring xdebug to work with Windows 10, WSL2, Docker and VS Code

    [VS Code debugging extension](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug)
    1. Install and configure xdebug in Docker
    ```
    RUN ...
    COPY ...
    ```

    2. Setup VS Code
    [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) is the extension to debug PHP in VS Code
    .vscode/lauch.json ...

    3. Debugging in Chrome
    Install [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc) to debug in Chrome

    4. Configure Windows Defender Firewall
    ```
    New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias "vEthernet (WSL)" -Action Allow
    ```
    More about this issue [here](https://github.com/microsoft/WSL/issues/4585#issuecomment-610061194)


    More ... https://xdebug.org/docs/step_debug
    2 changes: 1 addition & 1 deletion lauch.json
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # .vscode/.vscode/lauch.json
    # .vscode/lauch.json
    # one configuration file per project
    {
    "version": "0.2.0",
  7. antfroger created this gist Nov 27, 2020.
    3 changes: 3 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Configuring xdebug to work with Windows 10, WSL2, Docker and VS Code

    [VS Code debugging extension](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug)
    17 changes: 17 additions & 0 deletions lauch.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    # .vscode/.vscode/lauch.json
    # one configuration file per project
    {
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 5902,
    "pathMappings": {
    "/var/www/my-app": "${workspaceFolder}"
    },
    "hostname": "localhost"
    },
    ]
    }
    6 changes: 6 additions & 0 deletions xdebug.ini
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    zend_extension=/path/to/xdebug.so

    xdebug.mode=debug,develop
    #xdebug.start_with_request=yes
    xdebug.client_host=host.docker.internal
    xdebug.client_port=5902