After a great introduction, Toby Ho
#1: Read the Error Message
Uncaught: TypeError: undefined...
Why?
- Usually leads you directly to the problem
- understanding it helps you understand the system
- know how to read between the lines
- knowing helps you be faster at debugging
Anatomy of an Error
The Error: Uncaught: TypeError: undefined is not a function filename:# onClick jQuery.event.dispatch alemData.handle
The Call Stack (stacktrace)
- The Error Site: Place where error occurred.
- Call Sites (Stackframes): Chain of function calls that lead up to the point of the error.
Your Code v. 3rd Party Code
Reading Between the Lines
ReferenceError: $ is not defined
$(function(){...});
Consult Google
#2 Test Your Assumptions
Troubled Programmer: "Help! It's not working. I think it is..."
Wise Programmer: "If you think it is that, then verify it. Why do you think it is the problem."
Why does this have to happen?
The Streetlight Effect (Observational Bias)
Policeman helps Casey to find keys.
Policeman: "Are you sure you lost your keys here?"
Casey: "Actually I think I lost them in the park."
People tend to look where it is easier because they are not comfortable looking elsewhere.
Overcoming Streetlight Effect
learning how to check things
design/run experiments
knowing your tools well
practice, practice, practice
Confirmational Bias
The "Yes, man!" voice in your head. It ignores evidence to the contrary.
Example, Casey had keys in back pocket the whole time.
Overcoming CB
learn to be skeptical of beliefs
question your assumptions
Practice Scenarios
"It does not work and nothing I do seems to make any difference."
What is the assumption:
-Wrong file
-Throw Exception ASAP
-Delete ALL the code
"The 'color' setting I am passing to the API doesn't seem to have an effect."
Interpret the setting v. Not interpret the setting
Look at the HTTP Request
-API not error
-Intentionally typo the parameter/setting name
"...just wrote an integration test and it passed the first time! Yes!!"
-Test scope of the test
-Does it actually fail when it doesn't work? Pass invalid data. Remove code lines.
Follow the Thought Bubbles
I wonder if...
Oh! I know! ...
It's almost as if...
Well, that's weird...
How is that even possible?
Crap! I am stuck!
#3 Take Small Steps
Usually when we hit one error after another, we are biting more than we can chew.
Test incrementally and in very small steps.
Example: Reverse MadLibs
-set click
-Get string
-
-Generate the word
$(function(){
$('button').click(function(){
// console.log('click!')
var content = $(#textarea').val()
// console.log(content)
var result = fillInBlanks(content)
$('#result).html(result)
});
function fillInBlanks(content){
//return 'words';
return content.replace(/_+/g, function(m){
return generateWord()
})
}
var dictionary = ['car','truck', 'drive']
function generateWord() {
var idx = Math.floor(Math.random() * dictionary.length);
return dictionary[idx];
}
#4 Know thy Tools
- printf, console.log
- interactive console (REPL)
- debugger( AKA breakpoint debugger, devtools, sources tab)
- DOM visualizer (devtools "elements" panel)
- Network tracers (devtools network panel, wireshark, charles)
- System call tracers (strace, dtrace)
- Revision control systems (git, mercurial)
- git bisect
- profilers
Chrome Dev Tools Course: http://discover-devtools.codeschool.com/
#5 Test Case Simplifcation
Netscape Communicator 4.5 (Navigator)
- Go to URL, try to print, it would crash the browser
- Bug solved at a Bugathon by a non-code developer
Irrelevant Code Reduction
- Remove code stepwise
Divide & Conquer
Pros
Simple
It always works
immune to human cognitive biases
universally applicable (any language/framework)
small test case suiteable
Practice, Practice, Practice
Write code
Use the tipcs
github.com/airportyh/add-a-typo
Debugging
Why Programs Fail
bit.ly/debugging-mastered