Element Inspection

What is element inspection?

Element inspection lets you examine and modify HTML elements on a web page in real-time using browser developer tools.

Benefits of element inspection?

• View and modify HTML structure
• Change CSS styles temporarily
• Inspect element properties
• Debug layout issues
• Test changes without code

// Get HTML elements from the page
const gameCanvas = document.getElementById('gameCanvas');
const healthBar = document.querySelector('.health-bar');
const scoreDisplay = document.querySelector('.score');

// Inspect element properties
console.log("Canvas element:", gameCanvas);
console.log("Canvas width:", gameCanvas.width);
console.log("Canvas height:", gameCanvas.height);

// Modify elements
healthBar.style.backgroundColor = 'red';
scoreDisplay.textContent = '1000';

// Get all elements of a type
const buttons = document.querySelectorAll('button');
console.log("Number of buttons:", buttons.length);

What does this code do?

• Uses getElementById() to get elements by ID
• Uses querySelector() to get elements by CSS selector
• Accesses element properties like width and height
• Modifies element styles directly
• Modifies element content
• Uses querySelectorAll() to get multiple elements

// Find and modify specific elements
const allDivs = document.querySelectorAll('div');

// Inspect each element
allDivs.forEach(div => {
    console.log("Div:", div.id, div.className);
    
    // Check computed styles
    const styles = window.getComputedStyle(div);
    console.log("Width:", styles.width);
    console.log("Background:", styles.backgroundColor);
});

// Add event listener for debugging
const button = document.querySelector('button');
button.addEventListener('click', function() {
    console.log("Button clicked!");
    console.log("Event target:", this);
});

What does this code do?

• Gets all div elements on page
• Logs each element’s ID and class
• Inspects computed styles
• Checks actual width and background color
• Adds event listener to button
• Shows how to debug element interactions

Try It Yourself

%%js // CODE_RUNNER: element-inspection const element = document.querySelector(‘body’); console.log(element.tagName); console.log(element.className); const all = document.querySelectorAll(‘*’); console.log(“Total elements: “ + all.length); element.style.backgroundColor = ‘#f0f0f0’;