Problem

Ever find yourself using console.log to work out what the heck is going on within your functions? And then put too many variables into the log and lose context of which value is which variable?

Solution

These problems can be solved by a computer at build time to inspect a functions parameters, variables, return value and parent scope and add meaningful logs around the scope of the function. This solution is similar to adding breakpoints and diving into a debugger.

Installation

With npm:

npm install --save-dev babel-plugin-console

With yarn:

yarn add -D babel-plugin-console

Setup

.babelrc

{
  "plugins": ["console"]
}

CLI

babel --plugins console script.js

Node

require('babel-core').transform('code', {
  plugins: ['console'],
})

APIs

console.scope()

Outputs a collection of messages for a functions entire scope

Syntax

console.scope(obj1 [, obj2, ..., objN]);
console.scope(msg [, subst1, ..., substN]);

Parameters

• obj1 ... objN A list of JavaScript objects to output. The string representations of each of these objects are appended together in the order listed and output.

• msg A JavaScript string containing zero or more substitution strings.

• subst1 ... substN JavaScript objects with which to replace substitution strings within msg. This gives you additional control over the format of the output.

Usage

const add100 = (a) => {
  const oneHundred = 100;
  console.scope('Add 100 to another number');
  return add(a, oneHundred);
};

const add = (a, b) => {
  return a + b;
};

      ↓ ↓ ↓ ↓ ↓ ↓

const add100 = a => {
  const oneHundred = 100;
  console.log('Add 100 to another number');
  console.groupCollapsed('(1:6) const add100 = (a) => {...}');
  console.groupCollapsed('Parameters');
  console.log('(1:16)', 'a:', a);
  console.groupEnd('Parameters');
  console.groupCollapsed('Variables');
  console.log('(2:8)', 'oneHundred:', oneHundred);
  console.groupEnd('Variables');
  console.groupCollapsed('Return');
  console.log('(4:9)', add(a, oneHundred));
  console.groupEnd('Return');
  console.groupCollapsed('Script');
  console.log('(1:6)', 'add100:', add100);
  console.log('(7:6)', 'add:', add);
  console.groupEnd('Script');
  console.groupEnd('(1:6) const add100 = (a) => {...}');

  return add(a, oneHundred);
};

const add = (a, b) => {
  return a + b;
};

The generated scope logs for the above function will look like this in a browser:

It would like the following if you used a debugger with a breakpoint:

Inspiration

This tweet led to me watching @kentcdodds's live presentation on ASTs. This plugin is an extension on the captains-log demoed - Thanks Kent!

Contributors

Matt Phillips 💻 📖 🚇 ⚠️

LICENSE

MIT