{"id":19960,"date":"2016-06-21T15:02:00","date_gmt":"2016-06-21T15:02:00","guid":{"rendered":"https:\/\/blog.jetbrains.com\/phpstorm\/?p=10268"},"modified":"2016-06-30T14:17:39","modified_gmt":"2016-06-30T14:17:39","slug":"debugging-vvv-vagrant-setup-with-phpstorm","status":"publish","type":"phpstorm","link":"https:\/\/blog.jetbrains.com\/pt-br\/phpstorm\/2016\/06\/debugging-vvv-vagrant-setup-with-phpstorm","title":{"rendered":"Debugging VVV Vagrant Setup With PhpStorm"},"content":{"rendered":"<p>It started with a Tweet:<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">Who do i know that uses PHPstorm with VVV and XDebug? I need some guidance on getting things setup.<\/p>\n<p>\u2014 Andrew Woods (@awoods) <a href=\"https:\/\/twitter.com\/awoods\/status\/745095098031996929\" target=\"_blank\" rel=\"noopener\">June 21, 2016<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p>Recently we&#8217;ve made a lot of changes to debugging in PhpStorm to try and make the process as simple as possible. So I decided to blog about not only\u00a0how to get debugging working, but the process I used to figure out exactly what needed to be changed.<\/p>\n<p><!--more--><\/p>\n<p><a href=\"https:\/\/github.com\/Varying-Vagrant-Vagrants\/VVV\" target=\"_blank\" rel=\"noopener\">Varying Vagrant Vagrants<\/a> is a Vagrant setup designed to make working with WordPress as easy as possible. It has various versions of WordPress running under separate URLs. For this exercise, I installed the plugins that the documentation recommended, and then cloned the repository, and used `vagrant up` to bring the box up and run its provisioners.<\/p>\n<p>The good news is this was really simple\u00a0and allowed me to hit the\u00a0current stable version URL at `http:\/\/local.wordpress.dev` quickly and easily to see my working WordPress install.<\/p>\n<p>The first thing I did was to open the project in\u00a0PhpStorm. I&#8217;d cloned VVV into the `www` directory in my user&#8217;s home folder under the name `vvv`. I didn&#8217;t want to confuse everything by opening the various different versions of WordPress in one project, so I just used PhpStorm&#8217;s\u00a0<em>Open Directory<\/em> option to open a project from `~\/www\/vvv\/www\/wordpress-default`. This gave me a project open that linked directly to the webroot of the\u00a0`http:\/\/local.wordpress.dev` URL. It&#8217;s important to consider these factors when you are deciding what to make your projects root to make mapping paths easier &#8212; more on this later.<\/p>\n<p>At this point, I have no idea how this vagrant box is configured. Is it using\u00a0Apache? Is it using\u00a0Nginx and PHP-FPM? Who knows! It&#8217;s really not that important, but generally, the first thing I do once I&#8217;ve opened the project is to\u00a0tell PhpStorm which PHP install I&#8217;m going to use. Doing this straight away tends to make potential problems less likely to appear further down the line.<\/p>\n<p>The settings we want are found in the Preferences pane under\u00a0<em>Languages &amp; Frameworks<\/em> then\u00a0<em>PHP\u00a0<\/em>(if you are as lazy as I am, you can use CMD\/CTRL+SHIFT+A to search actions and then type `<em>interp`<\/em> to go right there). We&#8217;ll need to define a new interpreter, so click the <em>[&#8230;]<\/em> button next to the\u00a0<em>Interpreter:<\/em> drop down, to be taken to the <em>Interpreters <\/em>management screen.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10273\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/06\/phpstorm-vvv-interpreters.png\" alt=\"Interpreters Dialog\" width=\"830\" height=\"432\" \/><\/p>\n<p>You can see that currently I only have my global local PHP install configured, so we&#8217;ll need to create a new interpreter for this Vagrant box to tell the project to use it. It&#8217;s relatively straightforward to create an interpreter for a vagrant machine; I used the following steps:<\/p>\n<ul>\n<li>Clicked the\u00a0<em>[+]<\/em> to add a new interpreter and then selected\u00a0<em>Remote.<\/em><\/li>\n<li>Selected the\u00a0<em>Vagrant<\/em> radio box, and in the\u00a0<em>Vagrant Instance Folder\u00a0<\/em>I put the root folder where I cloned VVV &#8211; `~\/www\/vvv\/www\/wordpress-default`<\/li>\n<li>PhpStorm thinks for a minute and then fills in the rest of the information correctly, once it did I clicked OK.<\/li>\n<li>PhpStorm connected to the\u00a0Vagrant box and confirmed all is well, and then it opened the completed interpreter setting dialog.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10274\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/06\/phpstorm-vvv-created-interpreter.png\" alt=\"vvv-created-interpreter\" width=\"835\" height=\"531\" \/><\/p>\n<p>There are a few things to note here. First, I ticked the\u00a0<em>Visible only for this project<\/em> box, as I don&#8217;t want to see this interpreter in other PhpStorm projects. I also noticed that the PHP executable has been detected correctly (yay! PHP 7!), but that there is no\u00a0debugger installed. I&#8217;m not too worried at this point, I have no idea how this machine is configured, and it may have Xdebug only set for HTTP requests, and not for CLI.<\/p>\n<p>With things looking right here, the next thing I want to do is to check\u00a0if Xdebug is installed, and if so, how it&#8217;s configured. Recent versions of PhpStorm ship with the\u00a0<em>Web Server Debug Validation<\/em> tool (found under the <em>Run\u00a0<\/em>menu). Before we can run that, we need to create a deployment server so that PhpStorm knows the locations of local files, and how to map those to files on the server, I selected the\u00a0<em>Remote Web Server<strong>\u00a0<\/strong><\/em>option, and then clicked the\u00a0<em>[&#8230;]<\/em> button to open the\u00a0<em>Deployment Server<\/em> dialog.<\/p>\n<p>We also need to create a deployment using SFTP. This may be a little confusing because we&#8217;ve already told PhpStorm we&#8217;re using Vagrant, and it should be able to infer this from there. We\u00a0only need to create a deployment configuration for the debug validation tool so that the tool knows where to create a file and be able to call it via an HTTP request. This may seem painful, but we only need to do this to be able to run the validation tool:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10276\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/06\/phpstorm-vvv-deployment-main.png\" alt=\"vvv-deployment-main\" width=\"787\" height=\"631\" \/> <img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10277\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/06\/phpstorm-vvv-deployment-mapping.png\" alt=\"vvv-deployment-mapping\" width=\"787\" height=\"631\" \/><\/p>\n<p>Notice how\u00a0I had to use the URL I&#8217;m using to access the site as the <em>SFTP Host\u00a0<\/em>rather than the IP address, and I&#8217;ve added a simple mapping from the project root on the host machine to the project root in the virtual machine. After we run the debugger configuration validation tool, we see this:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10275\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/06\/phpstorm-vvv-validate-results.png\" alt=\"vvv-validate-results\" width=\"609\" height=\"294\" \/><\/p>\n<p>My earlier fears when creating the\u00a0interpreter are correct &#8211; PHP on the virtual machine doesn&#8217;t have Xdebug installed and configured. After some investigation with the VVV documentation, I found this is an easy fix; we can simply `vagrant ssh` into the Vagrant box, and run `xdebug_on` to install and configure Xdebug.<\/p>\n<p>I took a look at the settings that this script configured Xdebug with, and they looked good to me with the exception that I prefer to use the `<a href=\"https:\/\/xdebug.org\/docs\/all_settings#remote_connect_back\" target=\"_blank\" rel=\"noopener\">xdebug.remote_connect_back<\/a>` setting to\u00a0send debug sessions back to the IP address that made the request, rather than to specify the IP address manually. I left the settings as VVV configured them.<\/p>\n<p>Heading back to PhpStorm, we can run the debug configuration validation tool again, and this time, we see everything looking promising:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10278\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/06\/phpstorm-vvv-validate-works.png\" alt=\"vvv-validate-works\" width=\"610\" height=\"384\" \/><\/p>\n<p>Now we see that everything is blue, and I have confidence that the debug session will work as expected.<\/p>\n<p>To test the debugger, I opened `index.php` and set a breakpoint on line 17 just before the actual WordPress main file is required. At this point, I&#8217;m not interested in actually debugging anything, I only want to check that the script stops, and PhpStorm is opened with step debugging available. After listening for connections, I head over to Chrome and enable debugging via the Chrome extension I use, then hit refresh&#8230;<\/p>\n<p>Nothing happens, the script hangs, but looking at PhpStorm I can see that a debugger session has started, but PhpStorm appears to be just sitting there without actually debugging. This is a common problem when PhpStorm can&#8217;t figure out how to map the files on the server to the files in your local project &#8212; we have a path problem. Clicking on the <em>Debugger <\/em>tab in the <em>Debug<\/em>\u00a0pane that has opened, there&#8217;s a message that confirmed the problem is as suspected:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10279\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/06\/phpstorm-vvv-problem.png\" alt=\"vvv-problem\" width=\"662\" height=\"179\" \/><\/p>\n<p>Even though we&#8217;ve already told PhpStorm previously how to map files from our local machine to the Vagrant host, there is a problem here (and it&#8217;s actually one that took me a while to spot). We mapped the local path to the shared folder path on the Vagrant box, which is `\/vagrant`, but the actual files are being served from `\/srv\/www`. This is probably because of symlinks, or other such trickery; I looked but couldn&#8217;t figure it out in my 2-minute cursory glance.<\/p>\n<p>If you look carefully at the error, you&#8217;ll see the mapping you need to create to make all things golden. We need to tell PhpStorm where to find\u00a0\u00a0`\/srv\/www\/wordpress-default` in the local project, and we can do that by clicking on\u00a0<em>Click to setup path mappings<\/em>. In the box next to the local path to `wordpress-default`, add the location on the server as `\/srv\/www\/wordpress-default`,\u00a0and press Enter.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-10281\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/06\/phpstorm-vvv-mapping.png\" alt=\"vvv-mapping\" width=\"690\" height=\"364\" \/><\/p>\n<p>The OK button should become enabled. Again, it&#8217;s worth pointing out that we only need to create this additional mapping because there is a discrepancy between the shared folder that we&#8217;ve already mapped at `\/vagrant` and the location of the webroot at `\/srv\/www`. In most other configurations we wouldn&#8217;t need to do this.<\/p>\n<p>When we hit OK, everything works as expected and we can start debugging WordPress as needed. It took me around 35 minutes to get debugging working,\u00a0mainly because as a developer and a human being I didn&#8217;t read the error in the debug pane that explained the problem. I just glossed over it and assumed it was a mapping problem with the `\/vagrant` folder and not the `\/var\/www` folder. Once I actually read the message, it took 20 seconds to actually get debugging working.<\/p>\n<p>This is a long post intentionally. I wanted to explain my process for actually solving debugging problems step by step rather than just give the actual answer to this problem. Hopefully, that helps other people to solve their debugging issues, particularly when you&#8217;re working with a 3rd-party virtual machine or container that you have no experience with.<\/p>\n<p>Let me know if this helps you.<\/p>\n<p><em>\u00a0&#8212; Gary and the PhpStorm Team<\/em><\/p>\n","protected":false},"author":1152,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[2347],"tags":[263,45,380,2529,468,1116],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/phpstorm\/19960"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/phpstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/types\/phpstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/users\/1152"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/comments?post=19960"}],"version-history":[{"count":0,"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/phpstorm\/19960\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/media?parent=19960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/categories?post=19960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/tags?post=19960"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/pt-br\/wp-json\/wp\/v2\/cross-post-tag?post=19960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}