How do I debug a WordPress plugin?

I've recently inherited a WordPress plugin that has a few bugs in it. My problem is that I'm also new to WordPress and I don't know how to log debug messages so that I can figure out what's going on.

I really just need a way to create a popup or log to a console.

There's this excellent Q&A at WordPress Stack Exchange, lots of knowledgeable folks explaining their debugging techniques: How do you debug plugins?

In the Javascript arena you basically need <script>console.log('the value is' + variable);</script>. And use Google Chrome inspector and/or Firebug.

In PHP, it depends on where things are happening or where you want the output.

Debugging in WordPress

Official documentation in the Codex.

Example wp-config.php for Debugging

// Enable WP_DEBUG mode
define( 'WP_DEBUG', true );

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings 
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );

Printing information to a log file

The following uses an OSX/Unix/Linux system path, adjust for Windows.

/* Log to File
 * Description: Log into system php error log, usefull for Ajax and stuff that FirePHP doesn't catch
 */
function my_log_file( $msg, $name = '' )
{
    // Print the name of the calling function if $name is left empty
    $trace=debug_backtrace();
    $name = ( '' == $name ) ? $trace[1]['function'] : $name;

    $error_dir = '/Applications/MAMP/logs/php_error.log';
    $msg = print_r( $msg, true );
    $log = $name . "  |  " . $msg . "\n";
    error_log( $log, 3, $error_dir );
}

Then, in you code call the function my_log_file( $post, 'The post contents are:' );

Print directly in the rendered Html

/* Echo variable
 * Description: Uses <pre> and print_r to display a variable in formated fashion
 */
function echo_log( $what )
{
    echo '<pre>'.print_r( $what, true ).'</pre>';
}

And wherever needed use it like: echo_log( $post );.

FirePHP

This extension will log information directly in the browser console. Refer to the following Q&A at WordPress Answers: How to use WP-FirePHP extension?.

1. Don't develop without debugging!
2. Read this please: http://wp.smashingmagazine.com/2011/03/08/ten-things-every-wordpress-plugin-developer-should-know/

Good luck and you may keep us updated.