Software &> Sysadmin &> Devops &> SRE

Docker: LAMP development environment with XDebug + VSC ready to use! (a pampered container) – Part 4 – debug in Visual Studio Code

Introduction to VSC: Visual Studio Code

Maybe you don’t know VSC? Don’t panic, team Bichon will introduce you to him.

Visual Studio Code is a free, extensible, open source code editor developed by Microsoft for Windows, Linux and macOS.

This is an excellent alternative to JetBrains IDEs, and to the Eclipse IDE.

If you haven’t tried it yet, I invite you to download it, it will be useful for the rest of this tutorial.

Enable debugging on VSC for your PHP project

Install the necessary VSC extensions

If you are installing VSC for the first time then you will have to install the following extensions.

3 required extensions:

  • Docker
  • Remote – Containers
  • PHP debug

And 3 optional extensions:

  • PHP extension pack
  • PHP IntelliSense
  • PHP-Autocomplete

To install extensions you have to go through the menu in the left bar.

You will also notice that there is a small search form allowing you to apply a search filter.

Attachez votre Visual Studio Code au conteneur docker

Open the folder containing the source code of your project:

vsc open folder
vsc open folder 2

Then, click on the green area at the bottom left of the editor (that small green area is available because you have previously installed the Remote – Containers extension in your VSC):

vsc attach to container

A drop-down menu opens, click on “Remote-Containers: Attach to Running Container…”

vsc attach to container 2

Then select the container devcontainer_dockerltb_1:

attach to container 3

A new Visual Studio Code will open, you can close the previous window. In this new window you will click again on “Open Folder” and select the folder of the container that “maps” the source of your project present on your PC, that is the folder /var/www/

attach container

Enable the debug

In the vertical menu on the left you can see the “bug” icon.

When you click on this menu you get:

vsc debug configuration

Click on the link “create a launch.json file” (a drop-down menu will open, select Docker – debug in container) and a launch.json tab opens:

vsc debug configure 2

Replace the content of the file launch.json by this one:

    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit:
    "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

Save the file.

A debug button will appear:

vsc debug configuration 1

Click on the green arrow to start the debug:

vsc debug conf error

Oh no! There is an error. Hmm…To get rid of this error click on the left menu “Extensions” (icon that looks like a tetris, or Ctrl+Shift+X)

vsc debug conf 3

Install the PHP Debug (from Felix Becker) extension by clicking on the green button “Install in Container lampx:v1.0”.

vsc debug 4

We can now set breakpoints on our index.php page by clicking in the margin of the source code (a small red dot is displayed).

You can try to start the debug again:

This time there’s no error.

Go back to your internet browser, and do a refresh (F5) of the url http://localhost:7080/ and you will see a notification of your VSC listening in debug mode and when you go to your VSC you can see that the execution is paused on a breakpoint.

vsc debug conf 5

You can notice that on the left side of your screen are displayed the local and “super global” variables. In the WATCH field you can add expressions.

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2024 Nicodevlog — Powered by WordPress

Theme by Anders NorenUp ↑