How to set up PHP Debugging (Xdebug) in VS Code with WP Local

hey everybody i'm jeremy at 714 web and i'm going to show you how to set up uh debugging with vs code and wp local so as you probably know wp local is now owned by wp engine um they extended it quite a bit they created add-ons um and these add-ons were only available to premium users but now they're available to everybody for free so it's really great makes it easy to do this but it's not really very well documented if at all to kind of dig through some forums and find little bits and pieces from people here and there to figure out how to get this working um which is probably why you're watching this video that's why i'm creating it so the first thing you need to do is click on add-ons make sure you get the latest version of local installed go to add-ons and click on xdebug plus vs code now i already have it installed but if you don't have it installed you'll see a green button it'll say install and reload it'll actually restart local and then you'll go back to your list of sites okay so that's the first thing the second thing is actually in vs code itself so we're going to open vs code we're going to go to the extensions and you're going to type php debug and i actually have that installed already as well but if you don't just go ahead and install it and that puts the pieces that we need into va vs code all right i'm just going to close that window out for a moment um i actually turned on the ability to see hidden files on my mac so that you can see what happens here um but basically vs code or xdebug needs to see a configuration file a json file in the root directory directory that you're working out of so one of the you know important things is to know which folder to actually work out of in vs code to get debugging to work so here's my local installs my sites so this this one is actually located there i know they're not named the same but it's the same install um and the way you'll see it is you'll you'll open it up you'll see apps or the app then you're gonna see public and public of course is where the wordpress files are all installed so the public folder is where it's going to install it so the first thing you need to know is stop your site it doesn't seem to work properly if your site's running so just go ahead and stop your site and then once it's stopped you're going to go to tools it's still working but go to xdebug plus vs code there we go now we see this option add a run configuration to vs code we're going to click on that and you're going to see this folder just popped in it created this dot vs code the dot in front of it makes it a hidden file or hidden folder in this case and inside that has a launch.json file which is the configuration file that that x debug needs so that is installed the root directory it's installed in is the public folder so that's the folder we're going to want to work out of all right so i'm going to go ahead and start the site again and while that site is starting i'm going to go ahead and click and drag that onto my vs code editor and now you'll see that vs code file the launch json file is here with the configuration that we need okay so now we're ready to go it doesn't matter uh you know it doesn't matter what you're gonna work on in here you can work on a plug-in and you can work on a theme file or child theme or whatever um the debugging will work for all of them because it's in the root folder that your project is in right now so i'm going to go ahead down to my theme files and in my functions file i have a kind of ridiculous uh script here i got an array of words and then i'm going to loop through those words and echo them out on the screen so i'm actually going to come back here to my site or you can you can hit open site here i've already got it open so we'll refresh it and of course it will echo out that phrase at the top with no spaces because i didn't add any so we are debugging all right but we're not actually debugging yet we need to tell the debugger where to stop or where to pause so we have the line uh numbers in our code and if you hover over them you see this red dot to my left in the gutter okay so if you want to add we're going to we're going to add a break point right here to where it echoes it out so i'm just going to click on that and it sets a break point all right now i'm going to go to the debug panel and by default it should be selected on listen for xdebug local that's what we want so we hit the play button on that now we're debugging you see it added the bar down here switch to the debug console it's got this uh control panel up here with the stop refresh or reload and the pause button so what we need to do to debug is we need to actually run the page again now that it's in a state to actually watch it now we're going to refresh and once we refresh you can see it brought up variables over here so we've got different kinds of variables we've got local variables and this is everything that is available on that page load wp or wp variables wordpress variables and anything else including super variables our super globals which are like the cookies get and post and so forth so in this case our uh two variables are words and words so it's in alphabetical order we just scroll down and we're going to find here's our array words so we are debugging and then currently word is set to we so in order to see this in action we're just going to step forward so we click that and then we see it change to r and by the way i can go to another part in the in the file here and hit the step forward and it takes us straight to the current break point that's going to hit so if you have multiple break points in the code it's going to take you straight to the one that it's actually working on and you can see what is currently happening here so you can also do this in multiple files and it will actually jump between files uh when it executes um based on the time it executes so in this case let's just actually we're going to stop this debugging and i'm going to actually take away that break point i'm going to copy this code and i'm going to go back to my file view and i'm going to go to a plugin that i've been working on and we're just going to insert this into this plugin before my class executes and so now it's executing at a whole different level at a different place i'm going to save that file and then i'm going to hit a break point there so i was working out of a child theme now i'm actually working out of a plugin just to show you that it it works just the same as long as your project is running out of that root folder where that vs code configuration file is okay so now we're going to hit debug again we're going to come back here we're going to refresh the page and you're going to see that it stopped it if we were already on this so let's actually go to the functions file just for fun we'll scroll down go to the functions file and step forward again it actually jumps to this file where the current breakpoint is firing and if we scroll down we can see the variable here so let's just step forward one more time and we can see that it's changing here so we can work out of uh anything within this wordpress install and get the debugging console now there are also other functionalities available with debugging but that's the basics on how to set it up and how to get it run and i hope that helps

Channel: Jeremy Caris

Views: 4,765

Keywords:

Id: Zs6zhNTGZRU

Length: 8min 12sec (492 seconds)

Published: Thu Aug 05 2021