{"id":25376,"date":"2022-10-06T12:00:51","date_gmt":"2022-10-06T16:00:51","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=25376"},"modified":"2024-04-15T11:54:48","modified_gmt":"2024-04-15T15:54:48","slug":"debugging-wordpress","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/","title":{"rendered":"Debugging WordPress Using Xdebug, Local, and VS Code"},"content":{"rendered":"<p>This post covers debugging WordPress using Xdebug, Local, and VS Code. This approach to debugging is far superior to logging variables to the error log or to the screen.<\/p>\n<p>Getting things set up correctly can be tricky. That&#8217;s where this tutorial helps.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25391\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/xdebug-wordpress-vscode\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-wordpress-vscode.gif\" data-orig-size=\"1323,907\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"xdebug-wordpress-vscode\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-wordpress-vscode-1024x702.gif\" class=\"alignnone size-full wp-image-25391\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-wordpress-vscode.gif\" alt=\"Xdebug in action\" width=\"1323\" height=\"907\" \/><\/p>\n<h2>Xdebug<\/h2>\n<p>Xdebug is a powerful tool for debugging PHP applications. It conveniently comes bundled with Local.<\/p>\n<p>We&#8217;re using VS Code for our code editor in this tutorial, as well as some other tools I&#8217;ve listed below. Everything included here is the current release and version numbers are noted just in case it might be helpful since things change.<\/p>\n<h2>Prerequisites<\/h2>\n<ul>\n<li><a href=\"https:\/\/localwp.com\/\">Local v6.4.2+6012<\/a>: A local WordPress development environment, formally known as Local by Flywheel\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>PHP v7.4.1\/v7.3.5\/v8.0: Selectable via the Local UI. Choose v7.4.1 or v 7.3.5 for now because PHP 8 has a different Xdebug setup we&#8217;ll cover at the end of the article.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/#alt-downloads\">VS Code v1.70.2<\/a>: Code editor<\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=xdebug.php-debug\">PHP Debug by Xdebug for VS code v1.27.0<\/a>: VS Code extension which allows VS Code to talk to Xdebug<\/li>\n<li>Xdebug Helper browser extension: Used for explicitly enabling or disabling debugging sessions\n<ul>\n<li><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/xdebug-helper\/eadndfjplgieldjbigjakmdgkmoaaaoc?hl=en\">Chrome<\/a><\/li>\n<li><a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/xdebug-helper-for-firefox\/\">Firefox<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>I use Windows because that&#8217;s what makes me happy, but this guide applies to other environments as well. I just wanted to note that, since the paths I&#8217;ll be referencing are Windows-y.<\/p>\n<h2>Create a Site in Local<\/h2>\n<p>Once all of the prerequisites have been installed and activated, you&#8217;ll need to create a new WP site in Local if you don&#8217;t have one already. When PHP Versions 7.3.x or 7.4.x are selected in Local, Xdebug Version 2 is used.<\/p>\n<p>When PHP Version 8 is selected, Xdebug Version 3 is used. We&#8217;re going to use PHP Version 7.4.1 to start off with and will cover PHP Version 8 at the end of the article.<\/p>\n<p>I&#8217;ve named my site <code>xdebugvscode.test<\/code>. Here are its settings:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25384\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/local-settings\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/local-settings.png\" data-orig-size=\"494,579\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"local-settings\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/local-settings.png\" class=\"alignnone wp-image-25384 size-full\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/local-settings.png\" alt=\"Local site settings\" width=\"494\" height=\"579\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/local-settings.png 494w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/local-settings-256x300.png 256w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/local-settings-436x511.png 436w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/local-settings-51x60.png 51w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/p>\n<h2>Set Up <code>php.ini.hbs<\/code> Directives<\/h2>\n<p>Now that the site has been created, let&#8217;s double-check the Xdebug configuration directives in the site&#8217;s <code>php.ini.hbs<\/code> file. This file is located under your site&#8217;s <code>conf\/php<\/code> directory.<\/p>\n<p>For me, the path is <code>D:devlocal-sitesxdebugvscodeconfphpphp.ini.hbs<\/code>. Scroll to the bottom of the file under the <code>[xdebug]<\/code> section, and verify that you have the directives below set accordingly. If you need to make any changes, be sure to restart your Local site.<\/p>\n<div>\n<pre>; Enable remote debugging.\r\nxdebug.remote_enable=1\r\n\r\n; If enabled, the xdebug.remote_host setting is ignored and\r\n; Xdebug will try to connect to the client that made the HTTP request.\r\n; It checks the $_SERVER['HTTP_X_FORWARDED_FOR'] and $_SERVER['REMOTE_ADDR'] variables to find out remote IP\r\nxdebug.remote_connect_back=Off\r\n\r\n; Set the port that Xdebug connects to.\r\nxdebug.remote_port=\"9000\"\r\n\r\n; Disable the profiler.\r\nxdebug.profiler_enable=0\r\n\r\n; Set the profiler's output directory for when we're profiling.\r\nxdebug.profiler_output_dir = \"D:\/dev\/xdebug-profiler-output\"<\/pre>\n<\/div>\n<h3>A Note About the <code>php.ini.hbs<\/code> File When Switching PHP Versions<\/h3>\n<p>If you ever change the PHP version for your Local site, Local will save the settings for the previous install of PHP under the <code>{local-site-dir}\/conf\/php\/php-{version-number}<\/code>directory.<\/p>\n<p>For example, I started out with PHP Version 7.4.1 installed, then switched to PHP Version 7.3.5. Local made a copy of my PHP Version 7.4.1 settings under <code>D:devlocal-sitesxdebugvscodeconfphp-7.4.1<\/code>.<\/p>\n<p>If you change PHP versions and made any modifications to Local&#8217;s <code>php.ini.hbs<\/code> file, you&#8217;ll need to make the changes again, if this is the first time the PHP version has been activated. After that, if you swap between PHP versions, your setting changes will be preserved.<\/p>\n<h2>Ensure Xdebug Is Running<\/h2>\n<p>To make sure that Xdebug is running, create a file named <code>pi.php<\/code> in the root of your site and add the following code to it:<\/p>\n<div>\n<pre>&lt;?php\r\n\/\/ Output information about PHP's configuration.\r\nphpinfo();\r\n\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25392\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/phpinfo\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/phpinfo.png\" data-orig-size=\"621,537\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"phpinfo\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/phpinfo.png\" class=\"size-full wp-image-25392 alignnone\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/phpinfo.png\" alt=\"location of the ph.php file\" width=\"621\" height=\"537\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/phpinfo.png 621w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/phpinfo-300x259.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/phpinfo-69x60.png 69w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><\/p>\n<\/div>\n<div><\/div>\n<div>Now load up <code>https:\/\/yoursite.test\/pi.php<\/code> and make sure that Xdebug is running. Find the Xdebug section; it will look something like this:<\/div>\n<div><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25393\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/php_info\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php_info.png\" data-orig-size=\"933,908\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"php_info\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php_info.png\" class=\"alignnone size-full wp-image-25393\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php_info.png\" alt=\"php_info() output\" width=\"933\" height=\"908\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php_info.png 933w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php_info-300x292.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php_info-768x747.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php_info-62x60.png 62w\" sizes=\"auto, (max-width: 933px) 100vw, 933px\" \/><\/div>\n<div><\/div>\n<div><\/div>\n<div>If you&#8217;re not seeing this, then Xdebug is not running. Double-check the <code>php.ini.hbs<\/code> file to ensure that Xdebug is enabled.<\/div>\n<h2>Activate Xdebug Helper Browser Extension<\/h2>\n<p>Once you&#8217;ve installed and activated the Xdebug Helper extension for your preferred browser, make sure to enable debugging by clicking on the icon and selecting <em>Debug.\u00a0<\/em>The little bug icon will turn green letting you know that the browser extension will set the appropriate flag to turn on debugging.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25390\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/enable-xdebug-helper-extension\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/enable-xdebug-helper-extension.png\" data-orig-size=\"544,253\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"enable-xdebug-helper-extension\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/enable-xdebug-helper-extension.png\" class=\"size-full wp-image-25390 alignnone\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/enable-xdebug-helper-extension.png\" alt=\"Enable the Xdebug helper extension\" width=\"544\" height=\"253\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/enable-xdebug-helper-extension.png 544w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/enable-xdebug-helper-extension-300x140.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/enable-xdebug-helper-extension-129x60.png 129w\" sizes=\"auto, (max-width: 544px) 100vw, 544px\" \/><\/p>\n<h2>Open Local Site in VS Code and Save a Workspace<\/h2>\n<p>Once the site has been created, go to <em>File &gt; Open Folder<\/em> in VS Code, then navigate to the site&#8217;s directory. Now, save the workspace by going to <em>File &gt; Save Workspace As&#8230;<\/em> and then give the workspace a name.<\/p>\n<h2>Install and Activate PHP Debug Extension for VS Code<\/h2>\n<p>The PHP Debug extension for VS Code helps to bring everything together. Locate the extension in VS Code&#8217;s Extension Browser, and activate it. Make sure to select the one published by the Xdebug team, since there are a few extensions with the same name.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25394\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/php-debug-extension-vs-code\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code.png\" data-orig-size=\"1390,695\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"php-debug-extension-vs-code\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code-1024x512.png\" class=\"alignnone size-full wp-image-25394\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code.png\" alt=\"PHP debug extension for VS Code\" width=\"1390\" height=\"695\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code.png 1390w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code-300x150.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code-1024x512.png 1024w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code-768x384.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code-120x60.png 120w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/php-debug-extension-vs-code-1300x650.png 1300w\" sizes=\"auto, (max-width: 1390px) 100vw, 1390px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Create a <code>launch.json<\/code> File for Your Workspace<\/h2>\n<p>Next, we will create a <code>launch.json<\/code> file for our workspace. Click on VS Code&#8217;s debugging icon to open the debugging panel, then click on the <em>create a launch.json file <\/em>link.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25395\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/create-launch-json-1\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-1.png\" data-orig-size=\"748,447\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"create-launch-json-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-1.png\" class=\"alignnone size-full wp-image-25395\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-1.png\" alt=\"Create launch.json step 1\" width=\"748\" height=\"447\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-1.png 748w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-1-300x179.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-1-100x60.png 100w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/p>\n<p>Now select the name of your workspace which you created earlier.<\/p>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25396\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/create-launch-json-2\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-2.png\" data-orig-size=\"764,433\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"create-launch-json-2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-2.png\" class=\"alignnone size-full wp-image-25396\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-2.png\" alt=\"Create launch.json step 2\" width=\"764\" height=\"433\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-2.png 764w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-2-300x170.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-2-106x60.png 106w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/p>\n<p>VS Code will populate the <code>launch.json<\/code> file with defaults, but we&#8217;re going to replace them.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25397\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/create-launch-json-3\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3.png\" data-orig-size=\"1337,755\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"create-launch-json-3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3-1024x578.png\" class=\"alignnone size-full wp-image-25397\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3.png\" alt=\"Create launch.json step 3\" width=\"1337\" height=\"755\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3.png 1337w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3-300x169.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3-1024x578.png 1024w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3-768x434.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3-106x60.png 106w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/create-launch-json-3-1300x734.png 1300w\" sizes=\"auto, (max-width: 1337px) 100vw, 1337px\" \/><\/p>\n<p>Go ahead and delete the entire contents of the default <code>launch.json<\/code>, replace the contents with the settings below, then save the file.<\/p>\n<p>The <code>launch.json<\/code>will be stored at <code>{local-site-name}\/.vscode\/launch.json<\/code>. So, mine is saved at\u00a0<code>D:devlocal-sitesxdebugvscode.vscodelaunch.json<\/code>.<\/p>\n<p>&nbsp;<\/p>\n<div>\n<div>\n<div>\n<pre>{\r\n  \/\/ Use IntelliSense to learn about possible attributes.\r\n  \/\/ Hover to view descriptions of existing attributes.\r\n  \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\r\n  \"version\": \"0.2.0\",\r\n  \"configurations\": [\r\n  \u00a0 {\r\n  \u00a0 \u00a0 \"name\": \"Listen for Xdebug\",\r\n  \u00a0 \u00a0 \"type\": \"php\",\r\n  \u00a0 \u00a0 \"request\": \"launch\",\r\n  \u00a0 \u00a0 \"port\": 9000,\r\n  \u00a0 \u00a0 \"log\": false,\r\n  \u00a0 \u00a0 \"maxConnections\": 1, \/\/ @see \u00a0https:\/\/github.com\/xdebug\/vscode-php-debug\/issues\/604\r\n  \u00a0 \u00a0 \"xdebugSettings\": {\r\n  \u00a0 \u00a0 \u00a0 \"resolved_breakpoints\": \"0\", \/\/ @see https:\/\/github.com\/xdebug\/vscode-php-debug\/issues\/629 and https:\/\/stackoverflow.com\/a\/69925257\/3059883\r\n  \u00a0 \u00a0 \u00a0 \"max_data\": 512,\r\n  \u00a0 \u00a0 \u00a0 \"show_hidden\": 1,\r\n  \u00a0 \u00a0 \u00a0 \"max_children\": 128\r\n  \u00a0 \u00a0 }\r\n  \u00a0 }\r\n  ]\r\n}<\/pre>\n<\/div>\n<\/div>\n<p>When using Local&#8217;s PHP Version 7.3.x or 7.4.x, the version of Xdebug in use will be 2.9.0, which had a bug that caused some weirdness with breakpoints. I&#8217;ve added some links to the config file above which go into some more detail if you&#8217;re interested.<\/p>\n<p>Check out the <a href=\"https:\/\/github.com\/xdebug\/vscode-php-debug#supported-launchjson-settings\">PHP Debug extension&#8217;s Github page<\/a> for more information about supported settings.<\/p>\n<\/div>\n<\/div>\n<h2>Add a Breakpoint to Your Code<\/h2>\n<p>For the purposes of this debugging WordPress demo, I&#8217;m going to add a breakpoint to line 48 of\u00a0 Twenty Twenty-Two&#8217;s <code>functions.php<\/code> file.<\/p>\n<p>To add a breakpoint, hover over the gutter (just to the left of a line number) and a little orange dot will appear. Click it to add a breakpoint.<\/p>\n<p>Click it again to remove it. You can add multiple breakpoints, and the debugger will stop on each one. To keep things simple here, I&#8217;ll just add the one.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25398\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/add-breakpoint\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/add-breakpoint.png\" data-orig-size=\"916,724\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"add-breakpoint\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/add-breakpoint.png\" class=\"alignnone size-full wp-image-25398\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/add-breakpoint.png\" alt=\"Adding a breakpoint\" width=\"916\" height=\"724\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/add-breakpoint.png 916w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/add-breakpoint-300x237.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/add-breakpoint-768x607.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/add-breakpoint-76x60.png 76w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/p>\n<p>Once your breakpoint has been added, you will see it listed in the lower left-hand corner of\u00a0 VS Code&#8217;s debugger panel. It&#8217;s also possible to set breakpoints on Notices, Warnings, Errors, etc., but we&#8217;ll uncheck all of those for this example.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25399\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/breakpoints\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/breakpoints.png\" data-orig-size=\"422,253\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"breakpoints\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/breakpoints.png\" class=\"alignnone size-full wp-image-25399\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/breakpoints.png\" alt=\"Debugger breakpoints\" width=\"422\" height=\"253\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/breakpoints.png 422w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/breakpoints-300x180.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/breakpoints-420x253.png 420w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/breakpoints-100x60.png 100w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/p>\n<h2>Start Debugging WordPress<\/h2>\n<p>We&#8217;re finally ready to start debugging WordPress! Open VS Code&#8217;s debugger panel and click the green triangle to start listening for Xdebug. Use the F5 shortcut.<br \/>\n<img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25400\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/start-debugging\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/start-debugging.png\" data-orig-size=\"1065,493\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"start-debugging\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/start-debugging-1024x474.png\" class=\"size-full wp-image-25400 alignnone\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/start-debugging.png\" alt=\"Start debugging\" width=\"1065\" height=\"493\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/start-debugging.png 1065w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/start-debugging-300x139.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/start-debugging-1024x474.png 1024w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/start-debugging-768x356.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/start-debugging-130x60.png 130w\" sizes=\"auto, (max-width: 1065px) 100vw, 1065px\" \/><br \/>\nOnce VS Code is listening for Xdebug, the Debugger Controls window will be displayed. The bottom of the VS Code window will turn orange.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25401\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/listening-for-xdebug\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/listening-for-xdebug.png\" data-orig-size=\"1048,613\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"listening-for-xdebug\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/listening-for-xdebug-1024x599.png\" class=\"alignnone size-full wp-image-25401\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/listening-for-xdebug.png\" alt=\"Listening for debugger\" width=\"1048\" height=\"613\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/listening-for-xdebug.png 1048w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/listening-for-xdebug-300x175.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/listening-for-xdebug-1024x599.png 1024w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/listening-for-xdebug-768x449.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/listening-for-xdebug-103x60.png 103w\" sizes=\"auto, (max-width: 1048px) 100vw, 1048px\" \/><\/p>\n<p>Now Xdebug is waiting to start the session. To kick things off, just load a page that will hit the breakpoint.<\/p>\n<p>I&#8217;m just going to load the homepage of the test site I created. Once I hit refresh on the homepage of the test site, VS Code will be highlighted in the taskbar and the debugger will stop executing code on the breakpoint that I had previously set.<\/p>\n<p>Once a debugging session has started, additional controls will be active on the Debugger Control Panel, and variables will be listed under the VARIABLES section of the Debugging Panel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25402\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/in-the-debug-session\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/in-the-debug-session.png\" data-orig-size=\"1226,977\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"in-the-debug-session\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/in-the-debug-session-1024x816.png\" class=\"alignnone size-full wp-image-25402\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/in-the-debug-session.png\" alt=\"Inside a debugging session\" width=\"1226\" height=\"977\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/in-the-debug-session.png 1226w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/in-the-debug-session-300x239.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/in-the-debug-session-1024x816.png 1024w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/in-the-debug-session-768x612.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/in-the-debug-session-75x60.png 75w\" sizes=\"auto, (max-width: 1226px) 100vw, 1226px\" \/><\/p>\n<p>We can now use the Debugger Controls to navigate through the codebase:<\/p>\n<h3>Debugger Controls<\/h3>\n<ul>\n<li>Pause\/Run (F6): Resumes code execution. Debugger will stop on the next breakpoint if set.<\/li>\n<li>Step Over (F10): Steps over a block of code.<\/li>\n<li>Step Into (F11): Steps into a block of code.<\/li>\n<li>Step Out (Shift + F11): Steps out of a block of code that was previously stepped into.<\/li>\n<li>Restart (Ctrl + Shift + F5): Restarts the debugging session.<\/li>\n<li>Stop (Shift+F5): Halts execution of the script.<\/li>\n<\/ul>\n<p>The GIF at the top of this article demonstrates some basic usage of these controls.<\/p>\n<h3>Exploring Variables<\/h3>\n<p>We can also explore the values of local and global variables using the VS Code&#8217;s VARIABLES section within the Debugging Panel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25403\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/variables\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/variables.png\" data-orig-size=\"418,442\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"variables\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/variables.png\" class=\"alignnone size-full wp-image-25403\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/variables.png\" alt=\"Exploring variables\" width=\"418\" height=\"442\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/variables.png 418w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/variables-284x300.png 284w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/variables-57x60.png 57w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/p>\n<h2>PHP Version 8 + Xdebug Version 3 Set Up<\/h2>\n<p>When a Local site is configured to use PHP Version 8.X, the bundled version of Xdebug will be Version 3, and there are many changes from Versions 2 to 3.<\/p>\n<p>These changes are covered thoroughly in <a href=\"https:\/\/xdebug.org\/docs\/upgrade_guide\">this guide<\/a>. Notably, Xdebug Version 3 defaults to port 9003 instead of 9000. I&#8217;m going to switch my Xdebug Version 3 setup to use port 9000 for consistency, so I don&#8217;t have to change anything in my <code>launch.json<\/code> file.<\/p>\n<p>Here are the Xdebug directives in my PHP Version 8 site&#8217;s <code>php.ini.hbs<\/code> file. Note that I&#8217;ve commented out the line <code>xdebug.start_with_request<\/code>.<\/p>\n<div>\n<pre>xdebug.mode=debug\r\nxdebug.client_port=\"9000\"\r\n; xdebug.start_with_request=yes\r\nxdebug.discover_client_host=yes\r\n\r\n<\/pre>\n<p>Now that we&#8217;ve switched our site to PHP Version 8 if we check the output of our <code>pi.php<\/code> file that we created earlier, we can see that Xdebug Version 3 is now loaded, where Version 2.9.0 was being used under our PHP Versions 7.3 and 7.4 sites.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25404\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/xdebug-v3\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-v3.png\" data-orig-size=\"870,184\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"xdebug-v3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-v3.png\" class=\"alignnone size-full wp-image-25404\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-v3.png\" alt=\"Xdebug version 3\" width=\"870\" height=\"184\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-v3.png 870w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-v3-300x63.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-v3-768x162.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-v3-180x38.png 180w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/p>\n<p>One of the cool features that comes bundled with Xdebug Version 3 is the addition of the <code>xdebug_info()<\/code> function. This is similar to the <code>php_info()<\/code> function, but it provides more detailed diagnostics for about the Xdebug setup.<\/p>\n<p>To use it, simply add a file to your site&#8217;s web root. For example, <code>xdebug-info.php<\/code> , then add the following contents:<\/p>\n<div>\n<pre>&lt;?php\r\nxdebug_info();<\/pre>\n<\/div>\n<p>Load that file up in your browser, and you&#8217;ll see something like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25408\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/xdebug_info-error-not-listening\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-error-not-listening.png\" data-orig-size=\"910,625\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"xdebug_info-error-not-listening\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-error-not-listening.png\" class=\"size-full wp-image-25408 alignnone\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-error-not-listening.png\" alt=\"xdebug_info output - debugger not listening\" width=\"910\" height=\"625\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-error-not-listening.png 910w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-error-not-listening-300x206.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-error-not-listening-768x527.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-error-not-listening-87x60.png 87w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/p>\n<p>In the screenshot above, the diagnostics log is indicating a problem connecting to the host on port 9000. The reason for this is that I have not enabled VS Code to listen for debugging.<\/p>\n<p>So, I tap F5 to enable debugging, and now when I reload my <code>xdebug-info.php<\/code>, the Diagnostics Log is clean, and I&#8217;m ready to debug. Thanks to fellow WebDevStudios Backend Engineer, <a href=\"https:\/\/webdevstudios.com\/team\/biplav-subedi\/\">Biplav Subedi<\/a>, for this tip!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25409\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/xdebug_info-working\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-working.png\" data-orig-size=\"879,485\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"xdebug_info-working\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-working.png\" class=\"alignnone size-full wp-image-25409\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-working.png\" alt=\"xdebug_info output - debugger is listening\" width=\"879\" height=\"485\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-working.png 879w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-working-300x166.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-working-768x424.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-working-436x241.png 436w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug_info-working-109x60.png 109w\" sizes=\"auto, (max-width: 879px) 100vw, 879px\" \/><\/p>\n<\/div>\n<h2>Troubleshooting<\/h2>\n<p>One common issue that comes up when you&#8217;re debugging WordPress is that the debugger does not stop on the breakpoint that you&#8217;ve set. This is typically caused by a port conflict\u2014some other process is already using the port that you&#8217;ve configured for debugging.<\/p>\n<p>Make sure that no other application is using the port that was configured in the <code>php.ini.hbs<\/code> and <code>launch.json<\/code> file. If an application is already using the port you&#8217;ve specified, make sure to change your port to something that&#8217;s not in use.<\/p>\n<p>To check for a port conflict, end your debugging session in VS Code then run the following command:<\/p>\n<p>Windows CMD: <code>netstat -an | find \"9000\"<\/code><\/p>\n<p>Linux\/Mac: <code>sudo netstat -nap | grep <span class=\"hljs-string\">\":9000\"<\/span><\/code><\/p>\n<p>You should not see any output after entering these commands. If you do, that means that a process is already using the port you&#8217;ve configured for Xdebug (9000) in our example. So you should either configure a different port in your <code>php.ini.hbs<\/code> and <code>launch.json<\/code> files, or locate the process that is tying up the port, and stop it\/configure it to use a different port.<\/p>\n<h2>Bonus: Quick and Dirty Debugging<\/h2>\n<p>Sometimes, instead of using Xdebug, I prefer to simply log variables to WP&#8217;s <code>error.log<\/code> file using PHP&#8217;s <code>error_log()<\/code>.<\/p>\n<p>I find this handy for real quick stuff, though it&#8217;s really not the best way to debug WordPress when things get serious. For this setup, first, add the following statements to your site&#8217;s <code>wp-config.php<\/code> file:<\/p>\n<pre>define( 'WP_DEBUG', true ); \/\/ Debugging mode activated.\r\ndefine( 'WP_DEBUG_LOG', true ); \/\/ Logs to wp-content\/debug.log\r\ndefine( 'WP_DEBUG_DISPLAY', false ); \/\/ Don't add errors to the output.\r\ndefine( 'SCRIPT_DEBUG', true ); \/\/ Load un-minified scripts.<\/pre>\n<p>Now, errors will be logged to your site&#8217;s <code>wp-content\/debug.log<\/code> file. I typically keep this file open in a side panel of VS Code.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25385\" data-permalink=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/error-logging\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging.png\" data-orig-size=\"1868,833\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"error-logging\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging-1024x457.png\" class=\"alignnone wp-image-25385 size-full\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging.png\" alt=\"error logging to debug.log\" width=\"1868\" height=\"833\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging.png 1868w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging-300x134.png 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging-1024x457.png 1024w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging-768x342.png 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging-1536x685.png 1536w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging-135x60.png 135w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/error-logging-1300x580.png 1300w\" sizes=\"auto, (max-width: 1868px) 100vw, 1868px\" \/><\/p>\n<p>I usually use this one-liner to output values to the <code>debug.log<\/code> file:\u00a0 <code>error_log( '$variable_name ' . var_export( $variable_name, true ) );<\/code><\/p>\n<p>To make things easier, I trigger this one-liner using a VS Code User Snippet with the trigger <code>logv<\/code>. Here&#8217;s a copy of the debugging-related snippets I use. These are configured in VS Code under <em>File &gt; Preferences &gt;\u00a0 Configure User Snippets &gt; PHP.<\/em><\/p>\n<pre>{\r\n\/\/ Place your snippets for php here. Each snippet is defined under a snippet name and has a prefix, body and\r\n\/\/ description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:\r\n\/\/ $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the\r\n\/\/ same ids are connected.\r\n\/\/ Example:\r\n\/\/ \"Print to console\": {\r\n\/\/ \"prefix\": \"log\",\r\n\/\/ \"body\": [\r\n\/\/ \"console.log('$1');\",\r\n\/\/ \"$2\"\r\n\/\/ ],\r\n\/\/ \"description\": \"Log output to console\"\r\n\/\/ }\r\n\"Log var_export()\": {\r\n\"prefix\": \"logv\",\r\n\"body\": [\"error_log( '$1 ' . var_export( $2, true ) );\"],\r\n\"description\": \"Do a var_export( $variable ) to PHP error log.\"\r\n},\r\n\"Log print_r()\": {\r\n\"prefix\": \"logp\",\r\n\"body\": [\"error_log( print_r( $0, true ) );\"],\r\n\"description\": \"Do a print_r( $variable ) to PHP error log.\"\r\n},\r\n\"Exit with var_dump()\": {\r\n\"prefix\": \"xvd\",\r\n\"body\": [\"exit( var_dump( $0 ) );\"],\r\n\"description\": \"Exit with var_dump()\"\r\n},\r\n\"Exit with print_r()\": {\r\n\"prefix\": \"xpr\",\r\n\"body\": [\"exit( print_r( $0 ) );\"],\r\n\"description\": \"Exit with print_r()\"\r\n},\r\n\"Detailed Error Log\": {\r\n\"prefix\": \"logd\",\r\n\"body\": [\r\n\"error_log( print_r( (object)\",\r\n\"t[\",\r\n\"tt'line' =&gt; __LINE__,\",\r\n\"tt'file' =&gt; __FILE__,\",\r\n\"tt'dump' =&gt; [\",\r\n\"ttt$0,\",\r\n\"tt],\",\r\n\"t], true ) );\"\r\n],\r\n\"description\": \"Detailed error logging\"\r\n},\r\n\"Log gettype()\": {\r\n\"prefix\": \"logt\",\r\n\"body\": [\"error_log( gettype( $0 ) );\"],\r\n\"description\": \"Do a gettype( $variable ) to PHP error log.\"\r\n},\r\n\"Debug Filters\": {\r\n\"prefix\": \"logf\",\r\n\"body\": [\"add_action( 'all', function() { error_log( var_export( current_filter(), true ) ); } );\"],\r\n\"description\": \"Logs current filter.\"\r\n}\r\n}<\/pre>\n<h2>Conclusion<\/h2>\n<p>That&#8217;s about it for this post on debugging WordPress using Xdebug, Local, and VS Code. Using Xdebug, you&#8217;ll be able to more efficiently and effectively debug code. If you&#8217;ve never used it before, I&#8217;m sure you will find that Xdebug is a helpful tool in your development arsenal.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post covers debugging WordPress using Xdebug, Local, and VS Code. This approach to debugging is far superior to logging variables to the error log or to the screen. Getting things set up correctly can be tricky. That&#8217;s where this tutorial helps. Xdebug Xdebug is a powerful tool for debugging PHP applications. It conveniently comes <a class=\"more-link\" href=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/\">Read More<span class=\"screen-reader-text\"> Debugging WordPress Using Xdebug, Local, and VS Code<\/span><\/a><\/p>\n","protected":false},"author":132,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[357,140,150,142],"tags":[358,329,11832,378],"coauthors":[13188],"class_list":["post-25376","post","type-post","status-publish","format-standard","hentry","category-debugging","category-development","category-tutorial","category-wordpress","tag-debugging","tag-local-development","tag-vs-code","tag-xdebug"],"acf":{"blog_hero_image":{"ID":25389,"id":25389,"title":"xdebug-header-1920x720-dave-romsey","filename":"xdebug-header-1920x720-dave-romsey-scaled.jpg","filesize":466463,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled.jpg","link":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/xdebug-header-1920x720-dave-romsey\/","alt":"This is a close-up photo of fuzzy caterpillars on leaves.","author":"132","description":"","caption":"","name":"xdebug-header-1920x720-dave-romsey","status":"inherit","uploaded_to":25376,"date":"2022-08-28 17:18:36","modified":"2022-10-04 21:03:56","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/webdevstudios.com\/wp-includes\/images\/media\/default.png","width":2560,"height":960,"sizes":{"thumbnail":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-300x113.jpg","medium-width":300,"medium-height":113,"medium_large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-768x288.jpg","medium_large-width":768,"medium_large-height":288,"large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-1024x384.jpg","large-width":850,"large-height":319,"1536x1536":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-1536x576.jpg","1536x1536-width":1536,"1536x1536-height":576,"2048x2048":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-2048x768.jpg","2048x2048-width":2048,"2048x2048-height":768,"featured-work-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-436x511.jpg","featured-work-lg-width":436,"featured-work-lg-height":511,"featured-work-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-436x241.jpg","featured-work-sm-width":436,"featured-work-sm-height":241,"book-cover":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-235x300.jpg","book-cover-width":235,"book-cover-height":300,"home-hero":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-1350x440.jpg","home-hero-width":1350,"home-hero-height":440,"services-screenshot":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-590x790.jpg","services-screenshot-width":590,"services-screenshot-height":790,"single-blog-featured":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-1920x625.jpg","single-blog-featured-width":1920,"single-blog-featured-height":625,"single-blog-inline":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-850x360.jpg","single-blog-inline-width":850,"single-blog-inline-height":360,"grid-image":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-420x420.jpg","grid-image-width":420,"grid-image-height":420,"logo-train":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-160x60.jpg","logo-train-width":160,"logo-train-height":60,"simple-header":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-1920x191.jpg","simple-header-width":1920,"simple-header-height":191,"full-width":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-1920x720.jpg","full-width-width":1920,"full-width-height":720,"fifty-fifty-media":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled-1300x488.jpg","fifty-fifty-media-width":1300,"fifty-fifty-media-height":488,"gform-image-choice-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":113,"gform-image-choice-md":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":150,"gform-image-choice-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-header-1920x720-dave-romsey-scaled.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":225}}},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Debugging WordPress Using Xdebug, Local, and VS Code - WebDevStudios<\/title>\n<meta name=\"description\" content=\"This tutorial covers debugging WordPress using Xdebug, Local, and VS Code. You&#039;ll love this approach to debugging.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Debugging WordPress Using Xdebug, Local, and VS Code\" \/>\n<meta property=\"og:description\" content=\"This tutorial covers debugging WordPress using Xdebug, Local, and VS Code. You&#039;ll love this approach to debugging.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDevStudios\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/webdevstudios\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-06T16:00:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T15:54:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/10\/Copy-of-Blog-Post-Template-34.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dave Romsey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:site\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dave Romsey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/\"},\"author\":{\"name\":\"Dave Romsey\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/ededd1a789bcd1d0ee42a9d2a40be901\"},\"headline\":\"Debugging WordPress Using Xdebug, Local, and VS Code\",\"datePublished\":\"2022-10-06T16:00:51+00:00\",\"dateModified\":\"2024-04-15T15:54:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/\"},\"wordCount\":1913,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/xdebug-wordpress-vscode.gif\",\"keywords\":[\"debugging\",\"local development\",\"VS Code\",\"xdebug\"],\"articleSection\":[\"Debugging\",\"Development\",\"Tutorial\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/\",\"name\":\"Debugging WordPress Using Xdebug, Local, and VS Code - WebDevStudios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/xdebug-wordpress-vscode.gif\",\"datePublished\":\"2022-10-06T16:00:51+00:00\",\"dateModified\":\"2024-04-15T15:54:48+00:00\",\"description\":\"This tutorial covers debugging WordPress using Xdebug, Local, and VS Code. You'll love this approach to debugging.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/xdebug-wordpress-vscode.gif\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/xdebug-wordpress-vscode.gif\",\"width\":1323,\"height\":907,\"caption\":\"Xdebug in action\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/10\\\/06\\\/debugging-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Debugging WordPress Using Xdebug, Local, and VS Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"name\":\"WebDevStudios\",\"description\":\"WordPress Design and Development Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdevstudios.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\",\"name\":\"WebDevStudios\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"width\":173,\"height\":60,\"caption\":\"WebDevStudios\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/webdevstudios\",\"https:\\\/\\\/x.com\\\/webdevstudios\",\"http:\\\/\\\/instagram.com\\\/webdevstudios\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/webdevstudios-llc-\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/ededd1a789bcd1d0ee42a9d2a40be901\",\"name\":\"Dave Romsey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g1745ea464d21ac3e01b84b7c1e90810d\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g\",\"caption\":\"Dave Romsey\"},\"description\":\"David (Dave) is a Senior Backend Engineer at WebDevStudios where he works on WordPress plugins, themes, and web applications. He loves building solutions that help enable clients to achieve their goals. After graduating from Kent State University with a Bachelor\u2019s Degree in Computer Information Systems, Dave started working at Go Media Inc., where he successfully lobbied to adopt WordPress as the preferred platform to build solutions with, crediting its ease of use for both developers and end users. During his tenure, David created starter themes and various plugins which he used along with the team to build custom WordPress solutions for a wide range of clients. He has racked up over 10 years of experience developing with WordPress and has loved watching it evolve year after year. Prior to starting his career in web development, Dave established a strong background in customer service, where he once used The Telephone Doctors Swear Stopper to diffuse a tense situation. He also has a great sense of humor and is totally not writing this about himself. Dave has tons of hobbies and is always getting into something new, so he\u2019s never bored. He enjoys macro photography (particularly insect portraiture), riding his bike on the trail, cooking, playing darts, and hanging out with his two sassy teenage girls, Deedlit and Snarf.\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/david-romseywebdevstudios-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Debugging WordPress Using Xdebug, Local, and VS Code - WebDevStudios","description":"This tutorial covers debugging WordPress using Xdebug, Local, and VS Code. You'll love this approach to debugging.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Debugging WordPress Using Xdebug, Local, and VS Code","og_description":"This tutorial covers debugging WordPress using Xdebug, Local, and VS Code. You'll love this approach to debugging.","og_url":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2022-10-06T16:00:51+00:00","article_modified_time":"2024-04-15T15:54:48+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/10\/Copy-of-Blog-Post-Template-34.png","type":"image\/png"}],"author":"Dave Romsey","twitter_card":"summary_large_image","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Dave Romsey","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/"},"author":{"name":"Dave Romsey","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/ededd1a789bcd1d0ee42a9d2a40be901"},"headline":"Debugging WordPress Using Xdebug, Local, and VS Code","datePublished":"2022-10-06T16:00:51+00:00","dateModified":"2024-04-15T15:54:48+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/"},"wordCount":1913,"commentCount":6,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"image":{"@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-wordpress-vscode.gif","keywords":["debugging","local development","VS Code","xdebug"],"articleSection":["Debugging","Development","Tutorial","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/","url":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/","name":"Debugging WordPress Using Xdebug, Local, and VS Code - WebDevStudios","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-wordpress-vscode.gif","datePublished":"2022-10-06T16:00:51+00:00","dateModified":"2024-04-15T15:54:48+00:00","description":"This tutorial covers debugging WordPress using Xdebug, Local, and VS Code. You'll love this approach to debugging.","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/#primaryimage","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-wordpress-vscode.gif","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/xdebug-wordpress-vscode.gif","width":1323,"height":907,"caption":"Xdebug in action"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2022\/10\/06\/debugging-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"Debugging WordPress Using Xdebug, Local, and VS Code"}]},{"@type":"WebSite","@id":"https:\/\/webdevstudios.com\/#website","url":"https:\/\/webdevstudios.com\/","name":"WebDevStudios","description":"WordPress Design and Development Agency","publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevstudios.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevstudios.com\/#organization","name":"WebDevStudios","url":"https:\/\/webdevstudios.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","width":173,"height":60,"caption":"WebDevStudios"},"image":{"@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/webdevstudios","https:\/\/x.com\/webdevstudios","http:\/\/instagram.com\/webdevstudios","https:\/\/www.linkedin.com\/company\/webdevstudios-llc-\/"]},{"@type":"Person","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/ededd1a789bcd1d0ee42a9d2a40be901","name":"Dave Romsey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g1745ea464d21ac3e01b84b7c1e90810d","url":"https:\/\/secure.gravatar.com\/avatar\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c9156687896b57fa3611ebe0c876623d043a4edb88179f986c27c04232201728?s=96&d=mm&r=g","caption":"Dave Romsey"},"description":"David (Dave) is a Senior Backend Engineer at WebDevStudios where he works on WordPress plugins, themes, and web applications. He loves building solutions that help enable clients to achieve their goals. After graduating from Kent State University with a Bachelor\u2019s Degree in Computer Information Systems, Dave started working at Go Media Inc., where he successfully lobbied to adopt WordPress as the preferred platform to build solutions with, crediting its ease of use for both developers and end users. During his tenure, David created starter themes and various plugins which he used along with the team to build custom WordPress solutions for a wide range of clients. He has racked up over 10 years of experience developing with WordPress and has loved watching it evolve year after year. Prior to starting his career in web development, Dave established a strong background in customer service, where he once used The Telephone Doctors Swear Stopper to diffuse a tense situation. He also has a great sense of humor and is totally not writing this about himself. Dave has tons of hobbies and is always getting into something new, so he\u2019s never bored. He enjoys macro photography (particularly insect portraiture), riding his bike on the trail, cooking, playing darts, and hanging out with his two sassy teenage girls, Deedlit and Snarf.","url":"https:\/\/webdevstudios.com\/author\/david-romseywebdevstudios-com\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-6Bi","amp_enabled":false,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/25376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/users\/132"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=25376"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/25376\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=25376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=25376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=25376"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=25376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}