Repository files navigation

Scratching another itch with this. Sometimes when I'm developing inReact, I wish there was a way to group theconsole.log statements whenused inside the life-cycle functions, and add some kind of visualseparation betweenconsole.logs in different functions.

This plugin checks forconsole.logs inside functions, and wraps theminside aconsole.group/console.groupEnd set, with the function namepassed in as a variable forconsole.group. For example:

functionaFunctionDeclaration(){console.log('hi');}constaFunctionExpression=function(){console.log('hi')}constanArrowFunction=()=>{console.log('hi')}

ends up looking like:

▼ aFunctionDeclaration  | hi▼ aFunctionExpression  | hi▼ anArrowFunction  | hi

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

classMyComponentextendsReact.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.

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"]}

• A spread operator inside a switch statement seems to be causing issueswhen used with thebabel-transform-object-rest-spread plugin. Forinstance:

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