Skip to content

Instantly share code, notes, and snippets.

@PickleBoxer
Created August 26, 2025 11:00
Show Gist options
  • Select an option

  • Save PickleBoxer/b1a546c4986c4c3717e6bc960157ad1e to your computer and use it in GitHub Desktop.

Select an option

Save PickleBoxer/b1a546c4986c4c3717e6bc960157ad1e to your computer and use it in GitHub Desktop.
Browser console nested button detection
// More comprehensive check with visual highlighting
function findNestedButtons() {
const allButtons = document.querySelectorAll('button');
const issues = [];
allButtons.forEach(button => {
const nestedButtons = button.querySelectorAll('button');
if (nestedButtons.length > 0) {
issues.push({
parentButton: button,
nestedButtons: Array.from(nestedButtons),
parentText: button.textContent?.trim() || 'No text',
parentClasses: button.className
});
// Highlight problematic elements
button.style.border = '3px solid red';
button.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
nestedButtons.forEach(nested => {
nested.style.border = '2px solid orange';
nested.style.backgroundColor = 'rgba(255, 165, 0, 0.2)';
});
}
});
console.log('Nested button issues found:', issues.length);
issues.forEach((issue, index) => {
console.group(`Issue ${index + 1}: "${issue.parentText}"`);
console.log('Parent button:', issue.parentButton);
console.log('Parent classes:', issue.parentClasses);
console.log('Nested buttons:', issue.nestedButtons);
console.groupEnd();
});
return issues;
}
// Run the function
const nestedButtonIssues = findNestedButtons();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment