Debugging WordPress

1,146 views

Published on

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/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,146
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Debugging WordPress

  1. 1. Debugging WordPress Mario Peshev @no_fear_inc WordPress Engineer DevWP.eu
  2. 2. Mario Peshev • @no_fear_inc • WordPress Ambassador at • WordPress Engineer and Consultant • Open Source Addict • Cofficer
  3. 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. 4. Why Debug? Friends don’t let friends work in a messed-up environment. There are enough tools doing the heavy lifting.
  5. 5. Debug… Where? • PHP • JavaScript • MySQL • Servers • Everywhere
  6. 6. PHP
  7. 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. 8. Debugging PHP (2)
  9. 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. 10. Xdebug “Xdebug is a PHP extension which provides debugging and profiling capabilities.” Official Xdebug Website
  11. 11. Xdebug (2) •Xdebug for Fedora with PHP 5.3 •Xdebug on Ubuntu for WordPress
  12. 12. Xdebug goodies • Remote debugging • Memory allocation, time tracking • Profiling • Code coverage • Stack trace control
  13. 13. JavaScript
  14. 14. 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
  15. 15. debugger; breakpoint
  16. 16. Debugging AJAX FirePHP could help too.
  17. 17. 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
  18. 18. DOM Element Breakpoints
  19. 19. 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');
  20. 20. Servers
  21. 21. Debugging Apache (logs) • access_log • error_log
  22. 22. Logging MySQL Or: Slow Queries log could be configured.
  23. 23. WordPress constants
  24. 24. 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 );
  25. 25. 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 );
  26. 26. 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()
  27. 27. Hooks
  28. 28. Key hooks • init, admin_init • wp_head, wp_footer • wp, parse_request • pre_get_posts • posts_clauses, terms_clauses • template_redirect • shutdown
  29. 29. 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
  30. 30. Searching
  31. 31. Searching Searching and processing content within the command line (UNIX-like OS): • ack • grep • egrep • sed
  32. 32. Searching example • Similar to:
  33. 33. Plugins for debugging
  34. 34. Debug Bar
  35. 35. Debug Objects “The Plugin Debug Objects provides a large number of information: query, cache, cron, constants, hooks, functions and many more.”
  36. 36. Debug Objects (2)
  37. 37. Query Monitor
  38. 38. Tools
  39. 39. 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
  40. 40. WP-CLI (2) WP-CLI shell
  41. 41. 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)
  42. 42. Practical Debugging
  43. 43. Questions? Tweets as @no_fear_inc Mario Peshev on LinkedIn nofearinc on WordPress.org GitHubering via mpeshev DevWP.eu - blog
  44. 44. 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
  45. 45. 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
  46. 46. 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

×