-
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
-
36.
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
-
37.
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
-
38.
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
-
39.
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
-
41.
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
-
42.
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
-
43.
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
PHP developer 14 years
JS, Java, C#
What are some words
For me: fun challenge
Take this one step further
Why is that?
How much time coding?
2/3rds
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
READ SLOWLY
Shouldn’t be done haphazardly
Like intuition, but not
Understanding without proof
Clarity; accuracy; precision
--
Focus on the process
Experience and “sixth sense” will come with time
NEXT: Debugging process
BE NICE / CONSTRUCTIVE
TODO ADD NOTES
When you give up on the proper approach
Apply workaround instead
Improper solutions will cause issues later
NEXT - EXAMPLE
Base85-encoded
Don’t be clever
TRANSITION NEEDED!!
Magical thinking
Article
sneaky
Bugs are almost always based on faulty assumptions
95% in your code
If helping others, assume their code is problem
Challenge their assumptions
Take with grain of salt
Define the symptoms
Collect everything you can
Automated tests preferred, but manual is okay too
LEGOS
Understand the fundamental nature
Exactly why
Other nice-to-haves:
File syncing
Git integration
Run tools
PhpStorm, Sublime Text, vim
NOT Notepad++ or Dreamweaver
Debuggers are awesome tool
…
Better than primitive approaches
Examine in real time
Xdebug
Chrome developer tools
Click 4 times
Dive in
Look at call stack
Advanced breakpoints
Grouping
Conditions
Stack trace
Grep for error message
Set breakpoint
For example
Examine variables
How did I get here? – call stack
Log/output results at different steps
Identify where things start going wrong
Log/output results at different steps
Identify where things start going wrong
Log/output results at different steps
Identify where things start going wrong
Log/output results at different steps
Identify where things start going wrong
Debugger is critical
Not only tool
Tools are not a substitute for thinking
Phpunit
Phpspec
behat
Scales logarithmically – runs in O(log N)
9 commits - 4 tests
10x: 90 commits – 8 tests
100x: 900 commits - 16 tests
END TOOLS SECTION
Fifth technique
1. There is ALWAYS a logical explanation
3. Great learning opportunity
4. Challenge everything
?
Other Questions? Talk afterwards or contact me
Thank you guys
I’d appreciate feedback