Debugging Intermediate

# Get a snapshot of the page DOM
Claude > Take a DOM snapshot of the current page and tell me
         what form elements are on the page

# Find specific elements
Claude > Run JavaScript to find all buttons on the page and
         list their text content

# Modify the DOM for debugging
Claude > Run JavaScript to add a red border to all elements
         with the class "error" so I can see them

// Claude runs this in the browser via evaluate_script:
document.querySelectorAll('.error').forEach(el => {
  el.style.border = '3px solid red';
  el.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
});

// Get computed styles of an element
const el = document.querySelector('#main-header');
const styles = window.getComputedStyle(el);
JSON.stringify({
  display: styles.display,
  position: styles.position,
  zIndex: styles.zIndex,
});

# Check application state
Claude > Run JavaScript to check what's in localStorage for
         this application

# Inspect React/Vue/Angular state
Claude > Run JavaScript to get the React component state of
         the element with id "user-profile"

# Test a function
Claude > Call the formatPrice function with the value 1999
         and show me the output

# Check for errors
Claude > Run window.onerror to see if there are any unhandled
         errors, and also check if any promises are rejected

# List all console messages
Claude > Show me all console messages from this page

# Filter for errors
Claude > Show me only console errors and warnings. Are there
         any JavaScript errors on this page?

# Watch for new messages
Claude > Click the "Submit" button and then show me any new
         console messages that appeared

# Fill a form to reproduce a bug
Claude > Fill the login form with email "test+special@example.com"
         and password "test123" and click Submit. Then take a
         screenshot and show me any console errors.

# Fill multiple form fields at once
Claude > Fill the registration form with these values:
         - First Name: John
         - Last Name: Doe
         - Email: john@example.com
         - Phone: 555-0123

# Interact with dropdowns and checkboxes
Claude > Select "Express Shipping" from the shipping method
         dropdown and check the "Gift wrap" checkbox

# Debug a layout issue
Claude > Take a screenshot of the page. Is the footer overlapping
         the main content? What CSS issues do you see?

# Check responsive layout
Claude > Resize the page to 375x812 (iPhone size) and take a
         screenshot. Is the navigation menu properly collapsed?

# Before/after comparison
Claude > Take a screenshot, then click the "Toggle Dark Mode"
         button, and take another screenshot. Compare the two.