DataMates Studio

Digital Pipeline Development Services

Step 6 – Start PHP Remote Debug Session in JetBrains IDE

Start PHP Remote Debug Session in JetBrains IDE on Your Personal Computer.

Prerequisite

You are working through Step Debugging PHP on Your Personal Computer.

✅ Installed Chrome web browser.
✅ Installed Xdebug Chrome Extension in your Chrome web browser.
✅ Installed WPEngine LocalWP 9.x (Lightning) application.
✅ Installed JetBrains IntelliJ IDEA 2022.x with PHP plugin; or PHP Storm is working.

✅ Ensured LocalWP has a ‘Local Site’. Use [Add a Local Site] button or Import/Export.
✅ Ensured LocalWP -> ‘Local Sites’ -> ‘{LocalWebsite}’ has ‘Xdebug’ option turned ‘On’.
✅ Ensured LocalWP -> ‘Local Sites’ -> ‘{LocalWebsite}’ is alive. Use [Start Site] button.
✅ Ensured Chrome web browser can show the ‘{LocalWebsite}’. Use [Open Site] button.

✅ Ensured Test Incoming PHP Debug Connection to JetBrains IntelliJ is working.

Start a PHP Remote Debug Session in IntelliJ for Local Website

Objective: To step debug through a local website page from a web browser, with a JetBrains IntelliJ project and a PHP Remote Debug session, on your personal computer.

Prerequisite: Done LocalWP applicaton configuration for local website.
Prerequisite: Install Xdebug Chrome Extension.
Prerequisite: Configure a PHP Remote Debug Configuration in IntelliJ for Local Website.

Hint: The PHP Remote Debug Configuration can be used offline, not connected to the internet; because your personal computer is the server and the client, for the local website that is managed by the LocalWP application.

Hint: Written for WPEngine LocalWP 9.x (Lightning).

Hint: Written for JetBrains IntelliJ IDEA 2022.x (Ultimate Edition).

  1. Start LocalWP application.
    • Navigate to ‘Local Sites’ -> ‘{LocalWebsite}’.
    • Click ‘Start Site’ button.
      • Hint: The local website server services will be started.
    • Click ‘Open Site’ button.
      • Hint: The system default webbrowser should load and show the home page, running as a local website, from your personal computer.
  2. In the Web Browser application.
    • Navigate to the web page you want to debug.
      • Hint: Login to the local website, if required.
      • Hint: We now know the local website is working and ready for a PHP Remote Debug session.
  3. Start JetBrains IntelliJ application.
    • Open the Project for {LocalWebsite}.
    • Navigate to ‘Run’ menu -> ‘Debug’ menu; to show a list of Configurations.
      • Hint: Shows a list of IntelliJ Configurations you created back here.
      • Hint: The Configuration has unticked its ‘Show this Page’ option; so, the ‘Debug Configuration’ window, with all its details, will not show.
      • Hint: The Configuration has ticked its ‘Activate Tool Window’ option; so, the ‘Tool’ window will appear as the next step.
    • Click ‘{LocalWebsite}’ option in the ‘Debug’ popup window.
      • If the ‘Tool’ window does not appear; navigate to ‘View’ menu -> ‘Tool Windows’ -> ‘Debug’.
      • Hint: The ‘Tool’ window will appear.
    • Click ‘Debugger’ tab in the ‘Debug Tool’ window.
      • Hint: We should see a message like “Waiting for incoming connection with IDE key ‘PHPSTORM’”.
      • Hint: The value of that ‘IDE Key’, like ‘PHPSTORM’, is what the Xdebug Chrome Extension needs to be using, to align with this active JetBrains IntelliJ PHP Remote Debug session.
      • Hint: That IDE Key is in IntelliJ Configuration you created back here.
  4. In the Web Browser application.
    • Navigate to the web page you want to debug.
      • Hint: Login to the local website, again, if required.
    • Click [Debug] button in the toolbar.
      • Beginner Scenario: This slightly optimised debug user experience only works if you ticked the ‘Disable Popup’ option when you Install Xdebug Chrome Extension.
      • Advanced Scenario: After clicking the [Debug] button in the toolbar, click the ‘Debug’ popup menu item.
    • Click [Reload Page] button in the toolbar.
      • Hint: The page will begin to load … but, it will also appear to be stuck and taking forever to load.
      • Hint: This forever-load is great news. It means that the debug session has connected with the JetBrains IntelliJ coding IDE and started a remote debugging session.
  5. In the JetBrains IntelliJ application.
    • The ‘Tool’ window and its ‘Debugger’ tab will now identify the first source code file that it has landed upon; stopping runtime execution, ready for you to begin your step-debugging adventure.
      • Hint: If the ‘Tool’ window is not showing; navigate to ‘View’ menu -> ‘Tool Windows’ -> ‘Debug’.
      • Hint: This is where you can manually look at the declared data containers (like constants, variables, classes, etc) and their values.
    • The main ‘File’ window will now be showing the source code line of the first source code file it has landed upon; stopping runtime execution, ready for you to begin your step-debugging adventure.
      • Hint: This is where you can see the source code and review the runtime execution state, as slowly as you need too.
      • You can execute the source code, line-by-line with two main choices, using Step Into [F7] and Step Over [F8].
  6. Congratulations: This is where your step-debugging adventure truly begins.
    You have successfully configured and started a PHP Remore Debug Session on Your Personal Computer.
    • It is up to you to explore, learn and grow your step-debugging experience.

Stop a PHP Remote Debug Session in IntelliJ

Prerequisite: Start a PHP Remote Debug Session in IntelliJ for Local Website.

Hint: Written for JetBrains IntelliJ IDEA 2022.x (Ultimate Edition).

  1. Switch to JetBrains IntelliJ application.
  2. Switch to the Project for {LocalWebsite}, where you started the PHP Remote Debug session.
  3. Navigate to ‘Run’ menu -> ‘Stop {LocalWebsite}’.
    • Hint: This frees up resources on your personal computer.
  4. Done.
[Overview] Step Debugging PHP on Your Personal Computer