In order to start debugging, you first need to activate the debugger engine on the server. To do this, you need to set a special GET/POST or COOKIE parameter (see the Xdebug and Zend Debugger official documentation for details). While you can do it manually, it is more convenient to use a browser extension, which lets you enable the debugger with a single click.
To use Xdebug Helper with Chrome: Install the Xdebug Helper extension from the Chrome store. Enable the extension in Chrome as shown in the following figure. In Chrome, click in the Chrome toolbar. From the Xdebug helper menu, click Options. From the IDE Key list, select PhpStorm. PHPSTORM + XDEBUG (2/3) + WSL2 + DOCKER. Small example project to show how to configure xdebug (2 or 3) with WSL2 and Docker. This solution works only if you use PhpStorm on WSL2 with X server! On the Live Edit page that opens, select the Update application in Chrome on changes in checkbox. 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. This is an extension for Google Chrome to open resources from the Dev Tools (like CSS, SCSS, JS files) directly inside your JetBrains IntelliJ IDE (IntelliJ IDEA, WebStorm, PHPStorm etc.).
The following table lists the available debugging extensions.
Phpstorm Chromebook Download
| Chrome | Firefox | Internet Explorer | Safari | Opera |
|---|---|---|---|---|
| Xdebug | Xdebug Helper or Xdebug-ext | |||
| Zend Debugger | zDebug or Zend Debugger Toolbar | Z-Ray for Zend Server version 7 or later. PhpStorm bookmarklets generator otherwise. | ||
Install the Xdebug helper extension for Chrome from the Chrome Web Store.
In PhpStorm, enable listening to incoming debug connections by either clicking on the toolbar or selecting Run | Start Listening for PHP Debug Connections
Initiate connection from the browser side. Click the Xdebug Helper icon on the browser toolbar to initiate a debugging, profiling or tracing session:
As a rule, no further configuration is required. If necessary, you can explore additional settings by right-clicking the Xdebug Helper icon and choosing Options from the context menu.
Phpstorm Chromebook Free
Install Zend Debugger Toolbar.
In PhpStorm, enable listening to incoming debug connections by either clicking on the toolbar or selecting Run | Start Listening for PHP Debug Connections
In the browser, click the Zend Debugger icon on the toolbar and select Settings. Make sure that Autodetect is selected, and the Broadcasting port value matches the value set for Settings broadcasting port on the Debug page in PhpStorm.
Initiate connection from the browser side. Click the Zend Debugger icon on the browser toolbar to initiate a debugging or profiling session: