Students use console.log, warn and error to look inside a page, find elements with querySelectorAll and count them, read an error message for its name and line, and try the real browser Console.
Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.
Predict and Run 10 min · Investigate 10 min · Modify 10 min · Make 15 min
Optional enrichment after the challenge. The playground's Console shows what console.log, warn and error write, and what the browser would say about an error, in plain words first. In the real browser, F12 (or right-click, Inspect) opens the DevTools; the Console tab is the same idea, with more tools. Check the school's browsers allow DevTools before the lesson: some managed devices block it, and the Make step then stays in the playground. Make a point of the safety rule: never paste code into the Console because someone told you to. Changes made in the real Console last until the page is reloaded and do not change the real site.
Reading the error word for word: it names what it could not find. Ask "what is the exact word, and where did you make it?"
| What you will see | A question to ask | The fix |
|---|---|---|
| Nothing appears in the Console. | Was Run pressed, and is there a console.log line? | Press Run and check the spelling of console.log. |
| X is not defined. | Is X spelled the same as the name you made? | Compare the two names letter by letter. |
| Cannot read properties of null. | Did the selector find anything? | Check the selector against the HTML. |
| F12 does nothing. | Is DevTools blocked on this device? | Use the playground Console instead; try right-click, Inspect. |
One possible solution for each task. Other correct programs are fine.
<h1>Sports day</h1>
<p>Bring a hat.</p>
<p>Bring water.</p>
<script>
const paragraphs = document.querySelectorAll("p");
console.log("Paragraphs on the page:", paragraphs.length);
</script>
<h1>Sports day</h1>
<p>Bring a hat.</p>
<p>Bring water.</p>
<script>
const paragraphs = document.querySelectorAll("p");
for (const p of paragraphs) {
console.log(p.textContent);
}
</script>
<h1>Explore me</h1>
<p>One paragraph.</p>
<p class="note">Another, with a class.</p>
<script>
console.log("Title:", document.querySelector("h1").textContent);
console.log("Paragraphs:", document.querySelectorAll("p").length);
console.log("Notes:", document.querySelectorAll(".note").length);
console.log("The note says:", document.querySelector(".note").textContent);
</script>
Stretch: Use the real Console on a favourite site to find a heading with document.querySelector("h1").textContent, and change it to see the page change (until reload).
Support: Give the loop and ask students only for the labels in the messages.
What two things does an error message tell you?
The word it could not make sense of, and the line it happened on.
From here: students build their own page project, or move on to the Python web apps course.