https://github.com/kgrz/babel-plugin-console-perf

Babel plugin that wraps a function body with console.profile/profileEnd functions that can be used to profile JS functions
https://github.com/kgrz/babel-plugin-console-perf

Last synced: about 2 months ago
JSON representation

Babel plugin that wraps a function body with console.profile/profileEnd functions that can be used to profile JS functions

• Host: GitHub
• URL: https://github.com/kgrz/babel-plugin-console-perf
• Owner: kgrz
• Created: 2017-10-16T14:26:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-23T06:33:14.000Z (almost 7 years ago)
• Last Synced: 2024-02-14T23:38:26.342Z (11 months ago)
• Language: JavaScript
• Homepage:
• Size: 35.2 KB
• Stars: 32
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
babel-plugin-console-perf

=========================

A babel plugin to simplifies the usage of profiling in JS functions. I

got this idea when browsing documentation on various `console` methods,

and discovered that there's a `console.profile/profileEnd` function that

automatically starts and stops the JavaScript profiler for a particular

region inside the function. I wanted to make this as seamless as

possible.

**Note: Alpha quality program. Use with caution, and _never_ use this

to production**

Usage

-----

1. Install the plugin using `npm install --save-dev babel-plugin-console-perf`

2. Add the plugin `console-perf` to your `.babelrc`

3. Add a comment `// profile` in the function you want to profile

4. Open the JS console in your browser, and navigate to the profiling

   tab. Note that on latest Chrome (Canary is what I generally use) the

   tool has been moved into the "more tools" section. This is not the

   Performance tab, by the way.

5. Load the page which calls the function where you added comment.

That should record individual profiles for each of the runs in case the

function gets called multiple times.

Here's a video of the usage in action: [console-perf-demo](https://www.dropbox.com/s/3o02rkyhzmx6pfz/console-perf-demo-complete.mov?dl=0)

Will try to put up a GIF as and when I get a chance.

If there are `return` statements, it checks to see if there are

statements/expressions there, and then re-assigns them to variables and

returns the variable instead. This ensures that the

statements/expressions are also profiled. For instance:

```javascript

function getHash () {

  // profile

  const a = 42;

  return heavyCryptoFunction({ key: a });

}

```

gets converted to:

```javascript

function getHash () {

  console.profile('getHash');

  const a = 42;

  const hash = heavyCryptoFunction({ key: a});

  console.profileEnd();

  return hash;

}

```

instead of:

```javascript

function getHash () {

  console.profile('getHash');

  const a = 42;

  console.profileEnd();

  return heavyCryptoFunction({ key: a });

}

```

which misses out on profiling a potentially CPU-heavy function.

----------------

Checkout other `console`-based plugins that I wrote:

[babel-plugin-console-groupify](https://github.com/kgrz/babel-plugin-console-groupify)

[babel-plugin-transform-console-log-variable-names](https://github.com/kgrz/babel-plugin-transform-console-log-variable-names)