Introduction

Tame the JS console by automagically grouping console messages.

• Simple: Drop in replacement for the full console API.
• Automatic: Groups messages by each Event Loop.
• Easier Debugging: Makes it much clearer to see what is going on in your app.
• Adds Time Stamps: Each grouping can be timestamped, to help better see what is happening.
• Reliable: Uses a Microtask to ensure the message group is always closed on time.

A more readable console output in a couple of minutes.

Above created by example.js.

Install

Install auto-console-group via npm.

npm install auto-console-group

Setup

The createAutoGroupConsole() creates a console object with all the same methods as the regular console object.

import createAutoGroupConsole from 'auto-console-group'

const groupConsole = createAutoGroupConsole({ options })

// All console methods are reflected on groupConsole
groupConsole.log('Log message')
groupConsole.table(['foo', 'bar'])
groupConsole.count('Counter')

If their is an uncaught error in you code, the logs leading up to the error will be displayed in a group directly after the error is logged to the console.

Options

The following options can be passed to createAutoGroupConsole.

{
  label: 'label',          // First part of the group heading
  collapsed: false,        // Show group expanded or collapsed
  defaultEvent: 'event',   // Second part of the group heading, shown in bold
  showTime: true,          // Display time in the group heading
}

When the collapsed option is set to true, the group will automatically open if a warning or error is included in the group.

Methods

In addition to the full Console API, the following methods are also available.

endAutoGroup()

Force the current group to output to the browser console. Any logs created after this call will appear in a new group.

event(string)

Set the event type part of the group heading for the current event loop.

purge()

Remove all messages in the current output queue.

---

© 2025 David J. Bradshaw - License MIT