title | length | tags |
---|---|---|
Intro to debugging |
90 |
bug, debugging, debugger, chrome, dev tools |
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
bug
An 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 message
Will usually say: what line the error is coming from, hopefully what the error is, and provide astack 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 debugging
A debugging method where code is stopped in runtime, allowing you to interact with the codebase at that point in time.console.log
A tool used for print debuggingdebugger
A tool used for interactive debugging
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.
- 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.log
statements, 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 console.log
statements.
The second is interactive debugging
which is a debugging method where code is stopped in runtime, allowing you to interact with the codebase at that point in time. JavaScript has a built in tool we can use for interactive debugging called debugger. We will not go into too much detail on this tool but there is an excellent tutorial on how to use it here
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.
- Clone down this repo (you don't have to fork, as you will not be pushing back up
- Run
git fetch
to bring down the remote branches - To see the remote branches, you will need to use the
remote
flag:git branch -r
- To checkout any of these branches, run the normal
git checkout bug1
command (in this case, fill in the appropriate bug name - You can commit work, but do not push it back up to
origin
bug1
- Should give an idea of places to insert debugger statements as well as how to effectively leverage them
bug2
bug3
Additional bug free behavior: The 'Add em up!' button should be disabled if either input is emptybug4
bug5
Additional bug free behavior: Both inputs should be cleared on submitbug6
Additional bug free behavior: Two floats can be added together correctly