📚 Topic Summary
Debugging is like being a detective for your code! When something isn't working as expected in your web page, browser developer tools come to the rescue. These tools, built right into browsers like Chrome and Firefox, allow you to inspect the HTML, CSS, and JavaScript of a webpage. You can step through code line by line, examine variables, and identify errors. They are super helpful for fixing problems and making your websites awesome!
Think of it as having X-ray vision for websites. Instead of guessing what's wrong, you can see it clearly and fix it. This worksheet will help you get comfortable with these tools!
🧐 Part A: Vocabulary
Match the terms on the left with their definitions on the right.
| Term |
Definition |
| 1. Console |
A. A programming error that causes unexpected behavior. |
| 2. Element |
B. A tool for viewing and interacting with the HTML and CSS of a webpage. |
| 3. Bug |
C. A tool for displaying messages and errors from your code. |
| 4. Debugging |
D. The process of finding and fixing errors in code. |
| 5. Inspector |
E. A part of an HTML document. |
✍️ Part B: Fill in the Blanks
Use the words below to fill in the missing blanks in the paragraph.
Words: Errors, Console, JavaScript, HTML, Debugging
When your website isn't working, the first step is usually _____________. The browser ______________ is a great place to look for _____________, especially those coming from ______________ code. You can also inspect the ______________ to make sure everything is structured correctly.
🤔 Part C: Critical Thinking
Imagine your webpage displays an image, but it's not showing up. Describe the steps you would take using browser developer tools to find the problem.