# Enabling XDebug

## Debugging preparations

### The browser

You need to install [XDebug Helper by JetBrains extension](https://github.com/JetBrains/xdebug-extension) for [Chrome](https://chromewebstore.google.com/detail/xdebug-helper-by-jetbrain/aoelhdemabeimdhedkidlnbkfhnhgnhm) to activate the Debugging session in PHPStorm. Instructions are the same for [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/xdebug-helper-by-jetbrains/).

<figure><img src="/files/by5KRF7swabH5MrQjGZ3" alt=""><figcaption><p>Install extension</p></figcaption></figure>

After installation, open extension **options** and select **Debug Trigger** value as **PHPStorm**.

<figure><img src="/files/bwPEBXtaUO2ToSo2EbAh" alt=""><figcaption><p>Set Debug Trigger value to PHPSTORM</p></figcaption></figure>

{% hint style="info" %}
This extension sets a cookie in your browser's requests: `XDEBUG_SESSION=PHPSTORM`. This cookie enables debugging in your browser.

Sometimes, you may want to enable debugging outside of the browser (for example, to debug individual GraphQL requests). You can also set `XDEBUG_SESSION=PHPSTORM` manually in the `Cookie` header. Most HTTP and GraphQL clients support this option.
{% endhint %}

Now, when you open your CMA webpage, you need to enable a debug session by pressing **Debug** in the extensions menu.

<figure><img src="/files/fasSaveK03sbTMaDswPD" alt=""><figcaption></figcaption></figure>

### The editor

{% tabs %}
{% tab title="PHPStorm" %}
[Go to settings and activate Docker connection](https://www.jetbrains.com/help/phpstorm/docker.html#install_docker). This needs to be done **once**.
{% endtab %}

{% tab title="VSCode" %}
Install [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) extension.
{% endtab %}
{% endtabs %}

## Debugging

### First step: Run Create Magento App

Use [start](/getting-started/available-commands/start.md) command.

```bash
yarn start # for Yarn
npm run start  # for NPM
```

Wait for the command to finish.

### Second step: Start the debugger

{% tabs %}
{% tab title="PHPStorm" %}
Choose the **create-magento-app** debug configuration in the top right corner of PHPStorm's window.

![](/files/-MP9paYlLVvTnpiCg1TC)

Click on **Start debugging** or press **Shift+F9**, put test breakpoint in **$project\_root/pub/index.php** file, reload the page and that is all!

Happy debugging!
{% endtab %}

{% tab title="VSCode" %}
Open debugging tab in VSCode (**Ctrl + Shift + D)** and select **Listen for Xdebug** configuration.

![](/files/-MlKyJn6mBiUVuAdbliM)

Click on **Start debugging** (or press **F5)**, put the test breakpoint in **$project\_root/pub/index.php** file, reload the page and that is all!

Happy debugging!
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.create-magento-app.com/usage-guide/enabling-xdebug.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.