Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Debugging Effectively
Colin O’Dell
@colinodell
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 / www.colinodell.com
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
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
Debugging is...
Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
(adjective)
Debugging is...
important
Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
Debugging is...
the single most
important skill in
programming.
Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
PlanningCoding
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
Planning
Testing &
Debugging
Coding
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
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
• app/console cache:clear
• 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
XY Problem
•I want to solve problem X
•How do I solve X?
Photo by Yoel Ben-Avraham, with changes // cc by--nd 2.0 // https://flic.kr/p/6pmtQL
XY Problem
•I want to solve problem X
•How do I solve X?
•Solution Y might work
•How can I do Y?
Photo by Yoel Ben-Avraham, with changes // cc by--nd 2.0 // https://flic.kr/p/6pmtQL
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
“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 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
•Expected behavior
vs. actual behavior
•Error messages
•Stack traces
Photo from youmustdesireit.wordpress.com
•Screenshots
•Browser & OS
•Date & time
•Log entries
1. Gather Information
2. Replicate the Issue
Be able to replicate with 100% certainty
Photo by Nick Royer // cc by-sa // https://flic.kr/p/d41ASC
• Be methodical
• Make no assumptions
• Understand the bug
Photo by U.S. Navy // cc 2.0 // https://flic.kr/p/n6Wgks
3. Identify the Culprit
• 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
4. Fix & Re-test
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 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
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
Techniques
1. Trace backwards from known issue
2. Divide & conquer
3. Use tools
4. Get help
5. 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
a()
b()
c()
d()
Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw
1. Trace 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
Debugging Effectively
Debugging Effectively
Debugging Effectively
✓
X
Debugging Effectively
3. Use tools
• VarDumper
• Debug toolbars
• Console utility
• Profilers
• git bisect
Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
•netcat
•curl
•strace
•etc.
VarDumper
Photo 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
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
Console Utility
Symfony: bin/console
Drupal: drush
Drupal Console
Magento: n98-magerun
Laravel: artisan
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)
git bisect
v1.7 ? ? ? ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect
v1.7 ? ? BAD ? ? HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect
v1.7 ? ? BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect
v1.7 GOOD ? BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
git bisect
v1.7 GOOD
X BAD BAD BAD HEAD
Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
abcd123 is the first bad commit
netcat
Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
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
• Clear your mind; start fresh
• Forget invalid assumptions
• Recharge your batteries
• Let your subconscious work on it
Photo by Kristina Alexadnerson // cc by-nc-nd 2.0 // https://flic.kr/p/cFEcDC
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
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://symfony.com/doc/current/components/var_dumper/introducti
on.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/talk/f3c6c
• @colinodell
Photo by Steve Rotman // cc by-nc-nd 2.0 // https://flic.kr/p/xiBK
Debugging Effectively

More Related Content

Debugging Effectively

  • 1. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe Debugging Effectively Colin O’Dell @colinodell
  • 2. 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 / www.colinodell.com Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
  • 3. 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
  • 4. Debugging is... Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ (adjective)
  • 5. Debugging is... important Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
  • 6. Debugging is... the single most important skill in programming. Photo by Ewan Cross // cc by-nc-nd 2.0 // https://flic.kr/p/7MCt3m
  • 7. PlanningCoding Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
  • 8. Planning Testing & Debugging Coding Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
  • 9. 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
  • 10. Process is the foundation of effective debugging Process Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa
  • 11. Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa Gain experience with tools and code Experience Process
  • 12. Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa Develop a “sixth sense” “Sixth Sense” Experience Process
  • 13. Junior Developers • Try the “usual” steps • app/console cache:clear • 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
  • 14. XY Problem •I want to solve problem X •How do I solve X? Photo by Yoel Ben-Avraham, with changes // cc by--nd 2.0 // https://flic.kr/p/6pmtQL
  • 15. XY Problem •I want to solve problem X •How do I solve X? •Solution Y might work •How can I do Y? Photo by Yoel Ben-Avraham, with changes // cc by--nd 2.0 // https://flic.kr/p/6pmtQL
  • 16. 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
  • 17. “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
  • 19. “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
  • 20. Assume your code is the problem Photo by Sergio Flores Rosales // cc by-nc-nd 2.0 // https://flic.kr/p/5UHkaW
  • 21. 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
  • 22. •Expected behavior vs. actual behavior •Error messages •Stack traces Photo from youmustdesireit.wordpress.com •Screenshots •Browser & OS •Date & time •Log entries 1. Gather Information
  • 23. 2. Replicate the Issue Be able to replicate with 100% certainty Photo by Nick Royer // cc by-sa // https://flic.kr/p/d41ASC
  • 24. • Be methodical • Make no assumptions • Understand the bug Photo by U.S. Navy // cc 2.0 // https://flic.kr/p/n6Wgks 3. Identify the Culprit
  • 25. • 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 4. Fix & Re-test
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. Tools &Techniques Photo by Alan // cc by-nc-sa 2.0 // https://flic.kr/p/9azLii
  • 30. Two essential tools • Integrated development environment (IDE) • Interactive debugger Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
  • 31. 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
  • 32. 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
  • 33. Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC
  • 34. Techniques 1. Trace backwards from known issue 2. Divide & conquer 3. Use tools 4. Get help 5. Take a break Photo by Massmo Relsig // cc by-nc-nd 2.0 // https://flic.kr/p/pFrJCe
  • 35. 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
  • 36. 1. Trace backwards a() b() c() d() Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw
  • 37. 1. Trace backwards a() b() c() d() Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw
  • 38. 2. Divide & Conquer • Identify different code sections • Set breakpoints at the boundaries • Isolate issue to one particular area • Focus efforts on that area
  • 42. ✓ X
  • 44. 3. Use tools • VarDumper • Debug toolbars • Console utility • Profilers • git bisect Photo by florianric // cc by 2.0 // https://flic.kr/p/c4QJzC •netcat •curl •strace •etc.
  • 45. VarDumper Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe Twig: {{ dump(foo) }} {% dump foo %} PHP: dump($somevar);
  • 46. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe Debug toolbars
  • 47. Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe Console Utility Symfony: bin/console Drupal: drush Drupal Console Magento: n98-magerun Laravel: artisan
  • 48. 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)
  • 49. git bisect v1.7 ? ? ? ? ? HEAD Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
  • 50. git bisect v1.7 ? ? BAD ? ? HEAD Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
  • 51. git bisect v1.7 ? ? BAD BAD BAD HEAD Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
  • 52. git bisect v1.7 GOOD ? BAD BAD BAD HEAD Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm
  • 53. git bisect v1.7 GOOD X BAD BAD BAD HEAD Photo by unbekannt270 // cc by 2.0 // https://flic.kr/p/oHReqm abcd123 is the first bad commit
  • 54. netcat Photo by Joseph B // cc by-nc-nd 2.0 // https://flic.kr/p/7GAMBe
  • 55. 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
  • 56. 5. Take a break • Clear your mind; start fresh • Forget invalid assumptions • Recharge your batteries • Let your subconscious work on it Photo by Kristina Alexadnerson // cc by-nc-nd 2.0 // https://flic.kr/p/cFEcDC
  • 57. 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
  • 58. Questions? Photo by Marcello Maria Perongini // cc by-nc-nd 2.0 // https://flic.kr/p/6KDtm
  • 59. 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://symfony.com/doc/current/components/var_dumper/introducti on.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
  • 60. Thanks! Feedback? • https://joind.in/talk/f3c6c • @colinodell Photo by Steve Rotman // cc by-nc-nd 2.0 // https://flic.kr/p/xiBK

Editor's Notes

  1. PHP developer 14 years JS, Java, C#
  2. What are some words Hard Time-consuming Annoying
  3. Take this one step further Why is that?
  4. How much time coding? 2/3rds
  5. According to the Mythical Man Month, 1/6th ½ is testing/debugging How much - actually writing code vs getting it working Area where it’s worthwhile to become efficient
  6. READ SLOWLY Shouldn’t be done haphazardly
  7. Immediate understanding of what type of problem, where it might be Like intuition, but not Understanding without proof, but based on logic and experience -- Focus on the process Experience and “sixth sense” will come with time NEXT: Debugging process
  8. And intermediate developers
  9. When you give up on the proper approach Apply workaround instead Improper solutions will cause issues later NEXT - EXAMPLE
  10. BE FAST Base85-encoded Don’t be clever
  11. Magical thinking Code is not a magic black box
  12. Computers are logical Binary, 0/1s
  13. sneaky
  14. Bugs are almost always based on faulty assumptions If you build on faulty assumptions 95% in your code
  15. 15 MIN IN / 25 MIN REMAINING OR SPEED UP!
  16. Define the symptoms Collect everything you can
  17. Automated tests preferred, but manual is okay too LEGOS
  18. Understand the fundamental nature Exactly why We’ll get into the tools & techniques
  19. 25 MIN IN / 15 MIN REMAINING
  20. Other nice-to-haves: File syncing Git integration Run tools PhpStorm, Sublime Text, vim NOT Notepad++ or Dreamweaver
  21. Debuggers are awesome tool … Better than primitive approaches Examine in real time Xdebug Chrome developer tools
  22. Advanced breakpoints Grouping Conditions
  23. Stack trace Grep for error message Set breakpoint For example
  24. Examine variables How did I get here? – call stack
  25. Don’t have enough time to cover all of these
  26. Works in Twig, PHP, CLI, etc. Better than vardump Handles: - Circular references - Deeply-nested objects Public vs protected vs private Custom casters to change representation
  27. Q: How many people here are using Git? Familiar with Git bisect? Built-in tool Assists with running a binary search across your commits
  28. Scales logarithmically – runs in O(log N) 7 commits - 4 tests 10x: 70 commits – 8 tests 100x: 700 commits - 16 tests
  29. Fifth technique
  30. 1. There is ALWAYS a logical explanation 3. Great learning opportunity 4. Challenge everything
  31. ? Other Questions? Talk afterwards or contact me
  32. Thank you guys I’d appreciate feedback