debugging effectively - php[world] 2015
TRANSCRIPT
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Debugging Effectively
Colin O’Dell
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• Certifications: Symfony and Magento• PHP League Member• league/commonmark• league/html-to-markdown
• PHP 7 Upgrade Guide e-book• @colinodell / www.colinodell.com
OverviewI. Importance of debuggingII. Debugging processIII. Tools & TechniquesIV. Q&A
Photo by Roman Boed // cc by 2.0 // https://flic.kr/p/ngwcf1
Debugging is...Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ (adjective)
Debugging is...Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
important
Debugging is...Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
the single most important skill in
programming.
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
PlanningCoding
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
Planning
Testing & Debugging
Coding
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• Clear the cache• Re-install dependencies• 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
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?
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?
Photo by quattrostagioni // cc by 2.0 // https://flic.kr/p/aGjVq8
1.Don’t parse HTML with regex2.Solve problems the right way
“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
Bugs are logical
Photo by Photofest
“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
Assume your code is the problem
Photo by Sergio Flores Rosales // cc by-nc-nd 2.0 // https://flic.kr/p/5UHkaW
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
1. Gather information
• Expected behavior vs.actual behavior• Error messages• Stack traces
Photo from youmustdesireit.wordpress.com
• Screenshots•Browser & OS•Date & time• Log entries
2. Replicate the Issue
Be able to replicate with 100% certainty
Photo by Nick Royer // cc by-sa // https://flic.kr/p/d41ASC
3. Identify the CulpritPhoto by U.S. Navy // cc 2.0 // https://flic.kr/p/n6Wgks
• Be methodical• Make no assumptions• Understand the bug
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
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
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
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
Tools & Techniques
Photo by Alan // cc by-nc-sa 2.0 // https://flic.kr/p/9azLii
Two essential tools
• Integrated development environment (IDE)• Interactive debugger
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
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
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
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
Techniques1. Trace backwards from known issue2. Divide & conquer3. Use tools4. Get help5. Take a break
Photo by Massmo Relsig // cc by-nc-nd 2.0 // https://flic.kr/p/pFrJCe
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
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. Divide & Conquer• Identify different code sections• Set breakpoints at the boundaries• Isolate issue to one particular area• Focus efforts on that area
✓
X
3. Use tools• Automated tests• Kint / VarDumper• Debug toolbars• Console utility • Profilers
• git bisect•netcat•curl•etc.
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
Automated TestsPhoto by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
KintPhoto by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Kint::dump($var);
VarDumperPhoto by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Twig: {{ dump(foo) }}{% dump foo %}
PHP: dump($somevar);
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Debug toolbars
Console Utility
Symfony: app/consoleDrupal: drushMagento: n98-magerun.pharLaravel: artisan
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
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)
BlackfirePhoto by Alan Stark // cc by-sa 2.0 // https://flic.kr/p/dn3qjx
New RelicPhoto by Alan Stark // cc by-sa 2.0 // https://flic.kr/p/dn3qjx
git bisect
v1.7 ? ? ? ? ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect start
git bisect bad
git bisect
v1.7 ? ? ? ? ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect good
git bisect
v1.7 ? ? ? ? ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect bad
git bisect
v1.7 ? ? ? BAD ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect bad
git bisect
v1.7 ? ? ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect good
git bisect
v1.7 ? GOOD ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect good
git bisect
v1.7 GOOD GOOD ? BAD BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
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
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
netcat
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
curl
4. 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
5. 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
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
Questions?
Photo by Marcello Maria Perongini // cc by-nc-nd 2.0 // https://flic.kr/p/6KDtm
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
Thanks!Feedback?• https://joind.in/14752 •@colinodell
Photo by Steve Rotman // cc by-nc-nd 2.0 // https://flic.kr/p/xiBK