DevTools Console Hacks

main.js

// DevTools Console Quick Bites: 10 Useful JavaScript Snippets for Developers

// 1. Click all checkboxes on the page
[...document.querySelectorAll('input[type="checkbox"]')].forEach(cb => cb.click());

// 2. Click all checkboxes with delay (helps when framework needs reactivity)
(async () => {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (const cb of checkboxes) {
    cb.click();
    await new Promise(res => setTimeout(res, 200));
  }
})();

// 3. Copy all text content from a page
copy(document.body.innerText);

// 4. Monitor network requests (log all fetch URLs)
(function() {
  const origFetch = fetch;
  window.fetch = async (...args) => {
    console.log('Fetching:', args[0]);
    return origFetch(...args);
  };
})();

// 5. Highlight all elements with a specific class
[...document.querySelectorAll('.target-class')].forEach(el => el.style.backgroundColor = 'yellow');

// 6. Detect all event listeners on a given element
getEventListeners(document.querySelector('#some-id'));

// 7. Log all DOM mutations (for debugging reactive UIs)
const observer = new MutationObserver(console.log);
observer.observe(document.body, { attributes: true, childList: true, subtree: true });

// 8. Simulate a mouse click on an element
const el = document.querySelector('button');
el && el.click();

// 9. Get all form values as a JSON object
JSON.stringify(Object.fromEntries(new FormData(document.querySelector('form'))));

// 10. Breakpoint on DOM element changes (Chrome only)
// Right click on element in Elements tab > Break on > Subtree modifications
// No code needed, just a useful trick

// Bonus: Freeze time in animations for visual debugging
setInterval(() => {}, 1e7);