Swipe to start

Follow along: http://codedebugg.in

Who are you?

Rami Abraham;

  • (WebDevStudios Developer Lead, @ramiabraham)

Justin Sternberg;

  • (WebDevStudios Developer Lead, @jtsternberg)

debugging: why do we care?

debugging: wat?

Coding *is* debugging

All languages typically offer debugging.

outputting variables

PHP

echo
echo $somevar;
print_r
echo '<xmp>$somevar: '. print_r( $somevar, true ) .'</xmp>';
var_dump
echo '<div><strong>$somevar:</strong><hr>', var_dump( $somevar ), '</div>';

JS

console.log
var the_thing = 23;

if ( the_thing != 25 ) {
    console.log( 'The thing is actually ' + bar );
}

backtracing

PHP

debug_backtrace
echo '<xmp>backtrace: ',
print_r( debug_backtrace( /*DEBUG_BACKTRACE_IGNORE_ARGS*/ ) ),
'</xmp>';
get_defined_vars
echo '<xmp>defined: '. print_r( get_defined_vars(), true ) .'</xmp>';

JS

console.trace
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
foo();
err.stack
var err = new Error();
console.log( err.stack );

memory and time

(logging)

PHP

memory_get_usage // or swap with microtime to get timing results
$memory_before = memory_get_usage();
do_the_thing();
echo '<xmp>'. print_r( memory_get_usage() - $memory_before . ' bytes', true ) .'</xmp>';

JS

function some_thing() {
  performance.now();
  console.profileStart();
  do_thing();
  console.profileEnd();
  console.log( performance.now() );
}

pausing execution

PHP

die/wp_die
// or `die` works in a non-wordpress context
wp_die( '<xmp>$somevar: '. print_r( $somevar, true ) .'</xmp>' );
wp_send_json_error // in an ajax context
wp_send_json_error( $somevar );

JS

setTimeout // meh
console.log( 'before pause' );
setTimeout( function() { console.log( 'after pause' ); }, 10000);
debugger // better, but best is using dev tools breakpoints.
console.log('will output');
debugger;
console.log('will not');

logs and console usage

PHP

wp-config.php
define( 'WP_DEBUG', true );
// define( 'WP_DEBUG_DISPLAY', false );
define( 'WP_DEBUG_LOG', true );
error_log
error_log( '$somevar: '. print_r( $somevar, true ) );
$ tail -f  # on the command line
tail -f PATH/TO/wp-content/debug.log

JS

log // history to an object
function log() {
    log.history = log.history || [];
    log.history.push( arguments );
    if ( window.console && the_thing.debug ) {
        window.console.log( Array.prototype.slice.call(arguments) );
    }
};

plugins/libraries

PHP

Xdebug // better debug output, breakpoints, IDE integration, etc
Codebug // a not-IDE standalone application to debug your PHP code
Query Monitor // a debugging/monitoring plugin for WordPress
Debug Bar // Adds debug menu to WordPress admin bar
Debug Bar Addons

JS

Stats.js by Mr.Doob // JavaScript Performance Monitor
Performance API (MDN)
Memory Leak Checker

Resources

  • WordPress Debugging Snippets
  • Debugging JavaScript
  • Console API Reference
  • Secrets of the Browser Developer Tools
  • JavaScript Memory Profiling
  • JS Memory Leak Checker
  • PerformanceTiming web interface (MDN)
  • Stats.js by Mr.Doob
  • Chrome dev tools, official Tips and Tricks
  • Chrome DeveloperTools Working Group repos
  • Query Monitor
  • Visual Event Chrome Extension

Get am all

Get all these snippets

(Questions and comments)

Question

Repository

Start

  • Industrial Strength Debugging
  • Who are you?
  • debugging: why do we care?
  • BSoD
  • debugging: wat?
  • Coding *is* debugging
  • All languages typically offer debugging.
  • outputting variables
  • outputting variables : snippets
  • backtracing
  • backtracking : snippets
  • memory and time
  • memory/time-logging : snippets
  • pausing execution
  • pausing execution : snippets
  • log files and console usage
  • log files and console usage : snippets
  • plugins/libraries
  • plugins/libraries : examples
  • Resources
  • Snippets library
  • Questions and comments
Share Tweet
Industrial Strength Debugging