---
title: Debugging PHP with VS Code, WSL 2 (Ubuntu 22.04), PHP 8.1 and Xdebug 3
kind: note
description: 'Prerequisites Windows 11 Visual Studio Code Steps Install WSL 2 and Ubuntu 22.04 Start Ubuntu One of: Click Open an Ubuntu tab in Windows Terminal In Ubuntu 1. Add Ondřej Surý''s PPA: 1. Install Xdebug…'
words: 199
readingMinutes: 1
created: '2023-04-09T00:00:00.000Z'
updated: '2024-08-17T20:24:35+02:00'
---
## Prerequisites
- [Windows](/notes/microsoft-windows) 11
- [Visual Studio Code](/notes/vscode)
## Steps
### Install [WSL 2](https://learn.microsoft.com/en-us/windows/wsl/install) and [Ubuntu](/notes/ubuntu) 22.04
```powershell (elevated)
wsl --install
```
### Start Ubuntu
One of:
- Click `Start` > `Ubuntu`
- Open an Ubuntu tab in <span class="dead-link">Windows Terminal</span>
### In Ubuntu
1. Add [Ondřej Surý](https://launchpad.net/~ondrej)'s [PPA](https://help.ubuntu.com/community/PPA):
	```bash
	sudo add-apt-repository ppa:ondrej/php
	sudo apt update
	```
1. Install [Xdebug](https://xdebug.org/) 3.2.0 for PHP 8.1 (this will also install PHP 8.1):
	```bash
	sudo apt install -y php8.1-xdebug
	```
1. Open `/etc/php/8.1/cli/conf.d/20-xdebug.ini` in an editor and paste the following configuration (the first line should already exist):
	```
	zend_extension = xdebug.so
	xdebug.mode = develop,debug
	xdebug.discover_client_host = 1
	```
1. Create a project folder:
	```bash
	mkdir ~/demo
	cd ~/demo
	mkdir .vscode
	```
1. Create a test file `~/demo/index.php` with the following contents:
	```php
	<?php
	 phpinfo();
	?>
	```
1. Start the [PHP](/notes/php) web server:
	```bash
	php -S localhost:8080
	```
### In VS Code
1. Install the [WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) extension like this:

   Press `F1`, press `Backspace`, paste the following command and press `Enter`:

   ```text
   ext install ms-vscode-remote.remote-wsl
   ```

1. Install the [PHP Debug](https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug) extension like this:

   Press `F1`, press `Backspace`, paste the following command and press `Enter`:

   ```text
   ext install xdebug.php-debug
   ```

1. Open the project folder in WSL like this:
   1. Press `F1`, enter `WSL: Connect to WSL` and press `Enter`
   1. Select the folder `demo`

1. Create the file `~/demo/.vscode/launch.json` with the following contents:

   ```json
   {
     "configurations": [
       {
         "name": "Listen for XDebug",
         "type": "php",
         "request": "launch"
       }
     ]
   }
   ```

1. Open the file `index.php`

1. Set a breakpoint on the second line

1. Press `F5` to start debugging

### In your web browser

1. Install "Xdebug helper" extension

   - [Edge](https://microsoftedge.microsoft.com/addons/detail/xdebug-helper/ggnngifabofaddiejjeagbaebkejomen)
   - [Chrome](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc)
   - [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/xdebug-helper-for-firefox/)
   - [Safari](https://apps.apple.com/app/safari-xdebug-toggle/id1437227804?mt=12)

1. Go to <http://localhost:8080/>

1. Click the extension's icon and enable it

1. Reload the page

The breakpoint should now be hit.