--- title: "Debugging D8: PhpStorm & Web Debugging" date: "2019-04-08T16:29:30+00:00" summary: image: type: "article" url: "/acquia-cloud-platform/help/89031-debugging-d8-phpstorm-web-debugging" id: "2553bfcf-b4c0-4e2a-a9de-3c726e6c832f" --- Table of contents will be added Welcome to Post #2 in my series about debugging in Drupal 8. If you haven't read my [Introduction](https://dev.acquia.com/blog/debugging-drupal-8/debugging-drupal-8-in-phpstorm/10/08/2016/16321), the reason why I decided to create this series is that a lot of Drupalists use legacy ways of non-interactive debugging based on php-native commands. Even though it's completely valid to use these commands to quickly display the value of a random variable, and to do simple (re-)search based on that, they have significant drawbacks compared to real interactive debugging. In this series, I will show you the basic steps on how to to set up debugging on a few commonly used developer environments. Let's start with Preconditions: * The latest versions of following applications are installed on your PC (as of July 2016): * Mac OS X El Captain * Acquia Dev Desktop 2 * Google Chrome latest * Installed Drupal 8 site you want to debug running inside of Acquia Dev Desktop 2. In my example, the site is called blted8. Acquia Dev Desktop 2 setup -------------------------- 1\. Open Acquia Dev Desktop / Preferences, tab Config ![Menu options in Acquia Dev Desktop are shown, with "Preferences" highlighted. Local site, code, database, and PHP version details are displayed.](https://acquia.widen.net/content/ruwznsurhy/web/url_dbc53c6eb354f3b96ff7714b89fbd376.png?v=8995f674-cf56-4875-a41d-aa71fd3f6dc9) 2\. Select the php.ini which corresponds with the PHP version chosen as Default and click "edit" ![Settings window showing PHP version selection, configuration file paths, and PHP mode options. Includes buttons for editing files and confirming changes.](https://acquia.widen.net/content/akn01ppplx/web/url_d35193521ac79c4df0b7b5041a280ec4.png?v=f3fcdcde-7556-465c-bb17-4523ea8223a5) 3\. Uncomment the line (remove semicolon) pointing to xdebug.so file ![Text editor showing PHP configuration file with various extensions and settings, including zend_extension paths.](https://acquia.widen.net/content/d0rkdj4ate/web/url_14f7e1bff5014e3e127230f54a0d66dc.png?v=c0ff7566-b611-483d-9708-11f5b29d94fa) 4\. At the very bottom of php.ini, add following two lines: `xdebug.remote_enable=1` `xdebug.remote_log=/tmp/xdebug.log` ![Text editor showing PHP configuration file with highlighted lines for Xdebug settings and a red arrow pointing to them.](https://acquia.widen.net/content/oyixdwoxfv/web/url_10cc2a2c2f863fe07df09895d24794d1.png?v=4ea5b6cd-bf4d-45b9-b49c-833371d416d6) While the second line is not completely necessary, setting up a log will significantly help you to troubleshoot if debugging is not working properly. 5\. Close settings window and restart apache and MySQL on the Acquia Dev Desktop main window: ![Acquia Dev Desktop 2 interface showing site details, local code path, PHP version, and options to host on Acquia Cloud. Apache and MySQL indicators visible.](https://acquia.widen.net/content/nxvazuxlwk/web/url_eb97689dd1be9204a58b4ca944e3a1d3.png?v=bf2c85e2-48b6-4d4a-b97e-9a006694fea0) PhpStorm Setup -------------- Unlike in the past and in another IDEs, you don't need to set up almost anything in PhpStorm! It listens to all the debug connections automatically by pressing one magic "phone" button or selecting in menu Start listening for PHP debug connections in menu "Run." But because we want to be sure debugging is not dependent from some breakpoints we set in the code, we also switch on "Break at first line in PHP scripts" option below: ![IDE screenshot showing PHP code and a menu highlighting "Start Listening for PHP Debug Connections." Arrows point to a debug icon.](https://acquia.widen.net/content/nrfcrhutf4/web/url_0b1822a99b84025ead1528bc040729eb.png?v=b776cb7b-efca-433f-b4ce-8633fccbda43) Google Chrome setup ------------------- 1\. Install extension Xdebug Helper 2\. Leave all its settings default, you will not need to change anything for PhpStorm 3\. Switch the grey Xdebug icon on Google Chrome toolbar to green ![Browser toolbar with a dropdown menu showing options: Debug, Profile, Trace, Disable. A pink arrow points to the dropdown icon.](https://acquia.widen.net/content/hpkgkhpys1/web/url_f73eaf1c25fa161ebbc676ca82cdcef4.png?v=7ddf037d-bb05-451e-bdaa-dc1be39395d2) 4\. Refresh the browser (cmd+R). If everything was set up correctly, you should see how PhpStorm detected an incoming connection. _Note: if you don't see this screen, see the [Troubleshooting section](#troubleshooting) below._ ![IDE screenshot showing a project directory, code editor, and a pop-up for configuring Xdebug connection settings.](https://acquia.widen.net/content/gnodu7ihar/web/url_c56e8ae4a5c171a326d81e9155875d29.png?v=80889a79-ab1a-42a2-a82c-5b0f6f55d931) 5\. Select the line which points to document root of your Drupal 8 installation (in my case it's blted8/docroot/index.php) and click "Accept 6\. PhpStorm stops at first line of index.php file you selected. ![IDE screenshot showing PHP code in PhpStorm, with a file directory on the left and code editing pane on the right.](https://acquia.widen.net/content/ihben7vpl3/web/url_8870d84bc15eef2e4be1bc11f7f86442.png?v=26cdcb96-f573-46b0-a30c-a2851574b329) Debugger stopped at first line of index.php file, because we selected "Break at first line in PHP scripts in Run menu. Now it is obvious that debugging connection works, so we can switch this option back off and set some breakpoint in the Drupal 8 code to see some more information. 7\. Set breakpoint somewhere in the code. In my example I'm setting breakpoint into core/lib/Drupal/Component/DependencyInjection/Container::get(), line 137, because I want to see the services system reads into the DI Container together with their parameters. ![Screenshot of PhpStorm IDE displaying a PHP file with highlighted code and arrows pointing to the debug and run buttons.](https://acquia.widen.net/content/3p2joctbfg/web/url_bbc2be2dcaabed0a3765aa5cdbf6209f.png?v=793abecf-d5a1-499f-9e66-34ebc1b37a7c) After clicking the red play button, application script should stop at the line you set a breakpoint on. Let's take a closer look at the debugging window now: ![Code editor displaying PHP code with a file directory on the left and a variable inspector at the bottom.](https://acquia.widen.net/content/qtc4tgbhi1/web/url_9ae95d0e76c55b6f29a0a2153824fc72.png?v=9e94605f-674a-4675-b536-a9201dd3faae) * In the Frames window at bottom-left side you can see the backtrace route of the script you are running. Similar to debug\_print\_backtrace() command, but with a significant difference: you can click on every trace and see actual variables when the function below was called. Incredibly helpful! * In the Variables window at bottom-right side you can see a list and values of variables currently available to the method you are inside. Objects and arrays are expandable, so you can jump inside. In addition to that: * You can see all PHP globals which are part of each PHP script * You can set values to simple variables like strings and continue running the code with changed variables * You can navigate forward in the script with the keyboard shortcuts or arrows near the Debugger tabs. You can step forward, step into method, step out, run to the cursor, set the list of methods to ignore and much more * You can not navigate backward in the script because of nature of the debugging. To navigate "backward you need to stop debugging, set the breakpoint to the sooner state of the script and refresh the page. #### **Troubleshooting point 4:** **Browser stays open and it seems that a page is loading forever** Switch the application to PhpStorm and check if debugger is perhaps still not active (=red run arrow in bottom left corner is active). A very common case is that debugger is active in the background and the window on PC only didn't switch properly. In this case the script runs "forever" until debugger is stopped / page is loaded. **Page was loaded completely without debugger being stopped** Debug connection doesn't work. Sometimes it helps to check /tmp/xdebug.log to determine if xdebug was loaded at all. If not, you need to go back to original steps and ensure xdebug extension is correctly loaded in php. Use phpinfo(); command inside of any script and search for "xdebug here. Important value is "xdebug.remote\_enable which must be set to "on or "1". If you don't find Xdebug in the info file text at all, xdebug extension was not loaded. In that case, double check the line you uncommented in Acquia Dev Desktop (step 3). Does the file exist? Especially on Windows machines often happens that some backslashes and spaces in names are not correctly translated (check how other paths in php.ini are displayed in Windows). You can also check apache logs for possible errors in this case. **The window with script selection is skipped - debugging directly breaks at first line of php script** This is normal behavior, it happens if there is only one possible index.php file to be debugged in the project or if the file was already chosen by previous debugging attempt. **PhpStorm opens debugging screen with message in "Variables" window like: "Cannot compute source position or similar** PhpStorm cannot determine the file you haven't stored in your local project repository. For browser-based debugging this usually happens if you have more projects you are trying to debug with different code bases and you have accidentally the wrong project opened. So you need to open exactly the right one you are accessing from the website. There may be also different use-cases for this issue when you are debugging from CLI. I will describe later in next, third part of this blog. Debugging Drupal 8 Series contents ---------------------------------- 1. [Introduction](https://dev.acquia.com/blog/debugging-drupal-8/debugging-drupal-8-in-phpstorm/10/08/2016/16321) 2. [Local Web-based Debugging in Mac OS X, Acquia Dev Desktop 2, and XDebug](https://dev.acquia.com/blog/debugging-drupal-8/debugging-drupal-8-in-phpstorm-part-2-local-webbased-debugging-in-mac-os-x-acquia-dev-desktop-2-and-xdebug/17/08/2016/16426) 3. [Debugging TWIG templates with PhpStorm and XDebug](https://dev.acquia.com/blog/debugging-drupal-8/debugging-twig-templates-in-drupal-8-with-phpstorm-and-xdebug/25/08/2016/16586) 4. [Local CLI Debugging in Mac OS X, Acquia Dev Desktop 2, and XDebug](https://dev.acquia.com/blog/debugging-drupal-8/debugging-drupal-8-in-phpstorm-local-cli-debugging-in-mac-os-x-acquia-dev-desktop-2-and-xdebug/06/09/2016/16706)