{"id":13715646,"url":"https://github.com/mattphillips/babel-plugin-console","last_synced_at":"2025-04-04T22:03:48.913Z","repository":{"id":66054524,"uuid":"97178489","full_name":"mattphillips/babel-plugin-console","owner":"mattphillips","description":"Babel Plugin that adds useful build time console functions 🎮 ","archived":false,"fork":false,"pushed_at":"2022-09-08T20:01:14.000Z","size":5844,"stargazers_count":295,"open_issues_count":7,"forks_count":14,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-02T06:13:45.408Z","etag":null,"topics":["babel","babel-plugin","console","scope"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/babel-plugin-console","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mattphillips.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/ROADMAP.md","authors":null},"funding":{"github":["mattphillips"]}},"created_at":"2017-07-14T01:11:21.000Z","updated_at":"2024-03-08T09:27:43.000Z","dependencies_parsed_at":"2023-02-21T08:31:19.354Z","dependency_job_id":null,"html_url":"https://github.com/mattphillips/babel-plugin-console","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattphillips%2Fbabel-plugin-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattphillips%2Fbabel-plugin-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattphillips%2Fbabel-plugin-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattphillips%2Fbabel-plugin-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattphillips","download_url":"https://codeload.github.com/mattphillips/babel-plugin-console/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256105,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","babel-plugin","console","scope"],"created_at":"2024-08-03T00:01:01.503Z","updated_at":"2025-04-04T22:03:48.887Z","avatar_url":"https://github.com/mattphillips.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003ebabel-plugin-console\u003c/h1\u003e\n\n  🎮\n\n  Adds useful build time console functions\n\u003c/div\u003e\n\n\u003chr /\u003e\n\n[![Build Status](https://img.shields.io/travis/mattphillips/babel-plugin-console.svg?style=flat-square)](https://travis-ci.org/mattphillips/babel-plugin-console)\n[![Code Coverage](https://img.shields.io/codecov/c/github/mattphillips/babel-plugin-console.svg?style=flat-square)](https://codecov.io/github/mattphillips/babel-plugin-console)\n[![version](https://img.shields.io/npm/v/babel-plugin-console.svg?style=flat-square)](https://www.npmjs.com/package/babel-plugin-console)\n[![downloads](https://img.shields.io/npm/dm/babel-plugin-console.svg?style=flat-square)](http://npm-stat.com/charts.html?package=babel-plugin-console\u0026from=2017-07-17)\n[![MIT License](https://img.shields.io/npm/l/babel-plugin-console.svg?style=flat-square)](https://github.com/mattphillips/babel-plugin-console/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![Roadmap](https://img.shields.io/badge/%F0%9F%93%94-roadmap-CD9523.svg?style=flat-square)](https://github.com/mattphillips/babel-plugin-console/blob/master/docs/ROADMAP.md)\n[![Examples](https://img.shields.io/badge/%F0%9F%92%A1-examples-8C8E93.svg?style=flat-square)](https://github.com/mattphillips/babel-plugin-console/blob/master/docs/EXAMPLES.md)\n[![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square)](https://github.com/kentcdodds/babel-macros)\n\n## Problem\n\nEver find yourself using `console.log` to work out what the heck is going on within your functions?\nAnd then put too many variables into the log and lose context of which value is which variable?\n\n## Solution\n\nThese problems can be solved by a computer at build time. This plugin allows you to inspect a functions parameters, variables, return value and parent scope by adding meaningful logs around the scope of the function - removing the hassle of manual `console.log` statements or debugging.\n\n## Installation\n\nWith npm:\n```sh\nnpm install --save-dev babel-plugin-console\n```\n\nWith yarn:\n```sh\nyarn add -D babel-plugin-console\n```\n\n## Setup\n\n### .babelrc\n\n```json\n{\n  \"plugins\": [\"console\"]\n}\n```\n\n### CLI\n\n```sh\nbabel --plugins console script.js\n```\n\n### Node\n\n```javascript\nrequire('babel-core').transform('code', {\n  plugins: ['console'],\n})\n```\n\n## APIs\n\n### `console.scope()`\n\nOutputs a collection of messages for a functions entire scope\n\n*Note: this API is the same as the standard `console.log`*\n\n#### Syntax\n\n```js\nconsole.scope(obj1 [, obj2, ..., objN]);\nconsole.scope(msg [, subst1, ..., substN]);\n```\n\n#### Parameters\n\n - `obj1 ... objN`\nA list of JavaScript objects to output. The string representations of each of these objects are appended together in the order listed and output.\n\n - `msg`\n A JavaScript string containing zero or more substitution strings.\n\n - `subst1 ... substN`\nJavaScript objects with which to replace substitution strings within msg. This gives you additional control over the format of the output.\n\n## Usage\n\n### Plugin\n\n```js\nconst add100 = (a) =\u003e {\n  const oneHundred = 100;\n  console.scope('Add 100 to another number');\n  return add(a, oneHundred);\n};\n\nconst add = (a, b) =\u003e {\n  return a + b;\n};\n\n      ↓ ↓ ↓ ↓ ↓ ↓\n```\n\n**Browser:**\n\n![Browser console scoping add100](assets/add100-chrome.gif)\n\n**Node:**\n\n\u003cimg alt=\"Node console scoping add100\" src=\"assets/add100-node.png\" width=\"372\"\u003e\n\n### Macros\n\n`babel-plugin-console` also ships with [babel-macros](https://github.com/kentcdodds/babel-macros) supported 🎉\n\nTo use a macro you will need to\n[install and setup](https://github.com/kentcdodds/babel-macros/blob/master/other/docs/user.md) `babel-macros`.\n\nOnce you have enabled `babel-macros` import/require the `scope` macro with:\n\n```js\nimport scope from 'babel-plugin-console/scope.macro';\n// OR\nconst scope = require('babel-plugin-console/scope.macro');\n```\n\n#### Example\n\n*Note: this is the same as the above usage and will generate the same logs - only difference is it uses the scope\nmacro* 😎\n\n```js\n      ↑ ↑ ↑ ↑ ↑ ↑\nimport scope from 'babel-plugin-console/scope.macro';\n\nconst add100 = (a) =\u003e {\n  const oneHundred = 100;\n  scope('Add 100 to another number');\n  return add(a, oneHundred);\n};\n\nconst add = (a, b) =\u003e {\n  return a + b;\n};\n```\n\n\u003e NOTE: There's also a separate package available called [`scope.macro`](https://github.com/kentcdodds/scope.macro)\n\u003e which you can install and use instead if you prefer to type less.\n\n## Inspiration\n\n[This tweet](https://twitter.com/kentcdodds/status/885604009930768384) led to me watching\n[@kentcdodds's](https://github.com/kentcdodds/) live presentation on ASTs. This plugin is an extension on the\n`captains-log` demoed - Thanks Kent!\n\n## Other Solutions\n\nYou could use a debugger with breakpoints to pause the execution of a function and inspect the values of each variable.\n\nThe above `add100` function would look like the following if you used a debugger with a breakpoint:\n\n![Debugging add100](assets/debugger.png)\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/5610087?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eMatt Phillips\u003c/sub\u003e](http://mattphillips.io)\u003cbr /\u003e[💻](https://github.com/mattphillips/babel-plugin-console/commits?author=mattphillips \"Code\") [📖](https://github.com/mattphillips/babel-plugin-console/commits?author=mattphillips \"Documentation\") [🚇](#infra-mattphillips \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/mattphillips/babel-plugin-console/commits?author=mattphillips \"Tests\") | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/611927?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eStephen Bluck\u003c/sub\u003e](http://www.photobox.com)\u003cbr /\u003e[📖](https://github.com/mattphillips/babel-plugin-console/commits?author=stevebluck \"Documentation\") |\n| :---: | :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n## LICENSE\n\nMIT\n","funding_links":["https://github.com/sponsors/mattphillips"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattphillips%2Fbabel-plugin-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattphillips%2Fbabel-plugin-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattphillips%2Fbabel-plugin-console/lists"}