{"id":439,"date":"2021-01-20T15:19:15","date_gmt":"2021-01-20T15:19:15","guid":{"rendered":"https:\/\/localwp.com\/?post_type=help&#038;p=439"},"modified":"2023-07-27T16:08:27","modified_gmt":"2023-07-27T16:08:27","slug":"using-xdebug-within-local","status":"publish","type":"help","link":"https:\/\/localwp.com\/help-docs\/advanced\/using-xdebug-within-local\/","title":{"rendered":"Xdebug within Local"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Xdebug allows you to troubleshoot complicated PHP issues from within the Local app. Xdebug is an extension that can be toggled on or off from within Local. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group help-doc-toc\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Table of Contents:<\/p>\n\n\n<nav aria-label=\"Table of Contents\" class=\"wp-block-table-of-contents\"><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#orgac368b2\">What is Xdebug?<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#org5f7a2b8\">Xdebug Features<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#org3abd358\">Improvements to var_dump()<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#org39695c7\">Better Notices, Warnings, and Errors<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#org4f89189\">Step Debugger<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#org1952cb4\">Step Debugger Local Addon: Xdebug + VS Code<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#org629fe3c\">Step Debugger Local Addon: Xdebug + PHPStorm<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#org95dcaca\">Other Editors<\/a><\/li><\/ol><\/li><\/ol><\/nav>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"orgac368b2\" style=\"color:#000000\"><strong>What is Xdebug?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Xdebug is an extension for PHP that helps you with debugging and developing applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ve probably already run into Xdebug and not been aware of it. The most obvious improvements are:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Improved formatting of the <code>var_dump()<\/code> PHP function.<\/li>\n\n\n\n<li>More informative notices, warnings, and errors.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Because Xdebug does include more information about what is happening when things go wrong, it&#8217;s often enabled in development environments like Local.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The above improvements are awesome, but Xdebug also includes a powerful <strong>step debugger<\/strong> that is essential for debugging the most complex issues of a PHP project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can toggle Xdebug on or off easily from the app. From your Local app select the site you&#8217;d like and the toggle option will be at the bottom of that page. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-style-drop-shadow\" id=\"toggle-on-or-off\"><img decoding=\"async\" width=\"999\" height=\"650\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2022\/11\/lhd-xdebug-toggle.png\" alt=\"Toggle on or off Xdebug here. \" class=\"wp-image-1766\" title=\"Toggle on or off Xdebug. \" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2022\/11\/lhd-xdebug-toggle.png 999w, https:\/\/localwp.com\/wp-content\/uploads\/2022\/11\/lhd-xdebug-toggle-300x195.png 300w, https:\/\/localwp.com\/wp-content\/uploads\/2022\/11\/lhd-xdebug-toggle-768x500.png 768w\" sizes=\"(max-width: 999px) 100vw, 999px\" \/><figcaption class=\"wp-element-caption\">Toggle on and off Xdebug. <\/figcaption><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" id=\"org5f7a2b8\" style=\"color:#000000\"><strong>Xdebug Features<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s take a closer look at the main features of Xdebug and how we can make use of them within Local and WordPress.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"org3abd358\" style=\"color:#000000\"><strong>Improvements to <code>var_dump()<\/code><\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The easiest way to dive into an issue and see what&#8217;s happening is by using PHP&#8217;s <code>var_dump()<\/code>. Sure, it&#8217;s a little hacky to do, but it&#8217;s also quick and, more often than not, enough to get you what you need.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Without Xdebug, you have to remember to format PHP in a specific way. When Xdebug is enabled, calling <code>var_dump()<\/code> produces output that&#8217;s both readable and useful.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-var-dump.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-var-dump-1024x567.png\" alt=\"A screenshot showing the difference in var_dump output between having Xdebug enabled and having Xdebug disabled.\" class=\"wp-image-442\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-var-dump-1024x567.png 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-var-dump-300x166.png 300w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-var-dump-768x425.png 768w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-var-dump-1536x850.png 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-var-dump-2048x1133.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"org39695c7\" style=\"color:#000000\"><strong>Better Notices, Warnings, and Errors<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When troubleshooting, one of the most helpful things is to get an idea of where exactly an error is occurring. Xdebug will improve the messages that PHP gives by providing a stack trace. You can think of a stack trace as a list of functions called before the error was encountered.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-better-messages.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"566\" src=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-better-messages-1024x566.png\" alt=\"A screenshot showing the difference in PHP messages between having Xdebug enabled and having Xdebug disabled.\" class=\"wp-image-440\" srcset=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-better-messages-1024x566.png 1024w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-better-messages-300x166.png 300w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-better-messages-768x424.png 768w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-better-messages-1536x848.png 1536w, https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-better-messages-2048x1131.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div id=\"help-step-block_f75c804552f570e63095db1789f6e014\" class=\"help-note-container help-type-note\">\n\t<div class=\"help-icon\">\n\t\t<svg viewBox=\"0 0 512 512\" fill=\"currentColor\"><path fill=\"currentColor\" d=\"M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm70.7 121.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L243.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z\"><\/path><\/svg>\t<\/div>\n    <div class=\"help-text\">\n\t\t<p>If you&#8217;re still new to doing PHP development, this &#8220;feature&#8221; of Xdebug can be confusing. You might be asking yourself:<\/p>\n<p><!-- wp:quote --><\/p>\n<blockquote class=\"wp-block-quote\"><p>&#8220;Why does my site look broken in Local but not on Production?&#8221;<\/p><\/blockquote>\n<p><!-- \/wp:quote --> <!-- wp:paragraph --><\/p>\n<p>In some cases, this is because Xdebug enhances these messages (notices, warnings, errors) to make them more &#8220;noisy.&#8221;<\/p>\n<p><!-- \/wp:paragraph --> <!-- wp:paragraph --><\/p>\n<p>To learn more about this as well as how to configure PHP messages in Local, see this related <a href=\"https:\/\/localwp.com\/help-docs\/troubleshooting\/warnings-and-errors-in-local\/\" target=\"_blank\" rel=\"noopener\"><span style=\"text-decoration: underline;\"><strong>Help Doc<\/strong><\/span>.<\/a><\/p>\n<p><!-- \/wp:list --><\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"org4f89189\" style=\"color:#000000\"><strong>Step Debugger<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Often, when people think of Xdebug, the step debugger is what comes to mind. This feature allows you to interactively walk through your code and inspect the application&#8217;s state at specific points in time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each of those points in time is specified by creating a &#8220;breakpoint&#8221; within the editor. The editor communicates with Xdebug to pause the application at that specific point in the code.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1408\" style=\"aspect-ratio: 1400 \/ 1408;\" width=\"1400\" controls src=\"https:\/\/localwp.com\/wp-content\/uploads\/2021\/01\/xdebug-vscode-step-debugger.mp4\"><\/video><figcaption class=\"wp-element-caption\">Using Xdebug&#8217;s step debugger with VS Code to investigate the call stack and variables within WordPress&#8217; default TwentyTwentyOne theme header.<\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Traditionally it&#8217;s been challenging getting Xdebug and your editor of choice to communicate with each other. Local has two Add-ons that help make that configuration process easy; one for PHPStorm and one for VS Code.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background logo__bg addon_logo\" style=\"background-color:#f5fdf7\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/localwp.com\/add-ons\/xdebug-vscode\"><img decoding=\"async\" src=\"https:\/\/local.getflywheel.com\/wp-content\/add-ons-icons\/xdebug_VScode.svg\" alt=\"\"\/><\/a><\/figure><\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"org1952cb4\" style=\"color:#000000\"><strong>Step Debugger Local Addon: Xdebug + VS Code<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This Local Add-on helps to configure the connection between Xdebug and VS Code. For more information or to help with development, take a look at these links:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/localwp.com\/add-ons\/xdebug-vscode\">https:\/\/localwp.com\/add-ons\/xdebug-vscode<\/a><\/span><\/strong><\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/github.com\/pixeljar\/local-addon-xdebug-vscode\/\">https:\/\/github.com\/pixeljar\/local-addon-xdebug-vscode\/<\/a><\/span><\/strong><\/li>\n<\/ul>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background logo__bg addon_logo\" style=\"background-color:#eff5fb\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/localwp.com\/add-ons\/xdebug-phpstorm\"><img decoding=\"async\" src=\"https:\/\/localwp.com\/wp-content\/add-ons-icons\/xdebug_phpstorm.svg\" alt=\"\"\/><\/a><\/figure><\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"org629fe3c\" style=\"color:#000000\"><strong>Step Debugger Local Addon: Xdebug + PHPStorm<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This Local Add-on helps to configure the connection between Xdebug and PHPStorm. For more information or to help with development, take a look at these links:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/localwp.com\/add-ons\/xdebug-phpstorm\/\">https:\/\/localwp.com\/add-ons\/xdebug-phpstorm\/<\/a><\/span><\/strong><\/li>\n\n\n\n<li><strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/github.com\/getflywheel\/local-addon-xdebug-phpstorm\">https:\/\/github.com\/getflywheel\/local-addon-xdebug-phpstorm<\/a><\/span><\/strong><\/li>\n<\/ul>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" id=\"org95dcaca\" style=\"color:#000000\"><strong>Other Editors<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you have a different editor, you may still be able to use Xdebug&#8217;s step debugger within Local. I recommend taking a look at Xdebug&#8217;s documentation for specific setings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/xdebug.org\/docs\/step_debug\"><strong><span style=\"text-decoration: underline;\">https:\/\/xdebug.org\/docs\/step_debug<\/span><\/strong><\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Each site&#8217;s PHP configuration can be found within the site folder within the PHP.ini file for the site, which can be found in the <code>conf<\/code> folder:<\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">site-name\/conf\/php\/php.ini.hbs<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure to restart the site after any changes to this file so that Local can re-compile those settings for the site.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/community.localwp.com\/c\/support\/5\" target=\"_blank\" rel=\"noreferrer noopener\">Get Community Support<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Xdebug allows you to troubleshoot complicated PHP issues from within the Local app. Xdebug is an extension that can be toggled on or off from within Local. Table of Contents: What is Xdebug? Xdebug is an extension for PHP that helps you with debugging and developing applications. You&#8217;ve probably already run into Xdebug and not&#8230;<\/p>\n","protected":false},"author":49,"parent":352,"menu_order":12,"template":"","tags":[43,24,23,25],"helpcategories":[5],"class_list":["post-439","help","type-help","status-publish","hentry","tag-advanced","tag-phpstorm","tag-vs-code","tag-xdebug","helpcategories-advanced"],"acf":{"help_keywords":""},"_links":{"self":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc"}],"about":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/types\/help"}],"author":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/users\/49"}],"version-history":[{"count":0,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/439\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/help-doc\/352"}],"wp:attachment":[{"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/media?parent=439"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/tags?post=439"},{"taxonomy":"helpcategories","embeddable":true,"href":"https:\/\/localwp.com\/wp-json\/wp\/v2\/helpcategories?post=439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}