Start Debugging with XDebug and Sublime

By: Sunil Kumar |  In: PHP  |  Last Updated: 2017/09/20

Web programming is not an easy task as there are thousands of scripts are running on the server at the same time. If any fault occurs in any script and you don’t have any idea about the bug/fault It’s going to be very hard to fix the bug.

But Xdebug says -“I can help you debugging the bug in your scripts.” And that’s why it’s one of the most popular debugging tools in PHP.

Xdebug in extremely helpful for PHP programmer. It prettifies the error and adds value to your stack trace.

Do you know that you can add Xdebug to your IDE?

Yes, you can…

Here we are explaining how to integrate Xdebug with Sublime and start debugging.

1. Installing Sublime

If you already have sublime you can skip this step.

Sublime– If you are a programmer you must have an idea what Sublime is? For unaware Sublime is a text editor and IDE. If you don’t have, you can get sublime from the official website.

2. Setting up Xdebug with Sublime

Before start debugging, we have to set up Xdebug with our IDE. Setting up is not a complex stuff. You just follow below steps and you are done with it.

The best part of the Sublime text is that you can easily extend it with a lot of packages. Here we are extending Xdebug package.

2.1 Installing package control

Open your Sublime text and go to- Tool ->Package Control and click on it. An alert will be prompted. Say ok to it.

or

Install it through the Sublime Text console.

  1. Go to package control & copy the long command provided there.
  2. Open the Sublime Text 2 console by pressing Ctrl+`.
  3. Paste the command you copied into the Sublime Text console and press Enter.
  4. Restart your Sublime.

2.2 Installing package

Now go to Tool->command palette or press ctrl+shift+p and search for install package.

install-package sublime

Here you can search for any package. Type Xdebug client and click on it. It will only take few seconds.

xdebug-client

2.3 Setup project with Sublime

The last thing we have to do is set up the project with Sublime. For doing open your root directory into Sublime and then go to projects and click on ‘save project as’. Give it a name and save it.

You can save your project file anywhere But I suggest you to save it in your root directory. So it will be with your project all the time and also you can save it in your version control.

You will see a project file with .sublime-project(here my file is sunny.sublime-project)

The content of this file looks like –

{
  "folders":
      [
           {
             "path": "."
            }
      ]
}

We have to edit this file a little. You can simply replace the content with below content.

{
  "folders":
   [
      {
          "follow_symlinks": true,
          "path": "."
      }
   ],
   "settings": 
         {
        "xdebug": {
          "url": "http://localwebsite.in/",
           }
         }
}

Here http://localwebsite.in is URL of my website. You can add more setting but for starting with debugging it’s enough.

3. Start the Xdebug session

After setting up we can start debugging with Xdebug. To start Xdebug session

go to Tools->Xdebug-> Start debugging or press Ctrl+shift+F9. which will launch your web browser. You notice that at the end of your URL a parameter XDEBUG_SESSION_START= sublime.xdebug will be added. That means Xdebug session is started. You will see some extra panel opened in your Sublime where you will see the debug information after you have set up breakpoints.

4. Adding breakpoints

Breakpoints are the point where intentionally pause or stop your program.At that point, you can see the state of your programme.

For putting breakpoints Right click on the sublime and go to Xedbug. Here you will see Add/Remove breakpoints. A bullet will be added to that line. That means a breakpoint is added to your program.

when you go to the browser and continue with the session you see that when control comes to that line where we added breakpoint it will pause execution and page will stop loading and you can see all the information of variables and others on your Sublime.

After going through all the information we move on. To do so again right click on sublime and hover over Xdebug. Here you will see a lot of option as-

  • Run – Which will run the application until the next breakpoint or until the ending.
  • Run to line – which will run until the line you clicked.
  • Step into – will step into the current function and stops right after.
  • Step over – Will step over the current function and stops right after.
  • Detach – Will also stop debugging.

Conclusion

In this article, we saw how we could integrate Xdebug with Sublime and made sure we understood how to debug. Almost every IDE suitable for PHP can integrate with Xdebug.

Comments


  • I tried all steps but it is not showing any stack trace in the sublime text3. I am using ubuntu-16.04 os machine.

  • Leave a Comment

    Your email address will not be published.

    *


    Sunil Kumar


    I am the owner of acmeextension. I am a passionate writter and reader. I like writting technical stuff and simplifying complex stuff.
    Know More

    Join more than 10,000 others Web Developers