Assignment: Debugging JavaScript in the Browser
Objective:
Students will practice debugging JavaScript by identifying and fixing errors in a provided
HTML file. This assignment will help students understand common JavaScript errors and
learn to use browser developer tools e ectively.
Instructions
Step 1: Download the File
1. Download the file [Link] from the instructor’s GitHub repository:
o Plain text link:
[Link] es/rbste [Link]/blob/main/DebugJavaScript.
html
o Click the Raw button on the GitHub page to access the plain text version of
the file.
2. Save the file to your computer.
Step 2: Open the File in a Browser
1. Open the [Link] file in a web browser (e.g., Chrome, Firefox, or
Edge).
2. Open the browser developer tools:
o Windows/Linux: Press Ctrl + Shift + I or F12.
o Mac: Press Cmd + Option + I.
Step 3: Check for JavaScript Errors
1. Navigate to the Console tab in the developer tools.
2. Look for error messages related to the JavaScript code.
3. Take a screenshot of the error messages displayed in the console.
Step 4: Attempt to Fix the Errors
DO NOT USE ASSISTIVE AI FOR THIS ASSIGNMENT
1. Open the [Link] file in a text editor (e.g., Notepad++, VS Code, or
Sublime Text).
2. Identify the JavaScript errors and correct them. Examples of potential issues to look
for:
o Syntax errors (e.g., missing semicolons or braces).
o Undefined variables or functions.
o Incorrect DOM references.
o Logical errors in the code.
Remember to read the error messages you receive. They tell you where errors are,
and often give hints on how to fix them.
3. Save your changes and refresh the file in the browser to test your fixes. Fixing errors
sequentially will help you find all of them.
Submission
1. Submit the following to Blackboard:
o The screenshot of the error messages from the browser console before
making any fixes.
o The link to the corrected [Link] file in your GitHub
Repository.