Let’s Debug For Real!

Part 2 in the “Braver, Faster, Better” series
that I just made up

Joe Chellman
@shooflydesign

Slides are available:
shooflydesign.org/files/wcoc-2015
github.com/chellman/wcoc-lets-debug

Who Am I?

Who Are You?

Any or all of the following:

  • Theme author
  • Plugin developer
  • Just curious how WordPress works

What is a debugger and why do I need one?

(PHP and JavaScript)
(for today, mostly PHP)

Why: to achieve zen-like calm

A debugger is software that lets you closely inspect what's happening in other software in real-time.

It helps you find bugs and get rid of them.

Without a debugger

  • WP_DEBUG
  • error_reporting(E_ALL);
  • print_r($myVar); var_dump($myVar);
  • console.log(myObj); console.dir(myObj);

With a debugger

  • All of the above plus:
  • Pause (and continue) execution at any point
  • Step through code by lines or chunks
  • See all currently defined variables
  • Inspect the value of any variable (over time)
  • Overall: much less guessing

Jargon

  • IDE
  • Breakpoint
  • Step [Into/Out/Over]
  • Watch
  • Call Stack

Software Prereqs

PHP

Browser Extensions (optional)

Make the IDE ⟷ XDebug connection easier

IDEs

A good IDE is very, very good

Why an IDE is nice

  • Fabulous code completion
  • Mistake avoidance (warnings, inspections)
  • Full project navigation (go to X)
  • PHP and JavaScript debugging together
  • Help when refactoring

Not-IDEs

JavaScript

DEMO!

My Setup Today

IDE: PhpStorm 9 EAP

Stack: MAMP Pro

Browser: Chrome
(and the Developer Tools)

Or: DesktopServer

DS-Debug-Trace

Or: manual (php.ini)

xdebug.remote_enable=1
xdebug.remote_host=localhost
xdebug.remote_port=9000        
xdebug.remote_autostart=1
xdebug.idekey="PHPSTORM"
                        

Next Steps

  • Version control
  • Really remote debugging
  • Testing frameworks

Questions, Comments, Answers, or Problems?

Thank you!