babel-plugin-console-groupify

babel-plugin-console-groupify copied to clipboard

Console Groupify plugin for Babel

Scratching another itch with this. Sometimes when I'm developing in React, I wish there was a way to group the console.log statements when used inside the life-cycle functions, and add some kind of visual separation between console.logs in different functions.

This plugin checks for console.logs inside functions, and wraps them inside a console.group/console.groupEnd set, with the function name passed in as a variable for console.group. For example:

function aFunctionDeclaration () {
  console.log('hi');
}

const aFunctionExpression = function () {
  console.log('hi')
}

const anArrowFunction = () => {
  console.log('hi')
}

ends up looking like:

▼ aFunctionDeclaration
  | hi

▼ aFunctionExpression
  | hi

▼ anArrowFunction
  | hi

Combining this with the https://github.com/kgrz/babel-plugin-transform-console-log-variable-names, the printf-debugging becomes way better. For example, in a React component:

class MyComponent extends React.Component {
  componentWillReceiveProps ( nextProps ) {
    console.log(this.props);
    console.log(nextProps);
  }
}

prints out:

▼ componentWillReceiveProps
  | this.props: { prop1: "one" }
  | nextProps: { prop1: "two. what the!" }

Actual screenshot from actual usage:

Note that both these plugins are at a pretty alpha quality.

Usage

Install the module with:

npm install --save babel-plugin-console-groupify

Include it in your babel configuration either via .babelrc or webpack. Here's a .babelrc example:

{
	"presets": [...],
	"plugins": [
		"console-groupify"
	]
}

Known Issues

• A spread operator inside a switch statement seems to be causing issues when used with the babel-transform-object-rest-spread plugin. For instance:

  
  function myReducer (state = {}, action = {}) {
    console.log('hi');
    switch (action.type) {
      case 'some_action':
        return { ...state, key: value }
    }
  }