An alternate reality or a parallel universe of Renderland where bugs rule and we need to understand how to deal with them!

I. Introduction A. Briefly introduce the focus of the article: common programming bugs and how to fix them B. Recap the previous article and the hero's arrival on the planet

II. Missing parameters A. Define what a missing parameter is and how it can cause bugs B. Provide examples of missing parameters C. Discuss strategies for avoiding missing parameters and how to handle them when they occur D. Provide code examples

III. Referencing undefined values A. Define what an undefined value is and how it can cause bugs B. Provide examples of referencing undefined values C. Discuss strategies for avoiding referencing undefined values and how to handle them when they occur D. Provide code examples

continue with this example

// Get user info
function getUserInfo() {
  console.log("Please enter your name:");
  let name = prompt();

  // Validate input
  if (!name) {
    console.log("Invalid input. Please try again.");
    getUserInfo(); // Call function again to retry input
    return;
  }

  console.log("Please enter your age:");
  let age = prompt();

  // Validate input
  if (!age || isNaN(age)) {
    console.log("Invalid input. Please try again.");
    getUserInfo(); // Call function again to retry input
    return;
  }

  console.log(`Hello ${name}, you are ${age} years old.`);
// pass id which might be async
  getUserLocation(); // Call next function
}

// Get user location
function getUserLocation() {
  console.log("Please enter your city:");
  let city = prompt();

  // Validate input
  if (!city) {
    console.log("Invalid input. Please try again.");
    getUserLocation(); // Call function again to retry input
    return;
  }

  console.log(`You are located in ${city}.`);

// async call to location's API
  getUserPreferences(); // Call next function
}

// Get user preferences
function getUserPreferences() {
  console.log("Please enter your preferred gender:");
  let gender = prompt();

  // Validate input
  if (!gender) {
    console.log("Invalid input. Please try again.");
    getUserPreferences(); // Call function again to retry input
    return;
  }

  console.log(`Your preferred gender is ${gender}.`);
  console.log("Onboarding complete!"); // Finished onboarding
}

// Call first function to start onboarding process
getUserInfo();

IV. Type checks and type mismatches A. Define what type checks are and how they can prevent bugs B. Provide examples of type mismatches and how they can cause bugs C. Discuss strategies for performing type checks and handling type mismatches D. Provide code examples

V. Async issues A. Define what async issues are and how they can cause bugs B. Provide examples of async issues C. Discuss strategies for avoiding async issues and how to handle them when they occur D. Provide code examples

VI. Dennis Ritchie helps the hero become fluent in the language used on the planet A. Explain how the hero is learning to navigate the planet's code more effectively with Ritchie's guidance B. Provide examples of how Ritchie helps the hero address the common programming bugs discussed in the article C. Conclude with the hero feeling more confident in their ability to navigate the planet's code

VII. Conclusion A. Recap the main points of the article B. Tease the next article in the series, which will focus on debugging techniques C. Encourage readers to leave comments and share their own programming bug stories

Debugger Training - First Act

Flavors

TypeScript

Flow

checklists

gotchas!!!

Console.dir

  const wrapper = document.getELementById("_next");
   console.log(wrapper)
  const label = 'The ancinent debugging techniques are';
  console.dir(label);

This will output the following:

Useful for displaying related information. For instance, you could use it to print out nested values or the values in an array of objects.

Filtering Levels

There are several options to filter logs such as level, source, text or regular expression.

Popular frontend frameworks and libraries make use of these logging levels to display different types of messages. For example, React does:

• Use console.error to highlight errors in code, they often include a stack trace to help find issues quickly.

• Use warn to display warnings such as when you forget to include dependencies in an useEffect array.

• They use source based filtering to show you where each console.log came from.

✅ Console Best Practices & Tips

• Use the appropriate logging level so you could easily filter and search for logs.

• Clicking on the source of a log will take you to the file the log lives in.

Debugger Training 💻

After learning the basic debugging principles and passing the console exam, the hunters now move on to the second stage of the training. In this stage, they will learn how to use a very powerful weapon known as a debugger. A debugger consists of the following:

A debugger is a program that pauses the execution of a running application i.e it takes a snapshot of the application at that given moment.

Let's create a small svelte program that reverses strings.

<script>
  /**
   * @type {string[]}
   */
  let reversed;
  /**
   * @param {string} str
   */
  function reverseArrayStrings(str) {
    reversed = str.split(" ").map((word) => word.split("").reverse().join(""));
  }
  let str = "Sometimes in life the Gods smile upon you my friend!";

  // console.log(split);
</script>

<svelte:head>
  <title>Home</title>
  <meta name="description" content="Svelte demo app" />
</svelte:head>

<div class="text-column">
  <h1>Planet of The Bugs</h1>

  <p>{str}</p>

  <p>{reversed?.length > 0 ? reversed : null}</p>
  <button on:click={() => reverseArrayStrings(str)}>Reverse String</button>
</div>

Breakpoints

A breakpoint is a signal to the debugger that tells it to pause the execution of the program at a specific point.

The Chrome DevTools debugger in our current app has two breakpoints created, which are made by clicking on a line of code to stop the code execution at that point. The red highlighted section shows the current active breakpoints on the page.

• This allows the developer to inspect the program's state at that point.

• Step through the code line by line to identify bugs.

CallStack & Execution Flow

Let's use a simpler example here. We will take a dating site as an example. Specially the onboarding flow.

• Get user info

• Get user location

• Get user preferences

// Get user info
function getUserInfo() {
  console.log("Please enter your name:");
  let name = prompt();

  // Validate input
  if (!name) {
    console.log("Invalid input. Please try again.");
    getUserInfo(); // Call function again to retry input
    return;
  }

  console.log("Please enter your age:");
  let age = prompt();

  // Validate input
  if (!age || isNaN(age)) {
    console.log("Invalid input. Please try again.");
    getUserInfo(); // Call function again to retry input
    return;
  }

  console.log(`Hello ${name}, you are ${age} years old.`);
// pass id which might be async
  getUserLocation(); // Call next function
}

// Get user location
function getUserLocation() {
  console.log("Please enter your city:");
  let city = prompt();

  // Validate input
  if (!city) {
    console.log("Invalid input. Please try again.");
    getUserLocation(); // Call function again to retry input
    return;
  }

  console.log(`You are located in ${city}.`);

// async call to location's API
  getUserPreferences(); // Call next function
}

// Get user preferences
function getUserPreferences() {
  console.log("Please enter your preferred gender:");
  let gender = prompt();

  // Validate input
  if (!gender) {
    console.log("Invalid input. Please try again.");
    getUserPreferences(); // Call function again to retry input
    return;
  }

  console.log(`Your preferred gender is ${gender}.`);
  console.log("Onboarding complete!"); // Finished onboarding
}

// Call first function to start onboarding process
getUserInfo();

Step-through execution:

This feature allows the developer to step through the code one line at a time, examining the state of variables and the program as a whole as they go.

Variable inspection:

Debugging environments usually provide a way for developers to view the values of variables and data structures at any point in the program's execution.

Call stack inspection:

Debuggers also allow developers to examine the call stack, which shows the sequence of function calls that led to the current point in the program's execution. This helps developers trace the flow of control and identify where bugs may be occurring.

Log analysis:

Debugging environments may also provide tools for analyzing log files, which can help developers identify issues that are difficult to reproduce or diagnose.