JavaScript Console & Debugging Tutorial | CPSC1520 Assignment Help

Introduction: Why the Console Is Your Best Friend

If you're taking CPSC1520 – JavaScript 1, you've probably heard that the console is a great tool to see what's going on in your web page. But did you know it's also the fastest way to fix typos and test code in real time? In this tutorial, we'll walk through the exact steps from your assignment: using the console to correct HTML content, linking a JavaScript file, and pushing your work to GitHub. Think of the console as your personal debugging assistant – like having a spell-checker for your code.

Step 1: Accessing the Console

Before we fix anything, you need to open the console. Here are the most common ways:

Right-click anywhere on the page and select Inspect, then click the Console tab.
Press Ctrl+Shift+J (Windows) or Cmd+Option+J (Mac).
Press F12 and switch to the Console tab.
From the Chrome menu: More Tools > Developer Tools > Console.

Once open, you'll see a blank area where you can type JavaScript commands. It's like a live chat with your webpage.

Step 2: Fix Typos in the Console

Your assignment asks you to select an h1 with id app-title and a paragraph with class app-description, then fix their text. Let's do it in the console first.

Select Elements with querySelector

Use document.querySelector to grab the elements. For the h1, we use #app-title (because it's an id). For the paragraph, we use .app-description (because it's a class).

let title = document.querySelector('#app-title');
let description = document.querySelector('.app-description');

Now, check what's inside by typing title and description in the console. You'll see the current text.

Change the Text with innerText or innerHTML

To fix the typos, reassign the innerText property. For example:

title.innerText = 'Welcome to My App';
description.innerText = 'This is a corrected description.';

If your original text had typos like Welcom or descritpion, you've just fixed them! The console updates the page instantly.

Pro tip: Use innerHTML if you need to include HTML tags (like <strong>), but for plain text, innerText is faster and safer.

Step 3: Move Your Fixes to main.js

Console changes disappear when you refresh the page. To make them permanent, copy your code into a main.js file and link it to your HTML.

Create main.js

In your project folder, create a file named main.js. Add a console.log to confirm it's linked:

console.log('js file successfully linked.');

Then add the same selection and text-changing code from the console:

let title = document.querySelector('#app-title');
let description = document.querySelector('.app-description');
title.innerText = 'Welcome to My App';
description.innerText = 'This is a corrected description.';

Link main.js to Your HTML

In your HTML file (usually index.html), add a <script> tag right before the closing </body> tag:

<script src="main.js"></script>

Now when you refresh the page, the console will show js file successfully linked. and the typos will be fixed automatically.

Step 4: Push to GitHub

Your assignment requires you to push code to GitHub. If you haven't already, accept the assignment link from your instructor. Then clone the repository:

git clone <your-repo-url>
cd <repo-folder>

Copy your main.js and updated index.html into the repo folder. Then run:

git add .
git commit -m "Fixed typos and linked JavaScript file"
git push

After pushing, go to your repository on GitHub, click Pull Requests > Feedback to see your commit.

Common Mistakes (and How to Avoid Them)

Typos in console commands: If you type document.queryselector (lowercase 's'), it will error. Always use querySelector with capital S.
Forgetting to link the JS file: If your console.log doesn't appear, check that the <script> tag points to the correct file path.
Git push fails: Make sure you've added and committed before pushing. Use git status to see what's staged.

Why This Matters (Beyond the Assignment)

Knowing how to use the console and debug JavaScript is a skill you'll use in every web project. Whether you're building a personal website, a school project, or even a simple app, the console helps you find errors fast. Plus, version control with Git is industry standard – many tech companies use it daily.

Trend Connection: Debugging Like a Gamer

Think of debugging like finding glitches in a video game. When a game character gets stuck, developers use tools (like the console) to teleport them out. In your case, the console is your cheat code to fix text errors and see live results. Just like gamers use patches to fix bugs, you use innerText to patch your webpage.

Final Checklist

✅ Console opens without errors
✅ h1 and paragraph text are corrected
✅ main.js linked and console.log visible
✅ Code pushed to GitHub

Follow these steps, and you'll earn full marks on your CPSC1520 assignment. Happy coding!