Use console.log to look inside your page, read error messages, and try the real Console and inspector in your own browser.
Every web developer keeps the Console open all the time: it is how you find out what your code is really doing.
The Console is a list of messages from your page. console.log(...) writes one, console.warn(...) writes a warning, and console.error(...) writes an error. When something goes wrong the browser writes its own red error there, with the line it happened on.
document.querySelectorAll("p") finds every matching element, not just the first, and its .length says how many.
The Console in this playground is a copy of the real one. Your browser has a real Console and an inspector on every web page: press F12 (or right-click a page and choose Inspect), then open the Console tab.
The hard part is reading the message. An error such as cout is not defined is telling you the name it could not find, and the line: read both before you change anything.
Make your prediction first. Help opens once you've locked it in.
<p id="demo">Hello</p>
<script>
const demo = document.querySelector("#demo");
console.log("The text is:", demo.textContent);
console.log("The length is", demo.textContent.length);
console.warn("Careful!");
console.error("Something is wrong");
</script>
Count the console lines in the script.
Press Run and look at the Console under the page. The script logs what it found: the heading, the first paragraph and its tag name.
<h1>Sports day</h1>
<p>Bring a hat.</p>
<p>Bring water.</p>
<script>
const heading = document.querySelector("h1");
console.log("Heading:", heading.textContent);
const paragraph = document.querySelector("p");
console.log("First paragraph:", paragraph.textContent);
console.log("Is it a paragraph?", paragraph.tagName);
</script>
<h1>Sports day</h1>
<p>Bring a hat.</p>
<p>Bring water.</p>
<script>
const heading = document.querySelector("h1");
console.log("Heading:", heading.textContent);
const paragraph = document.querySelector("p");
console.log("First paragraph:", paragraph.textContent);
console.log("Is it a paragraph?", paragraph.tagName);
</script>
Log, warn and find.
Name and line.
The Console tells you exactly where.
Match each piece with what it does.
The Console shows "cout is not defined". Click the line where the Console says it happened.
Find all, then count.
querySelector gives the first one. Is there a version that gives all of them?
const paragraphs = document.querySelectorAll("p"); then console.log(paragraphs.length).
A loop over the matches.
You already know a loop that visits every item of a list.
for (const p of paragraphs) { console.log(p.textContent); }
Log how many paragraphs the page has.
This ticks when your page has all of the above.
Log the text of every paragraph, one message each.
This ticks when your page has all of the above.
Use console.log to find four facts about the page: its heading, how many paragraphs, how many have the class note, what the note says. Then open the real Console on any web page (press F12, or right-click and choose Inspect) and type document.title and press Enter. Changes you make there only last until you reload the page. Never paste code into the Console because someone online told you to: it runs with your accounts logged in.
That is the end of the course. Next: your own project, the Python web apps course for pages that remember, or the p5.js course to draw and animate.
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. About 45 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
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?"
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.
From here: students build their own page project, or move on to the Python web apps course.