Chrome DevTools / console.log Expand All / Collapse All

README.md

Hacking Chrome DevTools

You ever have a bunch of console.log instances you wish you could just expand or collapse at once? Well this will do that.

You of course need to open your DevTools Console, on a mac that shortcut is ⌘ (Command) + ⌥ (Shift) + J

Now hit ⌘ (Command) + ⌥ (Shift) + J again to open DevTools for your DevTools.

Then run the code below. If you run it once, it will collapse everything it can. If you run it again, it will expand.

Before (Default DevTools Output):

After (Running the Script Below):

Result:

script.js

// Alias of document.querySelectorAll() is $$
// We want just the top level of messages. We don't want to click on their children.
$$('.console-group-messages > .console-message-wrapper').forEach(e => {
  let element = getEventListeners(e);
  
  // If we have a click eventListener.
  if (typeof element.click == 'object') {
    // Click on the thing to collapse or expand.
    element.click[0].listener(true);
  }
});