Element Inspection Lesson

First Stage

Element inspection uses browser developer tools to examine the HTML and CSS currently on the page. The inspector shows which element is selected, which styles apply, and which styles are being overridden.

Code Runner Challenge

Element Inspection Lesson

View IPYNB Source

%%js

// CODE_RUNNER: Element Inspection Lesson

const button = document.querySelector(".submit-button");

button.classList.add("is-active");
button.textContent = "Submitted";

console.log(button.className);

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

Second Stage

This is useful when a page looks wrong. The issue might be a missing class, unexpected spacing, inherited color, hidden element, or a style rule that loses to a more specific selector.

Inspection connects the code to what is actually rendered. Instead of guessing why something appears a certain way, the developer can look at the real element in the browser.