Awesome Logger for React.Profiler

example.tsx

<Profiler id="MyComponent" onRender={console.profile}>
  <Component />
</Profiler>

profiler.js

console.profile = function ReactProfileLogger (id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) {
  const baseStyle = 'padding:1px;background-color:#20232a;';
  console.log(
    `%c ID: %c ${id} %c`,
    baseStyle + 'color:#ffffff;border-radius:3px 0 0 3px;',
    baseStyle + 'color:#61dafb;',
    baseStyle + 'border-radius:0 3px 3px 0;'
  );
  console.group();
  console.log('actualDuration ' + actualDuration);
  console.log('baseDuration ' + baseDuration);
  console.log('startTime ' + startTime);
  console.log('commitTime ' + commitTime);
  console.log(interactions);
  console.groupEnd();
};