Xdebug, PhpStorm and MAMP – OSX – Setup Guide

Very excited to present my own Setup Guide to get Xdebug, PhpStorm and MAMP to play nice together. Our goal here is to get remote debugging setup to be able to debug any line within a much bigger web app. In our case I am interested to debug WordPress Themes and Plugins without having to declare what file to start from.

YouTube Video Xdebug, PhpStorm and MAMP – OSX – Setup Guide

As seen on: schurpf.com | Link to YouTube | Subscribe to my channel

Two different types of Xdebug modes

  • Direct (via command line)
  • Remote (via browser)

I am no expert on this topic, so apologize my language. If anybody knows the proper terminology, please leave them in the comments and I am more than happy to change this. Essentially you can find two types of debugging. Direct one and remote. The first one essentially is essentially like running php from your command line using Xdebug. So you need to know exactly where to start and all files you want to debug need to be somehow connected (told you I am no expert on this…). The second method is the remote debugging where anywhere in you code you set a break point and essentially trigger the debugging remotely, in our case a browser. This is what we want :)

Here is how those two options look like in PhpStorm:

Xdebug PhpStorm Direct vs Remote

Xdebug PhpStorm Direct vs Remote

There are plenty of steps to do in order to get this to work. Here is the step by step list.

Note I will be doing most work from the terminal. You should be able to copy paste all commands.

Here is my setup for this Setup Guide

  • MAMP 2.2
  • PhpStorm 8.0.1
  • OSX 10.7

Xdebug Phpstrom Mamp Install Guide

1. Find Your PHP version in MAMP

Find your PHP version in MAMP

Find your PHP version in MAMP

2. Set your PHP version globally (optional)

Either create or open your .bash_profile file in ~/.bash_profile

Type: open ~/.bash_profile or if your .bash_proile doesn’t exist touch ~/.bash_profile; open ~/.bash_profile

enter the following at the bottom of your .bash_profile:

export MAMP_PHP=/Applications/MAMP/bin/php/php5.5.3/bin

Restart your terminal.

Check your php version with:

which php


php -v

Check your PHP version in terminal

Check your PHP version in terminal

source: http://stackoverflow.com/questions/4145667/how-to-override-the-path-of-php-to-use-the-mamp-path/10653443#10653443

3. Find your PHP ini file

Your php ini file will be in:


If you setup you MAMP PHP globally you can also do:

php --ini


php -r 'phpinfo();' | grep 'php.ini'

and find your php.ini path. Couldn’t help myself but geek out. Sorry…

Find your PHP ini file

Find your PHP ini file

4. Add the remote session parameters to php.ini

Open your php.ini file.

open /Applications/MAMP/bin/php/php5.5.3/conf/php.ini

Find the section Xdebug and uncomment (aka remove the semicolon) the zend_extension and add the following two options until your section looks like this:


Your Xdebug section should be at bottom of your php.ini file.

Make sure you restart your MAMP server after editing your php.ini file, otherwise your settings wont apply.

5. Install browser extension

The title says it all:


6. Set PhpStorm IDE key

In your Xdebug Helper browser extension go to Options via chrome://extensions/. The Xdebug Helper should be at the bottom. Set the IDE key to PhpStorm.

Xdebug Helper Options

Xdebug Helper Options
Xdebug Helper IDE key

Xdebug Helper IDE key

7. Start PhpStorm and setup project with localhost

Setup the project with PhpStorm. Make sure you set the correct project root and setup the localhost with the correct port.

PhpStorm Project form existing files

PhpStorm Project form existing files

In our case we will open project wp-test.

PhpStorm setup Project

PhpStorm setup Project
PhpStorm add new local server

PhpStorm add new local server
PhpStorm setup local host

PhpStorm setup local host
PhpStorm specify web path

PhpStorm specify web path

8. Turn on Listening for Debug Connections

Turn on via: Go to Run -> Start Listening For PHP Debug Connections

PhpStorm Listen Debug Connections

PhpStorm Listen Debug Connections

9. Start debugging in browser

Xdebug Helper start debug

Xdebug Helper start debug

Switch the little to Debug.

10. Set breaking points

Finally… In PhpStorm just click into the line on the left.

PhpStorm set break points

PhpStorm set break points

11. Refresh browser

12. Accept remote connection in PhpStrom

PhpStorm should recognize at this point the remote connection and ask you what you want to debug. Set your choice on your project root folder.

PhpStorm remote connection Xdebug

PhpStorm remote connection Xdebug

13. Fix mapping

PhpStorm set mapping

PhpStorm set mapping
PhpStorm fix mapping

PhpStorm fix mapping
PhpStorm run debugger

PhpStorm run debugger

Check the debugger for the mapping error and untick the mapping. You can now run the debugger and it will stop at your breaking point.

Phew we are all set. If all is working for you, you should now be ready to use Xdebug, PhpStorm and MAMP. If you have any questions I will do my best to help. Please consider though that I have very little experience in this.

Beginner Tutorials – Great start to learn new techniques/technologies for the web

I often had the problem that I wanted to learn something new, but where should I possibly start? What are great beginner tutorials? I put together a list of great starting points to learn all sorts of things. Have fun :)

Do you know a great tutorial that helped you? Pls share it in the comments.





PSD 2 HTML: http://net.tutsplus.com/articles/news/converting-a-design-from-psd-to-html/

WordPress Theme Development psd2wp: http://css-tricks.com/video-screencasts/25-designing-for-wordpress-part-one/

WordPress Plugins: http://net.tutsplus.com/articles/news/a-crash-course-in-wordpress-plugin-development/

Genesis: http://designsbynickthegeek.com/tag/genesis-explained

Child Themes: http://codex.wordpress.org/Child_Themes


SASS: http://www.youtube.com/playlist?list=PL2CB1F80266E986EA&desktop_uri=%2Fplaylist%3Flist%3DPL2CB1F80266E986EA

Bootstrap: http://getbootstrap.com/css/

JQuery: http://www.youtube.com/playlist?list=PL3877C5434C042349

GIT: http://www.youtube.com/watch?v=mYjZtU1-u9Y&list=PLz727jpcduhh3kWc2icOirSABZXPeOqzP


Internet Marketing: http://www.internetbusinessmastery.com/podcast/

Facebook Marketing: http://amyporterfield.com/1

Podcasting: http://howtopodcasttutorial.com/podcast-tutorial-four-basic-steps


Do you know a great tutorial that helped you? Pls share it in the comments.

Happy learning :)

Rss feed to twitter – How to auto post your blog to twitter

A simple way of posting your rss feed to twitter

I publish and promote most of my blogs and new content along all social media. For the most part I end up doing a lot of repetitive work – I am allergic to that.

This is why I will show you how I publish my rss feed to twitter. I use http://twitterfeed.com. The setup is within seconds and so far it is working flawless.

Advice on settings

Make sure you edit the advanced settings and select an update frequency that doesnt make your twitter feed make look automated.

In general I use post content – title only and no post prefix. I hash tag my tweets in the post suffix. Wait, you dont know what my standard hash tag is? Probably a good opportunity to follow my twitter account. [twitter_follow username=”schurpf” language=”en”]

A word of warning

Auto posting can be decreasing your followers twitter experience. Make sure your feed doesnt look like you are trying to spam your followers by overdoing the self promotion. You can find more reasons why auto posting might not be a good idea in a post by Jeremy Lindh.

Auto posting rss feed of quality bloggers

I got a pretty good idea from Katie Freiling from her youtube video: Twitter Automation: How To “Auto-Tweet” Blog Posts . Her idea is to publish rss feeds of trusted high quality bloggers to your twitter account. This will serve several purposes:

  1. Your audience gets more quality content
  2. You can promote and bond with a high quality blogger
  3. And all this without extra work

Just be careful whose rss feed you chose to auto post.