How to get Xdebug working with Visual Studio Code?

benriga · October 31, 2017, 2:19am

I’ve been using Local for a few days and find it quite nice. One thing I have not been able to figure out is how to get Xdebug working and configured with Visual Studio Code.

I read in another thread here that for some reason Xdebug only works if you set up the site using Custom. I can’t remember if I installed using Preferred or Custom so I tried exporting and re-importing but when I tried to launch the newly imported site I see the WP install screen. Is that normal?

Is there no way to change the config settings for my existing site to enable Xdebug? I’m comfortable editing config files. Can you point me to the folder where those are located?

Thanks,
Ben

clay · October 31, 2017, 2:54pm

Hi @benriga,

Great question!

I just did some testing and here’s what I came up within a short period of time.

To start with, you’re going to need this VS Code Extension if you don’t already have it: https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug

Then, you’ll want to add the localSourceRoot and serverSourceRoot variables to the project’s launch.json (using the site’s app/public folder as the project root).

Here’s what my launch.json file looks like. You can find this file by clicking the settings icon on the Debug panel in VS 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": "php",
            "request": "launch",
            "port": 9000,
            "localSourceRoot": "${workspaceRoot}",
            "serverSourceRoot": "/app/public"
        }
    ]
}

Once I had the file set up, I installed this Xdebug Chrome Extension to set the Xdebug session cookie in the browser.

So, with all of that installed, here’s how you can start debugging:

Set some breakpoints
Go to the Debug tab in VS Code
Run “Listen for Xdebug”
Go to Chrome and click on the Xdebug helper extension icon and click on Debug
Go to a page that triggers the breakpoint and you should be taken back to VS Code

benriga · November 1, 2017, 2:19am

That’s fantastic. Thanks, Clay. I tried all that but debug is not working for me. I suspect that Xdebug is not enabled yet. It’s not showing up in phpinfo().

How do I enable that? Can you share where the php.ini file is stored?

Thanks,
Ben

clay · November 1, 2017, 2:37pm

Hi Ben,

Xdebug is included and automatically enabled in the “Custom” environment for all PHP versions.

The Preferred environment does not include Xdebug at this time. If you wish to switch your existing Preferred site to the “Custom” environment, here’s the easiest way:

Right-click on the site in Local’s sidebar and go to “Export” and follow the flow
Drag and drop the resulting zip from the previous step and drag-and-drop it onto Local’s main window
Follow the import flow and select “Custom” as the environment

benriga · November 1, 2017, 4:32pm

Thanks, Clay,

I tried that but I found that once the import was done and I launched the new site, it gave me the prompt to select a wordpress language (i.e. like it was starting a new WP install). It feels like there’s a bug in the import/export steps.

I really had not wanted to spend time reinstalling wordpress and manually migrating my site over. Is there really no way to fix my current site. Can you share the folder where all this is? Or if it’s running in VirtualBox can you share how I might get access to that (ftp, ssh, etc)

FWIW, I would suggest that you add Xdebug to the Preferred option. Or make it more obvious that that is one of the things that Custom does over Preferred (it was not clear to me). Or make it an option that can be added or removed from either option. Or maybe the issue is the naming of two methods. Maybe it should be something like Operations/Development instead of preferred/custom. I guess you may have heard some of this feedback before.

Having said all this let me add that I’m still quite pleased with Local. It was seamless to install and get started. Much better than other solutions I’ve tried. I realize I may be a more advanced user so just looking for more info. I’m happy to tinker to get my environment just right.

Thanks for all the help and support,
Ben

clay · November 1, 2017, 4:36pm

Do you know which version of Local you’re running? If you’re on macOS, you can go up to Local by Flywheel then About.

Also, are you on macOS or Windows?

Agreed! We’re going to be improving the new site flow so it shows the differences between the environments in an upcoming version.

benriga · November 1, 2017, 4:49pm

I’m running it on Windows 10.

I installed it about a week or so ago so it’s not an old version or anything like that. I’m at work now so can’t check the exact version right now but I will when I get home later today.

Thanks,
Ben

benriga · November 2, 2017, 1:11am

hmmm. I can’t figure out where to look for the version number.

I was able to find the exe I used to install it (on 10/19) and that would indicate that it’s version 2.0.8
local-by-flywheel-2-0-8-windows.exe

Does that help?

Can you share how I might get access my environment? Where are all the files stored?

Thanks,
Ben

clay · November 2, 2017, 3:17pm

Yup! It is a little harder to find the version number on Windows. We’re going to be adding a dedicated About page that’ll be shared between macOS and Windows.

The files for the site can be revealed by clicking on the arrow beside the site path.

Regarding the import/export flow, can you try the import again and then provide your local-by-flywheel.log file? You can find it by clicking on the menu icon in the top-left to the left of “Local”.

From there, you should see an option that says “Reveal Local’s Log.” After the file shows, please attach it to a reply here.

clay · November 2, 2017, 6:42pm

@benriga,

Also, when you import the site and choose Custom, make sure you select MySQL 5.6. That’s probably why the database failed to import.

We’re going to be improving that so if it detects utf8mb4_unicode_520_ci then it’ll require MySQL 5.6 automatically.

benriga · November 3, 2017, 4:25am

Thanks, Clay,

That link under the site name gives access to the wordpress files. I already have access to those. What I’m looking for is the location of the php exe and php.ini files. How do I get to those if I want to tweak my environment?

Thanks,
Ben

benriga · November 3, 2017, 4:45am

Hi Clay,

I re-ran the export/import process again and it did work for me this time so I now have the custom environment. Xdebug is now working for so my productivity should be 10x now/

This time during the export/import I paid attention to the environment. My initial (preferred) environment had php 7.1.7 and mysql 5.6.37. When I tried to import, php 7.1.7 wasn’t an option so I used 7.1.4. I did select mysql 5.6 but looking at the result I now have 5.6.34 (not 5.6.37). It seems odd that the Preferred and Custom environments are out of sync like that. Is there something I can do to bring those up to the latest?

Thanks for all the help,
Ben

cjwd · December 4, 2017, 10:06pm

Hi Clay,

If flywheel recommends using the Preferred environment so that you can push/pull to your flywheel hosted websites, what is the impact of using the Custom environment. Is there no way to enable Xdebug with the preferred environment?

clay · December 4, 2017, 10:50pm

@benriga,

Glad you got it going!

Preferred is meant to match sites on the current Flywheel platform as close as we can but still be practical for a development environment.

Custom was built with modularity in mind. Considering that, we do not allow Pushing/Pulling from Flywheel since you’ll get undesirable results if there’s a large version difference.

Preferred 1.1 was released after 7.1.4 was on Custom so that’s the reason for the version discrepancy there.

@cjwd,

Right now there’s no way to enable Xdebug on Preferred outside of compiling and enabling it yourself. The best way to use Xdebug in Local is to use the Custom environment.

The Preferred environment is simply more restricted than Custom to keep the experience as similar as possible between Local and Flywheel.

jctekfly · December 17, 2017, 3:09am

EDIT 12-17-2017: So after trying to get this to work all weekend it seems the main issue is even though I have xdebug plugin installed and showing configuration options in flywheel no matter what I do port 9000 isn’t listening. I can go into docket and telnet to port 80 but no matter what I do port 9000 won’t start to listen. If I can figure that part out I feel it will start to work. Anyone have any ideas on how to get xdebug to start to listen on that port? It is what is in the config file. Thanks!

Hey guys, Trying to get this working but my break points are getting hit. I didn’t have xdebug in flywheel so I got the one from this link:

It now shows up and activates but there are 4 options in the remote_host option and I don’t know what to pick.

I am setting it to the same IP that shows up in the phpinfo from flywheel so I assume that is the correct one.

I also have the plugin in chrome for xdebug and it is showing green and in phpinfo I see xdebug and remote is on.

Also when I try to set:

“localSourceRoot”: “${workspaceRoot}”
“serverSourceRoot”: “/app/public”

I get a message that says serverSourceRoot has been depreciated to pathMappings so I tried this:

"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"localSourceRoot": "${workspaceRoot}",
"serverSourceRoot": "/app/public"
}

Debugging starts but it still won’t hit the breakpoints.

Last ?. When you opened the code in visual studio code are you picking the public folder so the first sub folders you have are the wp-content, wp-includes, etc… or are you picking the main root of the site and the first sub folders you have are app conf and logs?

Thanks?

clay · December 18, 2017, 10:51pm

Hi @jctekfly,

Local only opens up ports on the site containers for HTTP, MySQL, and MailCatcher/MailHog.

I think your best bet may be using the remote connect back option.

mrahmadawais · March 22, 2018, 12:35pm

I think you should be using something like this

{
// 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": "php",
		"request": "launch",
		"port": 9000,
		// "stopOnEntry": true,
		"pathMappings": {
			"/var/www/html": "${workspaceRoot}",
			"/app": "/Users/ahmadawais/Documents/Web/Dev/Local/courses/app/"
		}
	},
	{
		"name": "Launch currently open script",
		"type": "php",
		"request": "launch",
		"program": "${file}",
		"cwd": "${fileDirname}",
		"port": 9000
	}
]

}

afragen · April 17, 2018, 5:12pm

So I’m trying to get VS Code working with XDebug, like all the cool kids, but I’m failing miserably.

I’ve installed all the appropriate extensions as above and I think I have my launch.json set up correctly.

{
// 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": "php",
        "request": "launch",
        "port": 9000,
        "pathMappings": {
            "/var/www/html": "${workspaceRoot}",
            "/app/public": "/Users/afragen/Local%20Sites/single/app/public/"
        }
     },
    {
        "name": "Launch currently open script",
        "type": "php",
        "request": "launch",
        "program": "${file}",
        "cwd": "${fileDirname}",
        "port": 9000
    }
]
}

I’ve restarted everything and still I don’t stop on a breakpoint.

FWIW, everything does work in PhpStorm.

Any ideas?

benriga · April 17, 2018, 8:16pm

It’s working fine for me. My launch.json file is below.

BTW, I also made some changes to the php.ini file so that I would not need the browser helper thing. I’ve included the appropriate xdebug section below as well.

I hope some of that is useful to you.

Regards,
Ben

launch.json

    {
    // 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": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/app/public": "${workspaceFolder}",
            },
            "xdebugSettings": {
                "max_children": 256
            },
            "log": false,
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

php.ini

    [Xdebug]
zend_extension = /opt/php/7.1.4/lib/php/extensions/no-debug-non-zts-20160303/xdebug.so
xdebug.remote_enable=1
xdebug.remote_connect_back=On
xdebug.remote_port="9000"
xdebug.profiler_enable=0
;
; Added by Ben Riga Feb 24, 2018
xdebug.remote_autostart = 1
xdebug.var_display_max_depth = 5
xdebug.var_display_max_children = 256
xdebug.var_display_max_data = 1024 
;
;

afragen · April 17, 2018, 8:53pm

Thanks Ben. Getting the pathMappings correct was clearly key.

Topic		Replies	Views
Cannot debug with VS Code after Local update Support xdebug	3	923	February 20, 2023
Can't get it to work Xdebug + VS Code installation , mac	3	924	January 4, 2021
Debug with Local in VSCode Support windows-10 , xdebug , vscode	7	3199	December 20, 2022
xDebug + VSCode - breakpoints not hit when debugging Xdebug + VS Code	6	9852	August 6, 2021
Can no longer debug in VS Code after Local update Xdebug + VS Code	14	1835	November 29, 2022

How to get Xdebug working with Visual Studio Code?

Related topics