CodeBlanks Logo Icon CodeBlanks
Login Register

What is debugging?

JavaScript course · Beginner · Lesson 123/133

Learn the debugging process and effective approaches.

What is debugging?

Debugging is the process of finding and fixing unexpected behavior in your code. A bug usually shows up as a wrong result, a crash or unexpected behavior. A good process has five steps: reproduce, isolate, understand the cause, fix and verify.

The most important step is reducing the bug to a small, repeatable example. If you cannot reproduce the bug, you cannot prove the fix works.

The five-step process

Let us apply the five steps in order. Reproduce: find the smallest input that triggers the bug. Isolate: narrow down to the line or function that causes it. Understand the cause: compare expected and actual behavior.

Then fix: make the smallest change that targets the root cause. Finally verify: run both the bug case and other cases again to make sure the fix did not break anything else.

Exercise Log values to the console

Define a function called sumPositive(nums). It should loop through nums with for...of and add numbers greater than or equal to 0 to total. Inside the loop, log each value with console.log(num). Then assign the result of sumPositive([3, -2, 5]) to a variable result and log it with console.log(result).

Show example solution 
function sumPositive(nums) {
  let total = 0;
  for (const num of nums) {
    console.log(num);
    if (num >= 0) {
      total += num;
    }
  }
  return total;
}

const result = sumPositive([3, -2, 5]);
console.log(result);

Test yourself

  1. Which is the first step of the debugging process?

    • Reproduce the bug
    • Rewrite all the code
    • Delete every variable
    • Restart the computer
    Show answer

    Reproduce the bug — Correct. You must reproduce the bug first; a bug you cannot repeat is hard to fix.

  2. Complete the process step

    console.log("step 1: reproduce the ____");
    Show answer 
    console.log("step 1: reproduce the bug");

  3. Match the step to its meaning

    Reproduce
    Trigger the bug again with a small input
    Isolate
    Narrow down to the line that causes it
    Fix
    Change the code and remove the bug
    Verify
    Prove that the fix really works

All lessons in Beginner

1 Variables and data types

  1. Declaring variables
  2. Difference between const and let
  3. First data types
  4. Difference between null and undefined
  5. The typeof operator
  6. Summary - Variables and types

2 Operators

  1. Arithmetic operators
  2. Assignment operators
  3. Comparison operators
  4. Logical operators
  5. Operator precedence
  6. Summary - Operators

3 Conditionals

  1. The if statement
  2. else and else if
  3. The switch statement
  4. The ternary operator
  5. Comparison pitfalls
  6. Summary - Conditionals

4 Numbers and Math

  1. Integers and decimals
  2. The Math object
  3. Math.random and Math.min/max
  4. NaN and Infinity
  5. Converting to numbers
  6. Summary - Numbers and Math

5 Project: Calculator

  1. Project: Calculator
  2. Number input and operator selection
  3. Computing the operation
  4. Handling error cases
  5. Project final - Calculator

6 String basics

  1. Creating strings
  2. length and character access
  3. String concatenation
  4. Template literals
  5. Escape sequences
  6. Summary - String basics

7 Loops

  1. The for loop
  2. The while loop
  3. The do...while loop
  4. break and continue
  5. Nested loops
  6. Summary - Loops

8 Array basics

  1. Creating and accessing arrays
  2. Adding elements to arrays
  3. Removing elements from arrays
  4. length and index relationship
  5. Multidimensional arrays
  6. Summary - Array basics

9 Functions

  1. Defining and calling functions
  2. The return statement
  3. Parameters and arguments
  4. Function expressions
  5. Scope basics
  6. Summary - Functions

10 Project: Shopping cart

  1. Project: Shopping cart
  2. Defining the product list
  3. Adding products to the cart
  4. Computing the total
  5. Project final - Shopping cart

11 Array iteration

  1. Looping with forEach
  2. The for...of loop
  3. Searching with indexOf
  4. Checking with includes
  5. findIndex and some
  6. Summary - Array iteration

12 Array transformations

  1. Transforming with map
  2. Filtering with filter
  3. Finding with find
  4. some and every
  5. Reducing with reduce
  6. Summary - Array transformations

13 Objects

  1. Creating objects
  2. Property access
  3. Adding and changing properties
  4. Defining methods
  5. The this keyword
  6. Summary - Objects

14 Project: Quiz app

  1. Project: Quiz app
  2. Defining question objects
  3. Showing questions and getting answers
  4. Computing the score
  5. Project final - Quiz

15 Parameters

  1. Default parameters
  2. The rest parameter
  3. The arguments object
  4. Return value types
  5. Helper functions
  6. Summary - Parameters

16 Boolean logic

  1. Boolean values
  2. Short-circuit evaluation
  3. Nullish coalescing
  4. Optional chaining
  5. Logical assignment
  6. Summary - Boolean logic

17 Type conversion

  1. Explicit type conversion
  2. Implicit type coercion
  3. Difference between == and ===
  4. Truthy and falsy values
  5. Common conversion pitfalls
  6. Summary - Type conversion

18 Project: To-do list

  1. Project: To-do list
  2. Designing the task object
  3. Adding and listing tasks
  4. Completing and deleting tasks
  5. Project final - To-do list

19 Advanced string methods

  1. slice and substring
  2. replace and replaceAll
  3. split and join
  4. trim, padStart, padEnd
  5. Case and includes
  6. Summary - Advanced string methods

20 Console methods

  1. console.log basics
  2. console.warn and console.error
  3. Tables with console.table
  4. console.group and groupEnd
  5. Timing with console.time
  6. Summary - Console methods

21 Errors

  1. try...catch basics
  2. Throwing errors with throw
  3. The Error object
  4. The finally block
  5. Common error types
  6. Summary - Errors

22 Debugging

  1. What is debugging?
  2. Call traces with console.trace
  3. The debugger statement
  4. Checking with console.assert
  5. Common bug patterns
  6. Summary - Debugging

23 Beginner final

  1. Challenge - Calculator
  2. Challenge - Array operations
  3. Challenge - Object management
  4. Challenge - String operations
  5. Challenge - Error handling