WDD Learning Modules

Debugging - Ponder activities.

Preparation

You will need your editor open with some html and the code:

html 

<!-- debugging.html -->
<html>
  <head>
    <title>Debug Activities</title>
    <script src="debugging.js"></script>
  </head>
  <body></body>
</html>

Javascript 

const PI = 3.14;
const radius = 3;
let area = 0;
area = radius * radius * pi;
radius = 4;
area = radius * radius * pi;

These activities will be most effective if you try them first before you look at the solution. And after you do look at the solution...do not copy and paste the code. Read through it, try to understand what it is doing...then go fix your code.

Activity 1

We have a few errors to fix in the code above.

  1. First we must address the initial syntax error: "pi is not defined". Why are we getting that error? Review the code and fix it.
  2. Once that error is fixed we will find that there is another syntax error: "Assignment to constant variable." Fix this one as well.
  3. After that the code runs with no errors. But there is no indication of whether it worked correctly. There are two ways we can get more visibility into how our code is running. The first is by inserting some logging in at key points. Insert some console.log() statements to review what is happening.
  4. The second way is to use a debugger. Open the developer tools in your browser, goto the Sources tab, make sure the Javascript file is selected, and set a breakpoint on line one of the code (Click on the number 1 next to the first line). Refresh the page and you will see the debugger stop at that line. Now you can step over the code line by line and see what is happening.
Solution 1 
const PI = 3.14;
let radius = 3;
let area = 0;
area = radius * radius * PI;
console.log("Area1:", area);
radius = 4;
area = radius * radius * PI;
console.log("Area2:", area);

Activity 2

You may have noticed that have repeated lines of code in our example. This is usually a sign that we need a function. Let's refactor our code (programmer speak for change) by adding a function that will calculate the area of a circle if given a radius value.

  1. Create a function called circleArea. In Javascript a simple function takes the form:
function circleArea(radius) {
  // code to complete our task here
}
  1. Refactor (change) our code to make the function work. Use the code below:
const PI = 3.14;
let area = 0;
function circleArea(radius) {
  const area = radius * PI;
}
area = circleArea(3);
console.log(area);
  1. If you use the function above, you will notice that we get 'undefined' as our result. We have another error. but this one is not showing up in the Console. Put a breakpoint on the line where we use our function. Then refresh the page and this time instead of Step Over use the Step Into button (It will be an arrow pointing down right next to Step Over)
  2. See if you can figure out what is wrong and Fix it.
  3. Once you have solved that there is one more logic error. See if you can find it!
Solution 2 
const PI = 3.14;
// let radius = 3;
let area = 0;

function circleArea(radius) {
  const area = radius * radius * PI;
  return area;
}

area = circleArea(3);
console.log("Area1:", area);
// radius = 4;
area = circleArea(4);
console.log("Area2:", area);