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 / colinodell@gmail.com

Photo by Steve Rotman // cc by-nc-nd 2.0 // https://flic.kr/p/xiBK