The document discusses the importance of debugging as a crucial skill in programming, outlining a systematic approach to effectively identify and resolve software bugs. It covers various strategies, tools, and techniques, including gathering information, replicating issues, and employing debugging tools like integrated development environments and interactive debuggers. The content emphasizes the need for persistence and a structured mindset when tackling debugging challenges.

1. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Debugging Effectively
Colin O’Dell
@colinodell

2. Overview
I. Importance of debugging
II. Debugging process
III. Tools & Techniques
IV. Q&A
Photo by Roman Boed // cc by 2.0 // https://flic.kr/p/ngwcf1
@colinodell

3. Debugging is...
Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
(adjective)
@colinodell

4. Debugging is...
Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
(adjective)
@colinodell

5. Debugging is...
Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
(adjective)
@colinodell

6. Debugging is...
Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
important
@colinodell

7. Debugging is...
Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
the single most
important skill in
programming.
@colinodell

8. Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
PlanningCoding
@colinodell

9. Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
Planning
Testing &
Debugging
Coding
@colinodell

10. Debugging is the process of finding and resolving bugs
or defects that prevent correct operation of computer
software or a system.
– Wikipedia
Photo by Stephen Dyrgas // cc by-nc-nd 2.0 // https://flic.kr/p/3eTfWU

11. Process is the foundation of effective debugging
Process
Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa

12. Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa
Gain experience with code and tools
Experience
Process

13. Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa
Develop a “sixth sense”
“Sixth Sense”
Experience
Process

14. Junior Developers
• Try the “usual” steps
• bin/console cache:clear
• composer install
• chmod –R 777 *
• Ask somebody else
• Co-worker
• Google
• StackOverflow post
Photo by Yoel Ben-Avraham, with changes // cc by--nd 2.0 // https://flic.kr/p/6pmtQL
@colinodell

15. XY Problem
Photo by Yoel Ben-Avraham, with changes // cc by--nd 2.0 // https://flic.kr/p/6pmtQL
•I want to solve problem X
•How do I solve X?
@colinodell

16. XY Problem
Photo by Yoel Ben-Avraham, with changes // cc by--nd 2.0 // https://flic.kr/p/6pmtQL
•I want to solve problem X
•How do I solve X?
•Solution Y might work
•How can I do Y?
@colinodell

17. Photo by quattrostagioni // cc by 2.0 // https://flic.kr/p/aGjVq8
1.Don’t parse HTML with regex
2.Solve problems the right way @colinodell

18. “I don’t know why”
“For some reason”
“Doesn’t make sense”
Photo by Stanley Yuu // cc by-nc-nd 2.0 // https://flic.kr/p/pMnfNu
@colinodell

19. Bugs are logical
Photo by Photofest
@colinodell

20. “The bug is not moving around in your code,
trying to trick or evade you. It is just siting in
one place, doing the wrong thing in the same
way every time.” – Nick Parlante, Debugging Zen
Photo by GrahamC57 // cc by-nc-nd 2.0 // https://flic.kr/p/cwJi9Q
@colinodell

21. Assume your
code is the
problem
Photo by Sergio Flores Rosales // cc by-nc-nd 2.0 // https://flic.kr/p/5UHkaW
@colinodell

22. Systematic Approach
1. Gather information
2. Replicate the issue
3. Identify the culprit
4. Fix it & re-test
5. Mitigate future occurrences
Photo from EduSpiral // cc by-nc-nd 3.0
@colinodell

23. 1. Gather information
• Expected behavior vs.
actual behavior
• Error messages
• Stack traces
Photo from youmustdesireit.wordpress.com
•Screenshots
•Browser & OS
•Date & time
•Log entries
@colinodell

24. 2. Replicate the Issue
Be able to replicate with 100% certainty
Photo by Nick Royer // cc by-sa // https://flic.kr/p/d41ASC
@colinodell

25. 3. Identify the Culprit
Photo by U.S. Navy // cc 2.0 // https://flic.kr/p/n6Wgks
• Be methodical
• Make no assumptions
• Understand the bug @colinodell

26. 4. Fix it & Re-test
• Attempt to replicate again
• Avoid XY problem
• No temporary workarounds!
• Add technical debt
• May introduce other issues
• Never get replaced with true solutions
Photo by Jeff Eaton // cc by-sa 2.0 // https://flic.kr/p/b33rSx
@colinodell

27. 5. Mitigate Future Occurrences
• Add an automated test
• Share your new knowledge
• Project documentation
• Blog post
• StackOverflow
• Submit patch upstream
Photo by marcokalmann // cc by-nc-nd 2.0 // https://flic.kr/p/4CqLMQ
@colinodell

28. Recap
1. Gather information
2. Replicate the issue
3. Identify the culprit
4. Fix it & re-test
5. Mitigate future occurrences
Photo from EduSpiral // cc by-nc-nd 3.0
@colinodell

29. Long-Term Results
• Gain experience
• Learn how the system works
• Build heuristics
• Boost confidence
Photo by Glenn Beltz // cc by 2.0 // https://flic.kr/p/i7Csdx
@colinodell

30. Tools & Techniques
Photo by Alan // cc by-nc-sa 2.0 // https://flic.kr/p/9azLii
@colinodell

31. Two essential tools
• Integrated development
environment (IDE)
• Interactive debugger
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
@colinodell

32. Integrated Development Environment
•Minimum features:
•Syntax highlighting
•Auto-completion
•Fast code navigation
•Debugger
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
@colinodell

33. Interactive Debugger
•Pause code execution
•Breakpoints
•Conditional breakpoints
•Step through execution
•Examine variables
•Explore call stack
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
@colinodell

34. @colinodell

35. Techniques
1. Trace backwards from known issue
2. Trace forwards from start
3. Binary search
4. Use tools
5. Get help
6. Take a break
Photo by Massmo Relsig // cc by-nc-nd 2.0 // https://flic.kr/p/pFrJCe
@colinodell

36. 1. Trace backwards
•Use a debugger
•Identify source of error
•Establish context
•Work backwards
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw
@colinodell

37. 1. Trace backwards
•Use a debugger
•Identify source of error
•Establish context
•Work backwards
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

38. 1. Trace backwards
•Use a debugger
•Identify source of error
•Establish context
•Work backwards
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

39. 1. Trace backwards
•Use a debugger
•Identify source of error
•Establish context
•Work backwards
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

40. 1. Trace backwards
•Use a debugger
•Identify source of error
•Establish context
•Work backwards
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

41. 1. Trace backwards
•Use a debugger
•Identify source of error
•Establish context
•Work backwards
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

42. 2. Trace forwards
•Opposite direction
•Problematic line
isn’t known
•Use debugger or logging
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

43. 2. Trace forwards
•Opposite direction
•Problematic line
isn’t known
•Use debugger or logging
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

44. 2. Trace forwards
•Opposite direction
•Problematic line
isn’t known
•Use debugger or logging
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

45. 2. Trace forwards
•Opposite direction
•Problematic line
isn’t known
•Use debugger or logging
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

46. 3. Divide & Conquer
• Identify different code sections
• Set breakpoints at the boundaries
• Isolate issue to one particular area
• Focus efforts on that area
@colinodell

47. @colinodell

48. @colinodell

49. @colinodell

50. ✓
X
@colinodell

51. @colinodell

52. 4. Use tools
•Variable dumps
•Debug toolbars
•Console utility
•Profilers
•git bisect
•netcat
•curl
•strace
•etc.
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
@colinodell

53. Variable dumps
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
•var_dump()
•kint()
•file_put_contents()
@colinodell

54. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Debug toolbars
@colinodell

55. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Console Utility
Drupal: drush
Drupal Console
Symfony: bin/console
Magento: n98-magerun
Laravel: artisan
@colinodell

56. Performance Profiling
Identify slowness:
• Bottlenecks
• Resource hogs
• Inefficient code
Photo by Alan Stark // cc by-sa 2.0 // https://flic.kr/p/dn3qjx
Tools:
• Blackfire (freemium)
• New Relic (freemium)
• xhprof (open-source)
@colinodell

57. git bisect
v1.7 ? ? ? ? ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell

58. git bisect
v1.7 ? ? ? ? ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell

59. git bisect
v1.7 ? ? ? BAD ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell

60. git bisect
v1.7 ? ? ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell

61. git bisect
v1.7 ? GOOD ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell

62. git bisect
v1.7 GOOD GOOD ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell

63. git bisect
v1.7 GOOD GOOD
X BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
abcd123 is the first bad commit
@colinodell

64. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
netcat
@colinodell

65. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
curl
@colinodell

66. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
strace
@colinodell

67. 5. Get help
• RTFM / RTFD
• Project forums or issue queue
• StackOverflow, IRC, etc.
• Ask a colleague
• Expert in that area
• Senior developer
• Rubber ducking
Photo by Hiromitsu Morimoto // cc by-sa 2.0 // https://flic.kr/p/6Vzzaa
@colinodell

68. 6. Take a break
Photo by Kristina Alexadnerson // cc by-nc-nd 2.0 // https://flic.kr/p/cFEcDC
• Clear your mind; start fresh
• Forget invalid assumptions
• Recharge your batteries
• Let your subconscious work on it
@colinodell

69. Four things to walk away with
1. Computers aren’t random,
and neither are bugs
2. Persistence will always pay off
3. Don’t be afraid to dive deep
4. Don’t make assumptions or
take things for granted
Photo by Kristina Alexadnerson // cc by-nc-nd 2.0 // https://flic.kr/p/dvEpfY
@colinodell

70. Questions?
Photo by Marcello Maria Perongini // cc by-nc-nd 2.0 // https://flic.kr/p/6KDtm
@colinodell

71. Learn More
• https://web.duke.edu/cps001/notes/Debugging.pdf
• http://www.fiveminutegeekshow.com/20
• http://blog.codeunion.io/2014/09/03/teaching-novices-how-to-debug-
code/
• https://www.jetbrains.com/phpstorm/help/debugging.html
• http://www.sitepoint.com/debugging-git-blame-bisect/
• http://unix.stackexchange.com/a/50099/80744
• http://codeception.com/docs/01-Introduction
• http://chadfowler.com/blog/2014/01/26/the-magic-of-strace/
• http://c2.com/cgi/wiki?RubberDucking
Photo by Samantha Marx // cc by 2.0 // https://flic.kr/p/8KrU1R
@colinodell

72. Thanks!
Feedback Appreciated!
• https://joind.in/talk/a2d4c
• @colinodell / colinodell@gmail.com
Photo by Steve Rotman // cc by-nc-nd 2.0 // https://flic.kr/p/xiBK