Intro to debugging
bug, debugging, debugger, chrome, dev tools
Intro to debugging
Read this article on debugging with the Chrome Dev Tools before the lesson.
- Understand what a bug is
- Understand the debugging process
- Understand print and interactive debugging
bugAn error, flaw, failure or fault in a computer program or system that causes it to produce an incorrect or unexpected result, or to behave in unintended ways.
error messageWill usually say: what line the error is coming from, hopefully what the error is, and provide a
stack trace(what is going on in the interpreter).
print debugging(or tracing) is the act of watching (live or recorded) trace statements, or print statements, that indicate the flow of execution of a process.
interactive debuggingA debugging method where code is stopped in runtime, allowing you to interact with the codebase at that point in time.
console.logA tool used for print debugging
debuggerA tool used for interactive debugging
The History of the 'bug'
The term "bug" was used in an account by computer pioneer Grace Hopper, who publicized the cause of a malfunction in an early electromechanical computer. A typical version of the story is:
In 1946, when Hopper was released from active duty, she joined the Harvard Faculty at the Computation Laboratory where she continued her work on the Mark II and Mark III. Operators traced an error in the Mark II to a moth trapped in a relay, coining the term bug. This bug was carefully removed and taped to the log book. Stemming from the first bug, today we call errors or glitches in a program a bug.
The Debugging Process
- Attempt to reproduce the problem. Does it persist on page reload?
- Attempt to isolate the problem.
- Check for error messages. Make sure that your console is open!!!
- If there is an error message:
- Read the error message. Do I know what it means? If not, google it!(you can always copy and paste the error directly into google)
- Go to the line specified in the message (your error message has isolated the issue for you)
- If there is not:
- Attempt to answer the following questions:
- What behavior should I be seeing that I am not?
- Where does that live in my code?
- Use a debugger tool to examine program states (values of variables, plus the call stack) and track down the origin of the problem(s).
- In simple cases, tracing is just a few
console.logstatements, which output the values of variables at certain points of program execution.
There are two primary methods that y'all will use in your time here at turing and beyond.
The first is
print debugging (or tracing), which is the act of watching (live or recorded) trace statements, or print statements, that indicate the flow of execution of a process. We've been doing this consistently using
The second is
Note These tools can and should be used proactively to test data as you develop to confirm that variables, properties, etc. are what you think they are.
In this repo, there are bugs on the following branches:
- Note For all of these branches, the bug free behavior is that the app can correctly add two numbers together.
- Should give an idea of places to insert debugger statements as well as how to effectively leverage them
bug3Additional bug free behavior: The 'Add em up!' button should be disabled if either input is empty
bug5Additional bug free behavior: Both inputs should be cleared on submit
bug6Additional bug free behavior: Two floats can be added together correctly