How to debug Magento 2 code with Xdebug and PhpStorm (Part 2)

Introduction

In this second part of the series, I’m going to guide you how to start a debugging session, place a breakpoint and track the debugging progress. But before we begin, make sure that you have installed and set up Xdebug with PhpStorm.

If you don’t know how to do it, please visit our instructions on Part 1 here.

Working on Xdebug

You can start a debugging session with PhpStorm either by clicking on the debug button (with a bug icon), or turn on debugging connection listening and let PhpStorm catch debugging requests from the browser. I personally prefer the second way, as it is convenient and easier to manage.

On the taskbar, go to Run -> Edit Configurations to enter the configuration window for your debug:

Working on Xdebug

Click on the green plus button on the top left corner and choose PHP Web Application and fill in the necessary parameters. The Start URL is quite important, as it defines the start page when you start a new debug session with PhpStorm.

When it is done, click OK to save.

Now you can either:

  • Click on the green bug on the top right corner to get started.
  • Or you can switch on browser debugging and enable debug listening on PhpStorm, as follows:

For Chrome:

For Chrome

For Firefox:

For Firefox

In PhpStorm:

In PhpStorm

Now you will want to place a breakpoint where your code would stop. It looks like this:

Place a breakpoint

When you runs the code, it would stop at the breakpoint and a debug window shows up.

Breakpoint and a debug window

As in the photo above, there is a white line that shows where your debug is, and the code in the white-line is not executed. On the bottom, the debug window show you all of the debugging flow, variables’ values, object’s properties, etc…

While working on debug window, if you want to:

  • Execute the current code and go to the next line, press  Press 1
  • Go into the current method, press  Press 2
  • Step out, press  Press 3
  • Stop debugging, continue the code flow, press Press 4
  • Stop the code flow and then terminate the debug, press  Press 5

Congrats! You just mastered a very important tool for developers. If you have any questions or problems about Xdebug, or you are curious about our Magento development services, don’t hesitate to contact us now!

Latest Insights

eCommerce Statistics 2022 and the Trends
you need to know

Don't want to miss out on our latest insights?
Subscribe to our newsletter.

EMAIL

Disclaimer: By clicking submit, you agree to share your information with us to receive news, announcements, and resources when they are available.