Debug Drupal code with Xdebug in vscode | D4Drupal

today we are going to see about how to debug your PHP code by using xtbook okay so first you have to download a dll file for that based on your PHP version or configuration you have to download it to get the PHP version and the PHP configuration from Drupal website you can get it from status report or when you install web or Zam when it hit the localhost here too you can get it by clicking the PHP info here all from grouper site you can get it from PHP uh PHP more info link so you can get it in two ways and next what you have to do you have to go to the XD book slash result URL and here you have to copy all the configuration and you have to paste it here and Analysis your info file info output so once the uh I'm here this is done it will show you the instruction to download it in your machine so you have to follow all the instructions whatever mentioned here first you have to download this XT bug dll file this I already installed it in my local so I am not going to install it now next what you have to do you have to move the downloader file to this particular folder okay so let's do that bin and PHP PHP to 4.2.6 and next is a EXT folder you have to paste it here but before you pasting the file inside this EXT folder you have to make sure you don't have this folder in your instant it might be come with the default okay for me it came with the map installation itself okay and I'm not going to copy paste this manually since it's already exist in my instance if you don't have this dll file you have to copy and paste it in this folder by renaming it to the okay next what you have to do you have to go to the Apache PHP ini file okay so next bill Apache Apache two point bin and here you have to go to your PHP ini 5 for Apache so when you have when the underscore EXT folder by default configuration will be existing by default here whenever you editing this file you have to make sure that you don't have this uh XT the configuration already okay and also you have to make sure this configuration should be present after your up catchy okay catch so that configuration should be present after this up catch okay so I added it at the end so this is the configuration which is already there and one more thing you have to know understand is that when you configured XT bug in your instance so you are giving value for some uh some variables right log or mode or output directory everything right to make sure this configuration is updated or not you have to do the testing by using by clicking on this x debug info okay so here you can see what are the changes we made in that ini file all will be present here so when you check more in this file so you can see it is its value is developed as we defined here okay so log level so log level is uh seven and the log file location also what you've configured here okay so whatever configuration you are providing whether this configuration is affected or not you can debug by this way okay so next what you what you have to do to do the step debugging you how to do some changes in the existing configuration so mode should be debug not the more developed okay and this is the configuration you have to give and IDE I created ID here so let me tell you what ID is I have unable the extension called uh X debug helper Chrome extension okay extension XT by helper you have to enable this I already enabled it once you enabled when you click on the extension icon it will list all the extension if you want to pin you can pin it I already pinned so the icon is coming here after that you have to click on this uh three uh dots and here you have to configure the IDE key for your editor so here I am using other so when you use PHP stream or Eclipse you can give the specific ID here I'm using a visual studio code so I gave other option here and the value was vs code and say so that is the value I configured here and next you have to uh enable the remote enable and auto start and also you have to give one more uh value that is request start with request yes okay so I will add all this in the description and yeah that's it okay this is the dll path x x debug so when you given the EXT folder this will be EXT and uh since we renamed it this will not be there so it will be like this in your case so next what you have to do once you configure the ili file you have to go to the bank and restart all the services once you restarted you go to your XT bug info and reload let's check only one configuration that is more so here you can see that is debug as we configure this is uh updated so once this is done what you have to do you have to go to the extension in your vs code and click on PHP debug so that will that is the extension we are going to install to so this is the extension we are going to install now click on install it is installed in so once it is installed next what you have to do you have to go to the folder structure here I open your our full Drupal folder which is Click stage so this is a split stage instance I open the complete folder I'll open the complete folder there next what you have to do you have to click on the run and add configuration and here you have to click the PHP so this will add a v is called logs.json file in your folder in your working directory next what you have to do once you don't need to touch anything here so next uh you have to click on the run and debug before that I will show you index.php file so let me showcase here dollar a I'm going to just uh create simple configuration foreign let's click on this run and debug and here you need to add the breakpoints wherever you want you can add here so once you've added uh next whatever do you have to select listen for XT bug and click on the play button so this page will be executing when the Chrome loads that particular page okay go to your commander load index.php so when you load it it will uh call this file and this file you can get the debugging option what are the variables we have that time so this is a this is a play where this is a continue button and this is step over and this is a step into and this is step out and this is restart and this is stop okay and here you have a breakpoints we have other break points for uh index.php four places and this I added when I worked before so and that's it so you can identify the value for a b c whatever we are getting we can get it okay and I will show you in uh one more file this is a plain PHP right let's see in the custom module develop SRC and this is a file and this will be uh working on this let's stop this debugger and for this drop down page this page contain our drop down from dependent drop down form here I am going to debug here so if you want any custom you can add I select how I added there I'm going to add that here so copy pasting all the code well to form okay so let's enable that the breakpoint for all these lines and also for your any uh coding you can add wherever you want cat okay and next what you have to do you have to go to the random debug and listen for XT bug play next you have to go to your Chrome and refresh here and now you can see step over so it's taking from a index.php after index.php it will take you to the a b value C value and Cat value okay so you can see the cat values assigned to know okay so the here you also have a call call stack you can use it for debugging and uh this is how you need to debug your triple instance okay and that's it about today's video if you like the video please share like And subscribe to my channel thank you bye

Channel: D4Drupal

Views: 3,006

Keywords: xdebug, drupal xdebug, drupal 8, drupal 9, vscode

Id: 9VLWgs_G90A

Length: 12min 9sec (729 seconds)

Published: Sun Nov 06 2022