In this lecture we talk about debugging practices.
Debugging
is the process of identifying and removing errors from software.
This term originated in 1940 from Admiral Grace Hopper who was working on the Mark II computer at Harvard and found a Moth inside of the machine. When they removed the moth they declared they were "debugging" the system.
Debugging is a very important skill to have because you will never write any code that is 100% "bug free".
We are always adding new bugs to our code when we start adding new features or change around the architecture or design. Without the ability to find and remove the bugs inside of our code, we will never write good software.
The better you are at reasoning about code and figuring out why it is broken, the more valuable & efficient you will be as a programmer.
function addNumbers(num1, num2) {
return num1 + num2;
}
addNumbers(4, "5");
Above is an example problem:
-
What is the result from this function execution?
-
Where is the bug inside the code?
-
How did you come to that conclusion?
Now here is a problem that is a bit more complex:
var mySingleton = function() {
function init() {
function privateMethod() {
console.log("I am private");
}
var privateVariable = "Im also private";
var privateRandomNumber = Math.random();
return {
publicMethod: function() {
console.log("The public can see me!");
},
publicProperty: "I am also public",
getRandomNumber: function() {
return privateRandomNumber;
}
};
}
return {
getInstance: function() {
if (instance) {
instance = init();
}
return instance;
}
};
};
var mySingleton = singletonCreator();
var singleA = mySingleton.getInstance();
var singleB = mySingleton.getInstance();
console.log(singleA.getRandomNumber() === singleB.getRandomNumber());
Can you find the bug?
This problem was just trying to take a look at this can take forever to figure out what's going on.
This can be very inefficient especially when we start dealing with very complex data and algorithms. This was just to show you that some problems can be quick to look at and others can take a very long time.
Thankfully we have a ton of tools at our disposal to use when it comes to debugging.
Chrome has some amazing tools that we can use to help us development. It would be really dumb to try to create something without using these tools.
You NEED to learn how to use them.
We can practice use the following tools with Joe's awesome repo: https://github.com/joeblank/debug-lecture-helper
If there is an error that is being thrown on the client side (front end), the error will appear in the dev tools console
.
This can sometimes be very descriptive and tell you exactly where the error is or can sometimes be very vague.
Go ahead and checkout to branch 1 on Joe's project to practice.
Anytime we are checking up on successful or unsuccessful http requests, we should be using the network
tab.
The three main parts of the sources tab include the
file navigator, the
code editor, and the
debugging pane`.
The file navigator will show us the files being used for the site.
The code editor will show you the actual code for the files.
The debugging pane allows us to put break points into our code rather than always just console logging.