debugging wordpress
DESCRIPTION
My popular talk on Debugging WordPress, presented at WordCamp London, WordCamp Norrkoping, Software University and WPBGUG Video: http://wordpress.tv/2014/05/23/mario-peshev-debugging-wordpress/TRANSCRIPT
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 (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