Create Magento App
Create ScandiPWA AppScandiPWA DocsGitHub
v2
v2
  • Create Magento App
  • Getting started
    • Getting Started
    • Prerequisites
      • Linux requirements
      • MacOS requirements
        • Apple Silicon
      • Windows requirements
    • Available commands
      • Start the application
      • Stop the application
      • Check application status
      • Enter application CLI
      • Explore application logs
      • Execute commands in Docker containers
      • Link a theme
      • Import database dump
      • ⚠️ Uninstall a project
    • Folder structure
    • Updating to New Releases
      • Testing Alpha Releases
    • Configuration File
      • System Configuration File
    • Supported Magento versions
    • How does it work?
    • Limitations
    • What Is New in Version 2
  • Usage guide
    • Using console commands
    • Accessing Docker containers
    • Linking a Scandi Theme
    • Enabling XDebug
    • Enabling SSL
    • Configuring PHP
    • Configuring Multi-Store
    • Configuring NewRelic
    • Access on the local network
    • Using custom domain
    • Using Enterprise Edition
    • Using OpenSearch
    • Importing database
      • Importing remote database
    • Converting legacy Docker setup to CMA
    • Improve Performance
  • Container images
    • PHP Images
      • PHP 8.3
        • PHP 8.3 with Magento 2.4 extensions
        • PHP 8.3 with XDebug
          • PHP 8.3 with XDebug with Magento 2.4 extensions
      • PHP 8.2
        • PHP 8.2 with Magento 2.4 extensions
        • PHP 8.2 with XDebug
          • PHP 8.2 with XDebug with Magento 2.4 extensions
      • PHP 8.1
        • PHP 8.1 with Magento 2.4 extensions
        • PHP 8.1 with XDebug
          • PHP 8.1 with XDebug with Magento 2.4 extensions
      • PHP 7.4
        • PHP 7.4 with Magento 2.4 extensions
        • PHP 7.4 with XDebug
          • PHP 7.4 with XDebug with Magento 2.4 extensions
      • PHP 7.3
        • PHP 7.3 with Magento 2.4 extensions
        • PHP 7.3 with Magento 2.3 extensions
        • PHP 7.3 with XDebug
          • PHP 7.3 with XDebug with Magento 2.4 extensions
          • PHP 7.3 with XDebug with Magento 2.3 extensions
      • PHP 7.2
        • PHP 7.2 with Magento 2.3 extensions
        • PHP 7.2 with XDebug
          • PHP 7.2 with XDebug with Magento 2.3 extensions
    • ElasticSearch Images
      • ElasticSearch 6.8
  • Scripts Extensions
    • PHP Extensions
      • PHP Extensions Package
      • (deprecated) ionCube Extension
  • Troubleshooting
    • Common Issues
    • CMA Debugging
    • Uninstall CMA
Powered by GitBook
On this page
  • Enabling XDebug in PHPStorm
  • 1. Run Create Magento App in debug mode.
  • 2. Setup PHPStorm
  • 3. Prepare browser
  • 4. Start debugging
  • Enabling XDebug in VSCode
  • 1. Run Create Magento App in debug mode.
  • 2. Setup VSCode
  • 3. Prepare browser
  • 4. Start debugging

Was this helpful?

  1. Usage guide

Enabling XDebug

PreviousLinking a Scandi ThemeNextEnabling SSL

Last updated 12 months ago

Was this helpful?

Enabling XDebug in PHPStorm

1. Run Create Magento App in debug mode.

Use command with option to enable .

Do not run the following command with the ! CMA need to make adjustments to setup in debug mode!

yarn start --debug # for Yarn
npm run start -- --debug # for NPM

2. Setup PHPStorm

The setup is automated!

Set PHP CLI Interpreter

Go to Settings > Languages & Frameworks > PHP Here you need select correct CLI Interpreter for CMA project. CMA is currently using latest PHP 7.4 version so the path to PHP executable should look like this: $HOME/.phpbrew/php/php-7.4.13/bin/php It should look like this:

Set XDebug port and other debugging configuration

Go to Settings > PHP > Debug (in old PHPStorm: Settings > Languages & Frameworks > PHP > Debug) Make sure you have set debug port for XDebug to 9003,9111 (9003 is the default for XDebug 3 and port 9111 is used as a default for XDebug 2) and Ignore external connections through the unregistered server configuration is checked.

Set Debug server configuration

Go to Settings > Languages & Frameworks > PHP > Server There you need to set up a debugging server for Create Magento App. Click +, use http://localhost as Host value, put your Create Magento App running port as Port value, select XDebug as Debugger value.

Click Apply and close the window.

Set project debug configuration

Go to Run > Edit Configurations Click + and create new PHP Remote Debug configuration. Check Filter debug connection by IDE key, select your create-magento-app debug server as a Server value, use PHPSTORM as an IDE Key value.

Click Apply and close the window.

3. Prepare browser

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

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.

4. Start debugging

Choose create-magento-app debug configuration in the top right corner of PHPStorm's window.

And after that pretty much everything is ready for PHP debugging. 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!

Enabling XDebug in VSCode

1. Run Create Magento App in debug mode.

yarn start --debug # for Yarn
npm run start -- --debug # for NPM

2. Setup VSCode

The setup is automated!

Then, create a file launch.json in .vscode folder at the root of your project if it does not exist. Inside that file add the following configuration:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "runtimeExecutable": "$HOME/.phpbrew/php/php-<php-version>/bin/php"
        }
    ]
}

If you are using XDebug, set port 9111 in the configuration instead of 9003.

Port 9003 is the default for XDebug 3 and port 9111 is for XDebug 2.

3. Prepare browser

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

VSCode debugger does not care what IDE key you select in xdebug helper settings. It automatically attaches when it sees a cookie with a name XDEBUG_SESSION.

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.

4. Start debugging

Open debugging tab in VSCode (Ctrl + Shift + D) and select Listen for Xdebug configuration.

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!

To find what your Port value is, use command.

You need to install extension for Chrome to activate Debugging session in PHPStorm. After installation open extension options and select IDE Key value as PHPStorm.

Use command with option to enable .

Do not run the following command with the ! CMA need to make adjustments to setup in debug mode!

Install extension.

Make sure to replace <php-version> variable with the PHP version that is used in your project. To get PHP version open and execute php --version command.

You need to install the extension for Chrome to activate Debugging session in PHPStorm.

status
XDebug Helper
PHP Debug
CLI
XDebug Helper
start
XDebug
start
XDebug
debug
-s option
debug
-s option
CLI Interpreters PHP configuration