The Base Ingredients of Debugging

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.

B92fd0f4dfb7ed14c1441e4f4cf56542?s=128

Jenny Wong

July 13, 2013
Tweet

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