The Base Ingredients of Debugging

Slides as given at WCUK 2013 and an upgrade of MWUG June 2013 presentation.

----- Abstract ------
As any web developer will know, love it or hate it, we all need to debug at some point. Whether it be an error in HTML syntax or invalid database queries.

There are basic debugging rules and structures which can or do make all of our lives a little easier. This talk is aimed toward beginners, and intends to convey basic debugging skills utilising HTML, CSS, Javascript and PHP. Not only will the skill-sets be covered, but also the mindset required in understanding why developing debug-fu is a great asset in any development role.
As a fresh entrant into a development role, all too often you will hear the phrase ""just debug it"", without necessarily owning the knowledge to carry this out in most circumstances, or know why it's even necessary.

When your role involves work with multiple languages and development environments, it can be very hard to know where to begin. The talk will be based on my own experience, from discovering and evaluating solutions within real life scenarios.

Transcript

1. www.reasondigital.com @miss_jwo 1 Saturday, 13 July 13
2. www.reasondigital.com @miss_jwo The Base Ingredients of Debugging Jenny Wong Web Developer 1 Saturday, 13 July 13
3. www.reasondigital.com @miss_jwo The Principles of Debugging Jenny Wong Web Developer 2 Saturday, 13 July 13
4. www.reasondigital.com @miss_jwo Jenny Wong Web Developer PHPNW usergroup & conference organiser @miss_jwo 3 Saturday, 13 July 13
5. www.reasondigital.com @miss_jwo 4 Saturday, 13 July 13
6. www.reasondigital.com @miss_jwo More Info: h p://conference.phpnw.org.uk 5 Saturday, 13 July 13
7. www.reasondigital.com @miss_jwo "This is all true because it came off the internet." Wise Words : 6 Saturday, 13 July 13
8. www.reasondigital.com @miss_jwo Actually it was a book. 7 Saturday, 13 July 13
9. www.reasondigital.com @miss_jwo What is debugging? 8 Saturday, 13 July 13
10. www.reasondigital.com @miss_jwo Debugging is finding out why something does not work & fixing it. 9 Saturday, 13 July 13
11. www.reasondigital.com @miss_jwo en.wikipedia.org/wiki/Debugging 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. 10 Saturday, 13 July 13
12. www.reasondigital.com @miss_jwo The Principles 11 Saturday, 13 July 13
13. www.reasondigital.com @miss_jwo 1. Understand the system 12 Saturday, 13 July 13
14. www.reasondigital.com @miss_jwo Think about where the problem may be Database? PHP Javascript / CSS / HTML User issue? Server issue? 13 Saturday, 13 July 13
15. www.reasondigital.com @miss_jwo codex.wordpress.org/ Working_with_WordPress 14 Saturday, 13 July 13
16. www.reasondigital.com @miss_jwo 15 Saturday, 13 July 13
17. www.reasondigital.com @miss_jwo 2. Make it fail 16 Saturday, 13 July 13
18. www.reasondigital.com @miss_jwo 3. Quit thinking and look 17 Saturday, 13 July 13
19. www.reasondigital.com @miss_jwo 4. Divide & Conquer 18 Saturday, 13 July 13
20. www.reasondigital.com @miss_jwo /* Javascript */ var foo = 'hello world'; alert(foo); console.log(foo); 19 Saturday, 13 July 13
21. www.reasondigital.com @miss_jwo 20 Saturday, 13 July 13
22. www.reasondigital.com @miss_jwo 21 Saturday, 13 July 13
23. www.reasondigital.com @miss_jwo 22 Saturday, 13 July 13
24. www.reasondigital.com @miss_jwo /* PHP */ $foo = 'hello php code'; var_dump($foo); die($foo); 23 Saturday, 13 July 13
25. www.reasondigital.com @miss_jwo /* PHP */ var_dump('line2'); var_dump(wp_is_mobile()); die($variable); 24 Saturday, 13 July 13
26. www.reasondigital.com @miss_jwo 25 Saturday, 13 July 13
27. www.reasondigital.com @miss_jwo 26 Saturday, 13 July 13
28. www.reasondigital.com @miss_jwo 27 Saturday, 13 July 13
29. www.reasondigital.com @miss_jwo 28 Saturday, 13 July 13
30. www.reasondigital.com @miss_jwo 5. Change one thing at a time 29 Saturday, 13 July 13
31. www.reasondigital.com @miss_jwo 6. Keep an audit trail 30 Saturday, 13 July 13
32. www.reasondigital.com @miss_jwo 31 Saturday, 13 July 13
33. www.reasondigital.com @miss_jwo 7. Check the plug 32 Saturday, 13 July 13
34. www.reasondigital.com @miss_jwo 8. Get a fresh view 33 Saturday, 13 July 13
35. www.reasondigital.com @miss_jwo 9. If you didn’t fix it , it is not fixed. 34 Saturday, 13 July 13
36. www.reasondigital.com @miss_jwo Tools & Methods 35 Saturday, 13 July 13
37. www.reasondigital.com @miss_jwo HTML Check different browsers / machines Validate the source code at W3C Clear the cache Write text into your file Inspect the element 36 Saturday, 13 July 13
38. www.reasondigital.com @miss_jwo CSS Check different browsers / machines Validate the source code at W3C Clear the cache Inspect the element Colour the target a crazy colour 37 Saturday, 13 July 13
39. www.reasondigital.com @miss_jwo PHP define('WP_DEBUG', true); error_reporting(E_ALL); ini_set('display_errors', 1); XDebug 38 Saturday, 13 July 13
40. www.reasondigital.com @miss_jwo /* PHP */ 39 Saturday, 13 July 13
41. www.reasondigital.com @miss_jwo Rubber Duck Debugging upload.wikimedia.org/wikipedia/commons/d/d5/ Rubber_duck_assisting_with_debugging.jpg 40 Saturday, 13 July 13
42. www.reasondigital.com @miss_jwo Questions? 41 Saturday, 13 July 13
43. www.reasondigital.com @miss_jwo @miss_jwo wcuk@jwong.co.uk Ask me later: (Feedback would be awesome) t: e: 42 Saturday, 13 July 13
44. 43 Saturday, 13 July 13