Everyone’s code has bugs. Luckily there are almost as many tools to help squash bugs as there are bugs to be squashed. In this talk, Keanan Koppenhaver will take a detailed look at how to debug and fix some common issues associated with building websites. We’ll explore how Chrome’s Developer Tools can help us pinpoint front end bugs. Then, we’ll take a look at how to parse through error logs and use your code editor to track down errors even when it's not apparent where they exist. With all these tools in your toolbox, you can ensure that your code is in the best possible shape and ready to ship!

1. Debugging Tips and Tricks
Keanan Koppenhaver
@kkoppenhaver
http://alphaparticle.com
AlphaParticle
keanan@alphaparticle.com

2. keanan@alphaparticle.com
Step 1: Identifythe problem

3. keanan@alphaparticle.com

4. keanan@alphaparticle.com
Step 2: Find the cause

5. keanan@alphaparticle.com
Step 3: Find the Solution

6. keanan@alphaparticle.com
Step 4: Repeat

7. keanan@alphaparticle.com
Part1 | Front end

8. keanan@alphaparticle.com
Whatare DevTools?

9. keanan@alphaparticle.com
SpoilerAlert: Theyhelpwith
debugging Step 2 (find the cause)

10. keanan@alphaparticle.com
Developer Tools
• Bundeledwith mostmajor browsers (Chrome,
Firefox, Safari)
• Allowyou to inspectelements, console, network
requests, traffic and much more
• You can even code in devtools (Please don’t)

11. keanan@alphaparticle.com
Demo: Chrome DevTools

12. keanan@alphaparticle.com
Bonus Tip: Safari Devtoolswork
with iOS simulator

13. keanan@alphaparticle.com
Part2 | Backend

14. keanan@alphaparticle.com
if ( $env == ‘development’ ) {
PLEASE USEWP_DEBUG;
(orWP_DEBUG_LOG)
}

15. keanan@alphaparticle.com
QueryMonitor
• Devplugin thatruns in the background on every
page when enabledand logged in
• Monitors much more than queries: Hooks, theme
info, requestinfo, Serfer infoand more!

17. keanan@alphaparticle.com
Demo: Querymonitor

18. keanan@alphaparticle.com
Let’s talkaboutserver logs

19. keanan@alphaparticle.com

20. keanan@alphaparticle.com
[03-May-2016 21:12:56 UTC] PHP Fatal error: UncaughtError: Cannotuse objectof type stdClass
asarrayin /Users/keanan/code/Dev/wordpress/wp-content/themes/clientname/lib/admin-
helpers.php:303
Stacktrace:
#0 /Users/keanan/code/Dev/wordpress/wp-includes/plugin.php(525):
RootsSageExtrasrestrict_adding_tags('')
#1 /Users/keanan/code/Dev/wordpress/wp-settings.php(393): do_action('init')
#2 /Users/keanan/code/Dev/wordpress/wp-config.php(85): require_once('/Users/keanan/
co...')
#3 /Users/keanan/code/Dev/wordpress/wp-load.php(37): require_once('/Users/keanan/co...')
#4 /Users/keanan/code/Dev/wordpress/wp-admin/admin.php(31): require_once('/Users/
keanan/co...')
#5 /Users/keanan/code/Dev/wordpress/wp-admin/post.php(12): require_once('/Users/keanan/
co...')
#6 {main}
thrown in /Users/keanan/code/Dev/wordpress/wp-content/themes/clientname/lib/admin-
helpers.php on line 303

21. keanan@alphaparticle.com
[03-May-2016 21:12:56 UTC] PHP Fatalerror:
UncaughtError: Cannotuse objectof type stdClassasarray
in /Users/keanan/code/Dev/wordpress/wp-content/themes/
clientname/lib/admin-helpers.php:303

22. keanan@alphaparticle.com
302: <?php
303: $some_val= $post[‘some_val’];
304: ?>

23. keanan@alphaparticle.com
302: <?php
303: $some_val= $post->some_val;
304: ?>

24. Questions?
Keanan Koppenhaver
@kkoppenhaver
http://alphaparticle.com
AlphaParticle
keanan@alphaparticle.com