Debugging Effectively - PHP UK 2017

1. Debugging Effectively Colin O’Dell @colinodell

2. 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 League Member • league/commonmark • league/html-to-markdown • PHP 7 Upgrade Guide e-book @colinodell

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 @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 important @colinodell

6. 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

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

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

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 code and tools Experience Process

12. Photo by Matthew Paulson // cc by-nc-nd 2.0 // https://flic.kr/p/di35xa Develop your intuition Intuition Experience Process

13. 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

14. 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

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? •Solution Y might work •How can I do Y? @colinodell

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 @colinodell

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 @colinodell

18. Bugs are logical Photo by Photofest @colinodell

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 @colinodell

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

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 @colinodell

22. 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

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

24. 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

25. 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

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 @colinodell

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 @colinodell

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 @colinodell

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

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

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 @colinodell

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 @colinodell

33. 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

34. 1. Trace backwards •Error is thrown from known location •Use a debugger •Establish context •Work backwards Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw @colinodell

35. 1. Trace backwards •Error is thrown from known location •Use a debugger •Establish context •Work backwards a() b() c() d() Photo by Shawn Harquail // cc by-nc 2.0 // https://flic.kr/p/npxFVw

40. 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. 3. Divide & Conquer • Identify different code sections • Set breakpoints at the boundaries • Isolate issue to one particular area • Focus efforts on that area @colinodell

45. @colinodell

46. @colinodell

47. @colinodell

48. ✓ X @colinodell

49. @colinodell

50. 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

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

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

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

54. 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

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

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

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

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

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

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

61. 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

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

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

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

65. 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

66. 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

67. 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

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

69. 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

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

Debugging Effectively - PHP UK 2017

Colin O'Dell

Debugging Effectively - PHP UK 2017