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/

1. Debugging WordPress
Mario Peshev @no_fear_inc
WordPress Engineer DevWP.eu

2. Mario Peshev
• @no_fear_inc
• WordPress Ambassador at
• WordPress Engineer and
Consultant
• Open Source Addict
• Cofficer

3. 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

4. Why Debug?
Friends don’t let friends work in a messed-up
environment.
There are enough tools doing the heavy lifting.

5. Debug… Where?
• PHP
• JavaScript
• MySQL
• Servers
• Everywhere

6. PHP

7. Debugging PHP
• Good old echo() and print_r()
• var_dump() and var_export()
• error_log()
• debug_backtrace()
• Meet Krumo -
http://krumo.sourceforge.net/

8. Debugging PHP (2)

9. 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);

10. Xdebug
“Xdebug is a PHP extension which provides
debugging and profiling capabilities.”
Official Xdebug Website

11. Xdebug (2)
•Xdebug for Fedora with PHP 5.3
•Xdebug on Ubuntu for WordPress

13. Xdebug goodies
• Remote debugging
• Memory allocation, time tracking
• Profiling
• Code coverage
• Stack trace control

14. JavaScript

15. 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

16. debugger; breakpoint

17. Debugging AJAX
FirePHP could help too.

18. 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

19. DOM Element Breakpoints

20. 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');

21. Servers

22. Debugging Apache (logs)
• access_log
• error_log

23. Logging MySQL
Or:
Slow Queries log could be configured.

24. WordPress constants

25. 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 );

26. 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 );

27. 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()

28. Hooks

29. Key hooks
• init, admin_init
• wp_head, wp_footer
• wp, parse_request
• pre_get_posts
• posts_clauses, terms_clauses
• template_redirect
• shutdown

30. 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

31. Searching

32. Searching
Searching and processing content within the
command line (UNIX-like OS):
• ack
• grep
• egrep
• sed

33. Searching example
• Similar to:

34. Plugins for debugging

35. Debug Bar

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

37. Debug Objects (2)

38. Query Monitor

39. Tools

40. 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

41. WP-CLI (2)
WP-CLI shell

42. 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)

43. Practical Debugging

44. Questions?
Tweets as @no_fear_inc
Mario Peshev on LinkedIn
nofearinc on WordPress.org
GitHubering via mpeshev
DevWP.eu - blog

45. 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.configurati
on.php
• http://stackoverflow.com/questions/5039431/differe
nce-between-var-dump-var-export-print-r
• http://httpd.apache.org/docs/2.2/logs.html

46. Resources (2/3)
• http://www.creativebloq.com/javascript/javascript-
debugging-beginners-3122820
• https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/d
ebugger
• 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

47. 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