Read error messages! Sometimes error messages are awesome. Sometimes not so much. Be aware that in the chrome dev tools console, the right hand side of an error line often shows you the file name and line number that the error came from.
The error source above was script.js, line 18.
Tips for console logging:
-
Write descriptive log messages.
// WORSE console.log("test"); // BETTER console.log("inside add button click event - this is ", this);
-
Don't reuse the same log message in multiple places; it will be hard to tell where messages came from once we get out of the chrome dev tools.
-
When adding an object to a string log message, use a comma instead of a plus sign. When you use a plus sign, the object is converted to a string (poorly, in most cases). With the comma, the object is not converted.
var animals = {a:"aardvark", b:"baboon"}; // WORSE console.log("animals is " + animals); // logs "animals is [object Object]" // BETTER console.log("animals is ", animals); // logs "animals is { a: 'aardvark', b: 'baboon' }"
debugger
is a JavaScript tool for debugging! It lets you pause your code on a specific line, wherever you write the keyword debugger
. While it's paused, you can examine the scope, the call stack, and other useful information. Across many languages and tools, interactive pauses like this are called "breakpoints".
Chrome's "Sources" tab provides a nice Graphical User Interface, or GUI (pronounced "gooey") for the debugger tool.
Here's an example you can use to explore recursion with debugger
:
function count(n){
console.log('counting down...');
console.log(n);
debugger;
if (n > 0) {
count(n-1);
} else {
console.log('at the bottom!');
}
console.log('counting up...');
console.log(n);
debugger;
}
count(3);
If you'd like your dev tools in a separate window from your browser, click and hold the dev tools positioning icon to undock them.
Chrome dev tools also lets you set "conditional breakpoints" that pause whenever some trigger occurs, like "pause whenever a click event fires" or "pause whenever a request is made". You set these through the Sources tab, in the breakpoint dropdowns. More details (and images!) are available in Google's how to add breakpoints.
Clone this repository! Solution in solution branch.
The code in scripts/app.js has comments that list some problems with the sample project website. There are currently some bugs, but it should look like this:
Update the project code to fix the problems described in the comments. Note: the last one (alerting 0-4) is a stretch.