This tutorial explains how to configure the Xdebug helper extension for Chrome to be used with PhpStorm.

1. Install the Xdebug helper extension for Chrome from the Chrome webstore:

Read the instructions and click Add:

Xdebug helper is installed!

2. Open PhpStorm and enable listening to debug connections:

3. You are ready to initiate a connection from the browser side. Use the bug-styled icon near the right end of the address bar to initiate a debugging, profiling or tracing session:

4. Usually Xdebug helper works without any configuration, but you can always change the IDE key and get help in Chrome's Settings | Extensions | Xdebug helper | Options: