debugging effectively - drupalcon europe 2016
TRANSCRIPT
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Debugging Effectively
Colin O’Dell
@colinodell
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Colin O’Dell
• Lead Web Developer at Unleashed Technologies• PHP developer since 2002• PHP League Member• league/commonmark• league/html-to-markdown
• PHP 7 Upgrade Guide e-book
@colinodell
OverviewI. Importance of debuggingII. Debugging processIII. Tools & TechniquesIV. Q&A
Photo by Roman Boed // cc by 2.0 // https://flic.kr/p/ngwcf1
@colinodell
Debugging is...Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ (adjective)
@colinodell
Debugging is...Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
important@colinodell
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
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
PlanningCoding
@colinodell
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
Planning
Testing & Debugging
Coding
@colinodell
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
Process is the foundation of effective debugging
Process
Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa
Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa
Gain experience with tools and code
Experience
Process
Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa
Develop a “sixth sense”
“Sixth Sense
”Experience
Process
Junior Developers• Try the “usual” steps• drush cc all• composer install• chmod –R 777 *
• Google the error• Try every solution
• Ask somebody else• Co-worker• StackOverflow post
• Give up
Photo by Yoel Ben-Avraham, with changes // cc by--nd 2.0 // https://flic.kr/p/6pmtQL
@colinodell
XY ProblemPhoto 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
XY ProblemPhoto 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
Photo by quattrostagioni // cc by 2.0 // https://flic.kr/p/aGjVq8
1.Don’t parse HTML with regex2.Solve problems the right way
@colinodell
“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
Bugs are logical
Photo by Photofest
@colinodell
“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
Assume your code is the problem
Photo by Sergio Flores Rosales // cc by-nc-nd 2.0 // https://flic.kr/p/5UHkaW
@colinodell
Systematic Approach
1. Gather information2. Replicate the issue3. Identify the culprit4. Fix it & re-test5. Mitigate future occurrences
Photo from EduSpiral // cc by-nc-nd 3.0
@colinodell
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
2. Replicate the Issue
Be able to replicate with 100% certainty
Photo by Nick Royer // cc by-sa // https://flic.kr/p/d41ASC
@colinodell
3. Identify the CulpritPhoto by U.S. Navy // cc 2.0 // https://flic.kr/p/n6Wgks
• Be methodical• Make no assumptions• Understand the bug
@colinodell
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
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
Recap
1. Gather information2. Replicate the issue3. Identify the culprit4. Fix it & re-test5. Mitigate future occurrences
Photo from EduSpiral // cc by-nc-nd 3.0
@colinodell
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
Tools & Techniques
Photo by Alan // cc by-nc-sa 2.0 // https://flic.kr/p/9azLii
@colinodell
Two essential tools
• Integrated development environment (IDE)• Interactive debugger
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
@colinodell
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
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
@colinodell
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
Techniques1. Trace backwards from known issue2. Trace forwards from start 3. Binary search4. Use tools5. Get help6. Take a break
Photo by Massmo Relsig // cc by-nc-nd 2.0 // https://flic.kr/p/pFrJCe
@colinodell
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
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
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
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
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
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
2. Trace forwards•Opposite direction•Problematic lineisn’t known•Use debugger or logging
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw
2. Trace forwards•Opposite direction•Problematic lineisn’t known•Use debugger or logging
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw
2. Trace forwards•Opposite direction•Problematic lineisn’t known•Use debugger or logging
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw
2. Trace forwards•Opposite direction•Problematic lineisn’t known•Use debugger or logging
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw
3. Divide & Conquer• Identify different code sections• Set breakpoints at the boundaries• Isolate issue to one particular area• Focus efforts on that area
@colinodell
@colinodell
@colinodell
@colinodell
✓
X@colinodell
@colinodell
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
Variable dumpsPhoto by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
•dump()•kint()•dpm()
@colinodell
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Debug toolbars
@colinodell
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Console Utility
Drupal: drushDrupal Console
Symfony: bin/consoleMagento: n98-magerunLaravel: artisan
@colinodell
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
git bisect
v1.7 ? ? ? ? ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell
git bisect
v1.7 ? ? ? ? ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell
git bisect
v1.7 ? ? ? BAD ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell
git bisect
v1.7 ? ? ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell
git bisect
v1.7 ? GOOD ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell
git bisect
v1.7 GOOD GOOD ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
@colinodell
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
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
netcat
@colinodell
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
curl
@colinodell
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
strace
@colinodell
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
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
Four things to walk away with
1. Computers aren’t random,and neither are bugs
2. Persistence will always pay off3. Don’t be afraid to dive deep4. 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
Questions?
Photo by Marcello Maria Perongini // cc by-nc-nd 2.0 // https://flic.kr/p/6KDtm
@colinodell
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-co
de/• 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
Thanks!Feedback?
• events.drupal.org/dublin2016/schedule• @colinodell / [email protected]
Photo by Steve Rotman // cc by-nc-nd 2.0 // https://flic.kr/p/xiBK