Search code examples
drupaltwigxdebugvscode-debugger

Can't add a breakpoint to Twig files in VS Code

I am trying to debug a Twig template in my Drupal 9 site. I am using VSCode as my IDE and using Xdebug for debugging. I have setup/configured the installation based on the instructions outlined here - https://www.drupal.org/docs/develop/development-tools/configuring-visual-studio-code

I am able to set breakpoints in PHP files (step thru and watch variables successfully) however I just can't seem to do the same for Twig template files (just so I can see what variables I have access to in that template). What I mean by when I say I am unable to add the breakpoint is that clicking on the gutters of a Twig file within VSCode does not result in addition of any breakpoint.

I'd like to take advantage of Xdebug instead of using debugging functions like breakpoint() and dump() offered by the Devel and Twig_xdebug modules within Drupal. I am pretty sure I am doing something wrong or have missed a step but I can't seem to figure out what it is.

Some more details on my env:

  • a local Drupal 9 setup on a Mac OS that uses PHP 7.4 and nginx as its webserver.
  • Xdebug (v3.1.1) is installed and enabled (verified via phpinfo() output)
  • VSCode (1.63.0) installed with all of the supporting Drupal and PHP extensions outlined in the above article (specifically php-debug) have been installed.
  • I am using the default launch configuration to Run my debug session in VSCode.

I'd appreciate any pointers on what I am doing wrong and/or what I can try. Also, I hope I provided enough info on my use case.

Solution

  • Twig compiles the template files into PHP files. You need to set breakpoints in these Twig generated PHP files in order to debug them.

    On this page, I also see that there is caching involved, which you will need to disable. That documentation seems to be quite comprehensive.