Create a free account to get access to additional free training videos. Enjoy this free video from CraftQuest! Create a free account to get access to additional free training videos. Join the Community

What We'll Learn About Debugging

In this course we'll learn that we can ditch var_dump() and dd() and move to a more powerful, faster, and easier way to debug problems in our code.

In this course we’ll learn that we can ditch var_dump() and dd() and move to a more pow­er­ful, faster, and eas­i­er way to debug prob­lems in our code. the fun­da­men­tals of work­ing with Xde­bug in mul­ti­ple local­host­ing envi­ro­ments and in the two most pop­u­lar IDEs for PHP pro­gram­ming: Php­Storm and VSCode.

The goal of the course is to get you dump var_dump() and dd(). You think I’m kid­ding but, real­ly, that’s my goal. If you saw me out on the streets of Paris in sum­mer of 2022 and I asked you what you used to work through that tough bug in your fan­cy new plu­g­in, you’d yell from the top of the Eifel Tow­er: RYAN, I USEDXDE­BUG! And then I’d give two thumbs up in your gen­er­al direction.

The bor­ing ver­sion of this goal is that I want you to become com­fo­rat­ble set­ting up, con­fig­ur­ing, and using Xde­bug in dif­fer­enet types of devel­op­ment envi­ron­ments, as well as becom­ing famim­liar dif­fer­ent debug­ging strate­gies and techniques.

While our work in this course will focus on projects run­ning Craft CMS, there’s no rea­son you couldn’t take what you’ve learned here and apply to oth­er frame­works, CMSs­es, and projects. Like every­thing I teach, I’m try­ing to help you learn a frame­work for a tool, so you can take that frame­work and apply it else­where. It’s like recy­cling your soda cans except for knowledge.

  • What Xde­bug is and how it works. 
    • The set­up of Xde­bug will make more sense once we under­stand how Xde­bug works and where it sits in the toolchain.
  • How to set up Xde­bug in Php­Storm and VSCpde
  • How to set up Xde­bug in pop­u­lar local­host­ing tools, like DDEV, Craft Ntiro, Lan­do, and MAMP.
  • We’ll install a cus­tom plu­g­in from the Craft Plu­g­in Store that will allow us to debug the same code at the same time and manip­u­late val­ues to test for dif­fer­ent outcomes.
  • We will learn how to set break­points in a debug­ging session
  • We will learn how to manip­u­late vari­ables dur­ing a debug­ging session
  • We will learn how to watch dif­fer­ent expres­sions in order to observe their behav­ior dur­ing the appli­ca­tion life­cy­cle in a debug­ging session
  • We will learn how to access data from the debug­ging con­sole, includ­ing how to set and get vari­ables, or even call methods
  • We will learn about step debug­ging and how we can step into, over, out of, etc. expres­sions to ful­ly exam­ine what our code is doing dur­ing the appli­ca­tion lifecycle.
  • We will learn how to use Xde­bug for our Twig tem­plates in PhpStorm

I’m try­ing to cov­er as many local­host­ing setups as fea­si­ble that eas­i­ly sup­port Xde­bug out-of-the-box. If you are using some­thing that doesn’t sup­port Xde­bug, then you should con­sid­er choos­ing a tool that does. There are so many good local­host­ing tools now that there’s not a good rea­son to use some­thing that isn’t mod­ern, robust, and sup­ports the best prac­tices for local development. 

Okay, with that out of the way, let’s move on the next video and talk about what Xde­bug is. What is this thing anyway?

Here are all of the videos in Debugging with Xdebug:

1What We'll Learn About DebuggingIn this course we'll learn that we can ditch var_dump() and dd() and move to a more powerful, faster, and easier way to debug problems in our code. 03:10
2What is Xdebug?Xdebug is, at its core, step debugger that has tight integration with IDEs to make it really simple to set breakpoints in PHP code to gain insight into what your code is doing during runtime. 02:08
3How Xdebug WorksBefore we set up Xdebug, I want to talk through how it works so the setup makes more sense and it doesn't seem like a series of strange steps. 06:41
4Installing the Buggy PluginWe install the Buggy plugin. We'll use this plugin to work through the course material and learn how to use Xdebug. 04:27
5Setting Up Xdebug with DDEV and PhpStormFor this video, we are going to learn how to set up Xdebug with PhpStorm running a local server on DDEV. Xdebug runs on the server, as a PHP extension, so the first thing we need to do is enable Xdebug in our Docker container that is managed by DDEV. 06:14
6Setting Up Xdebug with DDEV and VS CodeFor this video, we are going to learn how to set up Xdebug with VS Code running a local server on DDEV. 06:31
7Setting Up Xdebug with Nitro and PhpStormFor this video we are going to learn how to set up Xdebug with PhpStorm running a local server on Craft Nitro. 06:19
8Setting Up Xdebug with Nitro and VS CodeFor this video, we are going to learn how to set up Xdebug with VSCode running a local server on Nitro. 04:38
9Setting Up Xdebug with MAMP Pro and PhpStormHow to set up Xdebug with PhpStorm running a local server using MAMP Pro. 05:12
10Setting Up Xdebug with MAMP Pro and VS CodeA short tutorial on how to set up Xdebug with VSCode running a local server using MAMP Pro. 05:04
11What Can We Do With a Step Debugger?Before we start debugging the code in the Buggy plugin you installed in a previous video, let's review the concepts and terminology of working with a step debugger like Xdebug. 08:53
12Debugging with Xdebug in PhpStorm, Bug 1We learn how to use step debugging in PhpStorm to fix the first bug in the Buggy plugin. 10:53
13Debugging with Xdebug in PhpStorm, Bug 2Our bug hunting continues, as we discover yet another bug we need to fix using Xdebug in PhpStorm. 12:08
14Debugging with Xdebug and PhpStorm, Bug 3We use Xdebug in PhpStorm to find and fix the last bug in the Buggy plugin. Or is it?? 08:11
15Debugging with XDebug in VS Code, Bug 1We learn how to use step debugging in VS Code to fix the first bug in the Buggy plugin. 11:22
16Debugging with Xdebug in VS Code, Bug 2We discover yet another bug we need to fix using Xdebug in VS Code. 10:49
17Debugging with Xdebug in VS Code, Bug 3We use Xdebug in VS Code to find and fix the last bug in the Buggy plugin. Or is it?? 10:16
18Debugging Twig Templates with PhpStorm and XdebugPhpStorm supports debugging Twig templates with Xdebug. Set breakpoints and inspect the application runtime. 06:49
Course In-ProgressThis course is still being updated with new content. Check back for more!

Loading next video...