Debugging WordPress

Mario Peshev @no_fear_inc

WordPress Engineer DevWP.eu

Mario Peshev

• @no_fear_inc

• WordPress Ambassador at

• WordPress Engineer and

Consultant

• Open Source Addict

• Cofficer

What is Debugging? According to Wikipedia:

“Debugging is a methodical process of finding and reducing the number of bugs, or defects, in a computer program or a piece of electronic hardware, thus making it behave as expected.”

http://en.wikipedia.org/wiki/Debugging

Why Debug? Friends don’t let friends work in a messed-up environment.

There are enough tools doing the heavy lifting.

Debug… Where?

• PHP

• JavaScript

• MySQL

• Servers

• Everywhere

PHP

Debugging PHP

• Good old echo() and print_r()

• var_dump() and var_export()

• error_log()

• debug_backtrace()

• Meet Krumo -

http://krumo.sourceforge.net/

Debugging PHP (2)

PHP logging

Set some error reporting rules:

ini_set('log_errors',TRUE); ini_set('error_reporting', E_ALL); ini_set('error_log', '/tmp/wp_error_log.txt'); Get frontend feedback on local sites:

ini_set('display_errors', TRUE);

Xdebug “Xdebug is a PHP extension which provides

debugging and profiling capabilities.”

Official Xdebug Website

Xdebug (2)

•Xdebug for Fedora with PHP 5.3

•Xdebug on Ubuntu for WordPress

Xdebug goodies

• Remote debugging

• Memory allocation, time tracking

• Profiling

• Code coverage

• Stack trace control

JavaScript

Debugging JavaScript

• alert()

• the console object ( console.log() )

• check if console is

available: window.console &&

console.log(...)

• console.table()

• Chrome DevTools is our best friend

debugger; breakpoint

Debugging AJAX

FirePHP could help too.

Debugging AJAX (2)

WordPress has built-in AJAX helpers

• Such as wp_send_json

• The wp JS object

Use these hooks for your AJAX callbacks:

wp_ajax_{$someaction} wp_ajax_nopriv_{$someaction} Mind your JavaScript

DOM Element Breakpoints

Inject an Existing Method var oldCssFn = jQuery.prototype.css; jQuery.prototype.css = function(prop, newValue) { var oldValue = oldCssFn.call(this, prop); if( oldValue !== newValue) { console.log(oldValue); console.log(newValue); oldCssFn.call(this, prop, newValue); } } Example:

jQuery('.pagehead').css('background-color', 'red');

Servers

Debugging Apache (logs) • access_log

• error_log

Logging MySQL

Or:

Slow Queries log could be configured.

WordPress constants

WP_DEBUG

Global switch for debugging capabilities

define( 'WP_DEBUG', true ); Store log messages in debug.log file in wp-content/

define( 'WP_DEBUG_LOG', true ); Display log messages on the site

define( 'WP_DEBUG_DISPLAY', true );

SCRIPT_DEBUG

“SCRIPT_DEBUG is a related constant that will force WordPress to use the “dev” versions of core CSS and Javascript files rather than the minified versions that are normally loaded. This is useful when you are testing modifications to any built-in .js or .css files. Default is false.”

define( 'SCRIPT_DEBUG', true );

SAVEQUERIES

“The SAVEQUERIES definition saves the database queries to an array and that array can be displayed to help analyze those queries. The information saves each query, what function called it, and how long that query took to execute.”

define( 'SAVEQUERIES', true );

You can list $wpdb errors from a global array:

global $EZSQL_ERROR; // array with errors Also $wpdb->show_errors()

Hooks

Key hooks

• init, admin_init

• wp_head, wp_footer

• wp, parse_request

• pre_get_posts

• posts_clauses, terms_clauses

• template_redirect

• shutdown

The ‘all’ hook

add_action( 'all', 'hacky_all_hooks' );

function hacky_all_hooks() {

var_dump( current_filter() );

}

Outputs all hooks

You can disable hooks or add functions with configurable priority

Searching

Searching

Searching and processing content within the

command line (UNIX-like OS):

• ack

• grep

• egrep

• sed

Searching example

• Similar to:

Plugins for debugging

Debug Bar

Debug Objects “The Plugin Debug Objects provides a large number of information: query, cache, cron, constants, hooks, functions and many more.”

Debug Objects (2)

Query Monitor

Tools

WP-CLI

As per the WP-CLI website:

“WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser.”

Testing, debugging and automation are much easier

WP-CLI (2) WP-CLI shell

Host resolution

Mapping domain names to local websites Add a VirtualHost with Apache Map the hostname at the hosts file accordingly

127.0.0.1 wp2.me

Once ready, deploy to server

http://en.wikipedia.org/wiki/Hosts_(file)

Practical Debugging

Questions?

Tweets as @no_fear_inc

Mario Peshev on LinkedIn

nofearinc on WordPress.org

GitHubering via mpeshev

DevWP.eu - blog

Resources (1/3)

• http://dev.mysql.com/doc/refman/5.1/en/slow-query-log.html

• http://rtcamp.com/wordpress-nginx/tutorials/mysql/slow-query-log/

• http://wp-cli.org/blog/wp-shell.html

• http://www.php.net/manual/en/errorfunc.configuration.php

• http://stackoverflow.com/questions/5039431/difference-between-var-dump-var-export-print-r

• http://httpd.apache.org/docs/2.2/logs.html

Resources (2/3)

• http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

• http://getfirebug.com/javascript

• http://blog.brackets.io/2013/08/28/theseus-javascript-debugger-for-chrome-and-nodejs/

• http://jsconsole.com/

• http://alistapart.com/article/advanced-debugging-with-javascript

Resources (3/3)

• http://craig.is/writing/chrome-logger

• http://www.wptavern.com/busted-a-

wordpress-plugin-to-force-cache-busting

• http://techblog.badoo.com/blog/2013/11/18

/5-advanced-javascript-and-web-

debugging-techniques-you-should-know-

about/

• https://twitter.com/ChromiumDev