In this post, we will see how to set up a Laravel environment using Docker, Devcontainer, and debug it using Xdebug. I like to use Docker for my development environment because it is easy to set up and it is consistent across different machines. With devcontainer we can use the same environment in Visual Studio Code and Xdebug is a must-have for debugging.
Let's start by creating a new Laravel project using sail (Docker). You'll need to have Docker and Docker Compose installed on your machine. If you don't have it, you can install it by following the instructions on the official website.
You can change 'example-app' to another name.
Open the project in Visual Studio Code and you will be prompted to reopen the project in a devcontainer. Click on the 'Reopen in Container' button and wait for the container to be built. You can check the progress in the bottom right corner of Visual Studio Code.
With the VSCode oppened, you will install the devcontainer extension.
You will notice this .devcontainer folder in the root of the project. 
You can install the extension by clicking on the extensions icon in the sidebar and search 
Here is my .devcontainer/.devcontainer.json I use php inteliphense and xdebug extensions. file:
1) You need to change docker-compose.yml to add new port for xdebug.
2) Change the context and add a copy of vendor/laravel/sail/runtimes/8.3
Add the following lines to the docker-compose.yml file:
3) I like to custom the Dockerfile and add my customizations like install some software: sudo curl, git, git cli and nano, and change the user 'sail' as sudo.
Put the code in right place.
In the .devcontainer/vendor-example/laravel/sail/runtimes/8.3/Dockerfile
Your Dockerfile will look like this: 
4) Add this code in php.ini
5) I like to custom my bash prompt to show my git branch and the current directory.
Change the file start-container
6) Create a debug configuration in VSCode. .vscode/launch.json
7) Check environment variables in .env file.
After installing the extension, you can open the command palette (Ctrl+Shift+P) and type 'Remote-Containers: Reopen in Container'. This will build the container and open the project inside it. Or it will appear a button in the bottom right corner of the window.
Now you can start the container and debug your Laravel application. You can set a breakpoint in your code and start the debug configuration in Visual Studio Code. You can check the progress in the bottom right corner of Visual Studio Code.
To open you application use the browser with the URL localhost.
Ensure there is no other service running on port 80.
