Phpstorm Chromebook

Posted : admin On 1/3/2022

With the Live Edit functionality, the changes you make to your HTML, CSS, or JavaScript code are immediately shown in the browser without reloading the page. Live Edit is available only during a debugging session, see Debug JavaScript in Chrome for details.

For me, this doesn't seem to hook up phpstorm's javascript debugger - breakpoints aren't hit in.js files referenced by the launched page. So I do primary debugging with Chrome, then use Edge Developer Tools from Microsoft to debug Edge-specific problems. PhpStorm presumes that you install browsers according to a standard procedure and assigns each installation an alias which stands for the default path to the browser's executable file or macOS application. In addition to the browsers from the default list, you can configure custom browser installations. Here’s how to go about debugging, stepping through, and profiling remote code like a breeze. These are the steps I took to install/enable Xdebug on a remote LAMP stack and debug/profile hosted code using PhpStorm and a Chrome extension. As a bonus I’ll share how I debug cURL requests with Xdebug too. Setup remote hosting with SSH access. Magento Chrome Toolbar can be integrated with PhpStorm to directly open the template file you wish to edit. You need to install Remote Call Plugin in PhpStorm, then enable the feature from Magento Admin.

Live Edit works for other file types that contain or generate HTML, CSS, or JavaScript. You can also use Live Edit when debugging a Node.js application. See Live Edit in Node.js application for details.

By default, Live Edit is enabled only for HTML and CSS files.

Before you start

Install and enable the LiveEdit plugin on the Settings/Preferences Plugins page as described in Installing plugins from JetBrains repository.

Activate and configure Live Edit in JavaScript

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Build, Execution, Deployment Debugger Live Edit.

  2. On the Live Edit page that opens, select the Update application in Chrome on changes in checkbox.

  3. By default, PhpStorm shows on-the-fly preview only for HTML and CSS code. To enable Live Edit in JavaScript, select the JavaScript, HTML and CSS option.

  4. Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value 300 ms or specify a custom value using the spin box next to the corresponding field.

  5. To enable reloading of JavaScript files that are executed by Node.js, select the Update Node.js application on change checkbox. Use the spin box to specify the elapsed time for upload, the default value is 300.

  6. To enable Live Edit in code that can be compiled into JavaScript, HTML, or CSS, for example, in TypeScript, Pug, or SCSS, select the Track changes in files compiled to JavaScript, HTML or CSS checkbox.

    All the changes made in such files are automatically saved to trigger compilation and then appear in the browser.

    Note that a changed file is saved shortly after the update, contrary to regular autosave triggered by closing a file, a project, or PhpStorm, or by other events.

  7. To configure highlighting, select the Highlight current element in browser on caret change checkbox. Otherwise, during a debugging session, you will have to hold Shift and hover over the element in the editor to highlight it in the browser.

  8. Select the Restart if hotswap fails checkbox to allow PhpStorm to reload the page automatically if the changes couldn't be applied without that.

August 11, 2016Yann Jacquot6 min read

Warning: this article concerns php5 version. If your PHP version is different, replace php5 by php/X.Y in paths (X.Y is your PHP version) and phpX.Y in command. For example :

  • sudo apt-get install php5-xdebug becomes sudo apt-get install php5.6-xdebug
  • /etc/php5/mods-available/xdebug.ini becomes /etc/php/5.6/mods-available/xdebug.ini

I love debuggers. They allow me to understand deep down in my code why something doesn't work, and are even more useful when I work on legacy projects.
When I work on the client side, the browser already provides me all the tools I need to dig deeper than some console.log() scattered semi-randomly in the source code.
However, I struggled to configure my workspace when I worked on a PHP Symfony2 project hosted in a Vagrant virtual machine.

Step1: Install Xdebug on your Vagrant virtual machine

That may seem obvious, but you need to have Xdebug installed on your virtual machine to benefit from its services.

Then, configure it:

with the following lines:

Finally, if you use php5-fpm, you need to restart it:

If you use Ansible to provision your virtual machine, you can also use a ready-to-action Xdebug role.

Step2: Configure PhpStorm

First, select the 'Edit configurations' item in the 'Run' menu.

Then, add a new 'PHP Remote Debug' configuration.

We will use the IDE key configured in your Vagrant and in your browser.
To fully configure this debugger configuration, you will need to create what PhpStorm calls a server.

  • Fill the correct hostname
  • Check 'Use path mappings' checkbox, and write the project's absolute path
    on your Vagrant virtual machine

Step3: Configure Xdebug

Use Xdebug to debug your web application on Chrome

Now that Vagrant with Xdebug is up and running, let's configure Xdebug Chrome extension.

First, we need to install it from Chrome Web Store

Make sure that the extension is enabled on your browser's extensions list page.

Now, you should see on the right side of the address bar the extension's symbol.

Right-click on it, then click on the 'Options' sub-menu.

You have to use the IDE key previously set.

Xdebug plugin also exists for other browsers.

Finally, in your browser click on the bug in your address bar to switch to the 'Debug' mode

Use Xdebug to debug your APIs route with Postman

Phpstorm Chromebook Free

Once your Xdebug configuration is added, you need to add ?XDEBUG_SESSION_START=_<XDEBUG_KEYNAME>_ at the end of your route. And that's all!

Use Xdebug to debug commands or unit tests

To use Xdebug for debugging commands or unit tests, first, you need to add xdebug.remote_autostart=true in XDebug configuration file of your Vagrant xdebug.ini.

Then, you need to specify the xdebug.remote_host (IP address of your local from your Vagrant) when launching the command from the virtual machine’s terminal.

  • First, get the host IP address by using ifconfig from your local terminal (the host) :
  • Then, launch your command

For instance, if you want to debug your unit tests in a Symfony project, you can run:

Step4: Enjoy!

Now, in PhpStorm you:

  • Add your breakpoints by clicking to the left of the lines
  • Click on the bug icon on the upper-right corner

You should now be able to break on the exact line you selected in your IDE.

Bonus: Performance

You need to know that enabling Xdebug slows down your app (x2), the fastest way to disable it is to run the following command: php5dismod xdebug

Use php5enmod xdebug to enable it back. Each time you'll also need to restart php-fpm or apache.

Troubleshooting: I did the tutorial but Xdebug doesn’t work

It’s probably because a symbolic link is missing in your php conf.

Phpstorm Chromebook Review

  • First type in your virtual machine php -i grep xdebug

If you have no response, it means Xdebug is not set correctly

  • Then check if Xdebug is mentioned when running php -v from your Vagrant.
  • If not, add a symbolic link to specify that the Xdebug module should be enabled, for instance (you may need sudo):

Phpstorm Chromebook App

  • You should obtain by running php -v

Phpstorm Chromebook

Phpstorm Chromebook

I hope you've made your way through the process and that it will improve your efficiency as much as it does for me. If you have other ways to configure your debugger, feel free to share them in the comments section below.