Table of Contents

1. Challenge

   Introduction

   Welcome to the Guided: Debugging in JavaScript Lab

   In this hands-on lab, you’ll step into the role of a developer tasked with fixing issues in a small JavaScript application. You’ll work with a pre-built project containing intentional bugs and learn how to identify, diagnose, and resolve them using modern debugging tools.

   You’ll explore two primary debugging approaches:

   • Chrome DevTools — where you’ll set breakpoints, inspect variables, and step through code execution in the browser.
   • VS Code Debugger — introduced conceptually for local environments, to help you understand how browser debugging can be integrated directly into your development workflow.

   Note: The Pluralsight Code Lab environment does not support launching browsers in VS Code’s debug mode. In this lab, you’ll use Chrome DevTools to complete all debugging exercises. You’ll still learn how these same debugging principles apply when using VS Code locally.

   By the end of this lab, you’ll have hands-on experience diagnosing and fixing common JavaScript issues, reading stack traces, and using breakpoints effectively to understand program flow and isolate logic errors.

   ---

   Lab File Structure and How the Application Loads

   The lab project contains the following key files:

   • index.html – The main HTML file that renders the page. It includes a <script type="module" src="./app.js"></script> tag to load the main JavaScript application as an ES module.
   • app.js – The entry point for the JavaScript application. Handles DOM events such as clicking the Load User Data button and coordinates fetching, processing, and displaying user data.
   • data.js – Contains the user data as a JavaScript array of objects. This is where syntax or type errors may exist initially.
   • utils.js – Contains utility functions, such as calculateAverageAge, which process the user data.

   How the Application Loads

   1. When you open index.html in the browser, the <script> tag automatically imports app.js as a module.
   2. app.js imports functions or data from utils.js and data.js as needed.
   3. Clicking the Load User Data button triggers JavaScript functions in app.js to do the following:
      • Read the user data from data.js.
      • Pass it to utility functions in utils.js (like calculating the average age).
      • Render the results dynamically in the page DOM.

   Note: Because the project uses ES modules, the script type is module. This allows you to use import and export statements to organize your code across multiple files. Make sure to keep the web server running (npm start) to load the modules correctly in the browser.

   ---

   Step Overview

   Step 1: Run the Buggy Application

   You’ll start by running the provided JavaScript application in your browser. You’ll observe that the app doesn’t behave correctly due to syntax and logic errors, setting the stage for debugging.

   Step 2: Use Console Logging to Diagnose Problems

   Next, you’ll use console.log() strategically to trace the flow of execution and inspect key variable values. You’ll identify where the data or logic begins to diverge from expectations.

   Step 3: Debug with Chrome DevTools

   You’ll open Chrome DevTools and use the Sources panel to set and manage breakpoints. You’ll learn how to do the following:

   • Step through code execution with Step Into, Step Over, and Step Out.
   • Add conditional breakpoints to stop execution only when specific conditions are met.
   • Inspect the Call Stack and Scope panels to understand variable context and function calls.
   • Enable exception breakpoints to automatically catch and inspect thrown errors.

   Step 4: Resolve the Errors and Confirm the Fix

   You’ll modify the buggy code, re-run the application, and verify that the issues have been resolved. You’ll confirm that the application now behaves as intended and produces the correct output.

   Step 5: Compare Debugging Approaches

   Finally, you’ll explore how these same debugging concepts map to the VS Code Debugger for developers running JavaScript locally. You’ll see how breakpoints, variable inspection, and call stacks work within VS Code’s integrated environment.

   ---

   What You'll Learn

   • How to identify and fix syntax and logic errors in JavaScript
   • How to use console.log() for quick and effective debugging
   • How to use Chrome DevTools to set and manage breakpoints
   • How to step through program execution and inspect variable state
   • How to use exception and conditional breakpoints to isolate specific problems
   • How these debugging concepts translate to the VS Code debugger

   ---

   Prerequisites

   You should have a basic understanding of JavaScript, including how functions, variables, and data structures work. Familiarity with running code in a browser is helpful, but not required.

   Throughout the lab, you’ll run the project using the Terminal tab to start a simple local web server and use Chrome DevTools to explore and fix bugs.

   Tip: If you need assistance at any point, refer to the solution directory. It contains example implementations for each step and shows what a working version of the application should look like.

2. Challenge

   Run the Buggy Application

   Run the Buggy Application

   In this step, you'll run the provided JavaScript application in your browser. This initial run helps you observe the behavior of the application and identify that there are issues to debug.

   You'll start the local server using the Terminal tab, then preview the app in a browser. When you click the Load User Data button, nothing will happen. This is expected because the project contains intentional syntax and logic errors.

   Before diving into debugging, notice that the application does not produce the expected output. This sets the stage for learning how to diagnose problems using Chrome DevTools.

   Note: If at any point you stop the application, restart it so you can continue to see changes to your work.

   ---

3. Challenge

   Explore Chrome DevTools and Fix the First Syntax Error

   Explore Chrome DevTools and Fix the First Syntax Error

   In this step, you'll open Chrome DevTools to inspect your application and identify the first syntax error. DevTools is a set of built-in tools in Chrome that lets you:

   • Inspect HTML and CSS in the Elements tab.
   • View JavaScript errors and log messages in the Console tab.
   • Explore loaded scripts and debug code in the Sources tab.
   • Monitor network requests in the Network tab.

   Opening DevTools:

   1. Open the application in another browser: {{localhost:3000}}.
   2. Press F12 or Right-click → Inspect to open DevTools.
   3. Make sure the DevTools window is docked in a way that you can see both your app and the panels.

   Once open, you should first check the Console tab. You will see an error like:

   Uncaught SyntaxError: Unexpected identifier 'age' (at data.js:3:17)
   

   This syntax error prevents the rest of the scripts (app.js and utils.js) from loading. Until this error is fixed, breakpoints in those files will not work. You can verify these scripts are not loading by opening the Sources tab in Chrome DevTools. When you expand {{localhost:3000}}, you will not see app.js and utils.js. You will only see data.js. This is because it is the only file that loaded before a syntax error was encountered.

   After completing the following task, open the Sources tab in Chrome DevTools and expand {{localhost:3000}}. Without the syntax error, you will see utils.js, data.js, and app.js. Now that all scripts are now loaded, they are all available for debugging and breakpoints within them will function correctly.

4. Challenge

   Debug the “Cannot read properties of undefined” Runtime Error

   Debug the “Cannot read properties of undefined” Runtime Error

   With the syntax error resolved, clicking Load User Data will trigger a new console error:

   Something went wrong: Cannot read properties of undefined (reading 'age')
   

   This is a runtime error indicating that the code is attempting to access a property on undefined. You'll use DevTools to locate and fix the error.

5. Challenge

   Debug Type and Logic Errors with DevTools

   Debug Type and Logic Errors with DevTools

   Clicking Load User Data in the browser now displays:

   Average Age: NaN
   ALICE - Age: 25
   BOB - Age: 30
   CHARLIE - Age: thirty-five
   

   There are no console errors, but the output is incorrect ("thirty-five" is not a number). This affects the average age calculation. In this step, you will use Chrome DevTools to debug type and logic errors.

   ---

   Using Breakpoints in DevTools

   Breakpoints allow you to pause code execution at a specific line so you can inspect variables, the call stack, and see how your program is executing step by step. Here’s how to get started:

   1. Open DevTools → Sources tab.
   2. Navigate to app.js and locate the calculateAverageAge function.
   3. Click the line number where you want to pause execution. A blue marker appears indicating a breakpoint.
   4. Use the stepping controls in the top-right of the Sources panel:
      • Step Over (⏭) – executes the next line of code, but does not enter functions.
      • Step Into (⏬) – enters a function call on the current line.
      • Step Out (⏫) – exits the current function and pauses on the next line in the caller.
   5. Explore the Call Stack panel on the right to see the sequence of function calls that led to the current line.
   6. Inspect the Scope panel to see local variables, closure variables, and global variables at the current execution point.

   Conditional Breakpoints

   Sometimes you only want to pause when certain conditions are met. To create a conditional breakpoint:

   1. Right-click the line number in the Sources tab.
   2. Select Add conditional breakpoint.
   3. Enter a JavaScript expression (e.g., typeof user.age !== 'number').
   4. The debugger will pause only when this condition is true.

   Using the debugger Statement

   You can also manually pause execution by adding the debugger; statement directly in your code:

   function calculateAverageAge(users) {
     debugger;
     // rest of function
   }
   

   When the browser executes this line, it will automatically pause as if you set a breakpoint in DevTools. This is useful if you want to temporarily stop the code without manually adding breakpoints.

   ---

   Get Started by Debugging the Average Age Calculation with DevTools Breakpoints

   Now, you will use Chrome DevTools breakpoints to pause code execution, inspect variables, and trace the logic that produces the incorrect "Average Age: NaN".

   Complete the following:

   1. Open your application and open DevTools → Sources tab.
   2. Navigate to app.js and locate the calculateAverageAge function.
   3. Set a breakpoint on the first line of the function by clicking the line number.
   4. Click the Load User Data button in the browser.
   5. When the debugger pauses at your breakpoint, use the stepping controls:
      • Step Over (⏭) – move to the next line.
      • Step Into (⏬) – enter any function called on this line.
      • Step Out (⏫) – exit the current function and pause in the caller.
   6. Observe the Call Stack panel to see which functions were called leading up to this point.
   7. Inspect the Scope panel to check the values of users and any local variables.
   8. Optionally, use conditional breakpoints to pause only when typeof user.age !== 'number' to isolate problematic data.

   Observations

   • Notice that the loop in calculateAverageAge is accessing one element too far, causing some undefined values to be read.
   • Identify which element of the users array is "thirty-five" and why it affects the average calculation.

   Hint: Focus on how the loop iterates over the array. Are you stopping at the correct number of elements? Logging users[i] inside the loop can help you see where it goes wrong.

   ---

   Now, you will pause execution by adding a debugger; statement directly into your code. This is an alternative to setting breakpoints in DevTools and works anywhere you can edit your source files. By now, you should have used breakpoints and stepping in DevTools (and possibly a debugger; statement in your code) to trace the flow of execution in calculateAverageAge.

   Hopefully, you have discovered that one of the age values in data.js is a string instead of a number. This mismatch causes the calculation of the average age in utils.js to return NaN.

   Next, you will correct the data type so that all age values are numbers, ensuring that the average age calculation works correctly. After you’ve used the debugger; statement to pause execution and inspect variables, it’s good practice to remove it from your code so it does not interrupt normal program execution.

6. Challenge

   Conclusion

   Compare Debugging in Chrome DevTools to VS Code Locally

   While you have used Chrome DevTools in this lab, you can perform a very similar debugging workflow locally in VS Code. If you copy all of the lab files—including index.html, app.js, data.js, utils.js, and the provided launch.json configuration—to your local environment, you will be able to debug the application using VS Code.

   Using the Debugger in Your Local VS Code Editor

   1. Start the local server in the Terminal:

      Run npm start to launch your web server. The debugger in VS Code will attach to this running instance of Chrome, so the application must be running first.

   2. Open the project in VS Code locally.

   3. Navigate to the Run and Debug panel (play icon in the left-hand activity bar).

   4. From the debug configuration dropdown, select the preconfigured launch configuration. If you use the one provided in the lab, it will be named:

      	Launch Chrome (ES Modules)
      

   5. Click the green play button to start the debugger. This will launch Chrome in debug mode (or attach to the existing browser if it is already open) and link it to VS Code.

   Setting Breakpoints

   • In VS Code, open any .js file (like app.js or utils.js).
   • Click next to the line number where you want execution to pause. A red dot will appear, representing a breakpoint—this works just like clicking a line number in the Sources tab in Chrome DevTools.
   • You can also set conditional breakpoints by right-clicking the red dot and entering a condition, such as typeof user.age !== 'number'.

   Stepping Through Code

   • The Step Over, Step Into, and Step Out buttons appear at the top of the Debug panel in VS Code and work the same way as in Chrome DevTools:
   • Step Over (F10) executes the next line without entering function calls.
   • Step Into (F11) enters a function call on the current line.
   • Step Out (Shift+F11) exits the current function and pauses in the calling function.
   • While paused, you can inspect the Call Stack, Scope, and Variables panels to see the state of your application at that moment, just as you would in DevTools.

   Key Points

   • The workflow in VS Code is conceptually identical to DevTools: breakpoints pause execution, step buttons control flow, and variable inspection lets you diagnose issues.
   • Using the provided launch.json configuration automates the setup so you don’t have to manually attach to Chrome.
   • Remember: the application must be running (npm start) before you click the play button in VS Code to link to Chrome.
   • Once configured, this setup allows you to write and debug JavaScript entirely within VS Code, leveraging the same techniques you practiced in DevTools.

   Note: In the Pluralsight Code Lab environment, launching a browser from VS Code is not supported, so all debugging is performed in Chrome DevTools. The concepts and techniques you learned—breakpoints, stepping, inspecting scope, and call stacks—translate directly to debugging locally in VS Code.

   ---

   Conclusion

   Congratulations on completing the lab!

   You've now successfully debugged a JavaScript application and used developer tools to investigate and fix errors. Along the way, you:

   • Ran a buggy application and observed its unexpected behavior
   • Used Chrome DevTools to inspect errors and explore the Console, Sources, Call Stack, and Scope panels
   • Set breakpoints, stepped through code, and used conditional breakpoints to isolate issues
   • Added debugger; statements to pause execution directly in the code
   • Diagnosed and fixed syntax, runtime, and type errors in JavaScript
   • Corrected data type mismatches that affected calculations

   Together, these techniques form the foundation of effective JavaScript debugging and problem-solving in real-world applications.

   You now have the skills to systematically identify and fix issues in JavaScript code, whether you are working on a small module or a large-scale application.

   Ready to Take it Further?

   Try adding new features, introducing additional data validations, or experimenting with different debugging techniques to deepen your understanding. Happy debugging!

   ---