Logs the output, time, arguments, and stacktrace of any function when it's called in a gorgeous way.

Overview

Function.prototype.log

Logs the output, time, arguments, and stacktrace of any function when it's called.

How to use:

Like this:

function yourFunction(params, etc){
	return 5;
}
//Now, if you wanted to debug this function, you *could* do this:
/*
function yourFunction(params, etc){
    console.log({params, etc});
	return 5;
}

yourFunction("stuff", "etc");
*/
//But that's not as nice as just doing this:

yourFunction = yourFunction.log();
yourFunction("stuff", "etc");

//And getting an output such as below

Example log output:

How.it.s.used.mp4

Minified version

Minified version:

Function.prototype.log=function(){function c(o,e,t){var n=t||`__${e.name}`;return Object.defineProperty(o,n,{get:function(){e.apply(this,arguments),delete this[n],addDebuggerButton(o,e)},configurable:!0}),o}return(...e)=>{var o=(new Date).toTimeString().split(" ")[0],t=(this+"").replace(/[/][/].*$/gm,"").replace(/\s+/g,"").replace(/[/][*][^/*]*[*][/]/g,"").split("){",1)[0].replace(/^[^(]*[(]/,"").replace(/=[^,]+/g,"").split(",").filter(Boolean),n=(new Error).stack.split(":"),l=`${this.name?`${this.name}(${t.join(", ")})`:"<anonymous function>"} (🕑 ${o}) ⇒ `;console.group(`%c${o} %c${this.name?`${this.name}(${t.join(", ")})`:"<anonymous function>"} %ccalled %c(line %c${n.slice(n.length-2,n.length).join(":")}%c)`,"color: gray; font-weight: light;","color: orangered; font-style: italic; font-weight: extralight","color: orange; font-weight: light","font-weight: light; font-style: italic; color: orange","color: lightseagreen; font-weight: light; font-style: italic","font-weight: light; font-style: italic; color: orange"),console.groupCollapsed("%cArguments passed:","color: lightseagreen; font-weight: bold; font-size: 0.9rem;");var r={};for(let o=0;o<e.length;o++){var a=e[o];r[t[o]||`${o}*`]={"Parameter name":t[o]||"",Argument:a}}console.table(r),console.info("%c*: No parameter name given in the function","font-style: italic; font-size: 0.5rem; color: gray;"),console.groupEnd(),console.groupCollapsed("%cStacktrace","color: lightseagreen; font-weight: bold; font-size: 0.9rem;"),console.trace(l),console.groupEnd(),console.groupCollapsed("%cActions","color: lightseagreen; font-weight: bold; font-size: 0.9rem;"),console.log("%cClick on an object, then expand it and click on the 3 dots (%c(...)%c) to run it.","font-style: italic; color: gray;","background: #6663; color: gray; padding: 3px; border-radius: 2px; text-decoration: underline","font-style: italic; color: gray;"),console.log(c({message:"Log arguments to the console in a new message"},()=>{for(var o in console.group(`%cArguments logged from ${l}`,"font-weight: bold; color: blue"),e)console.log(`%c${t[o]||"(No parameter name)"}: %o`,"color: gray; font-style: italic;",e[o]);console.groupEnd()},"Log arguments")),console.log(c({message:"Set a variable with the arguments passed."},()=>{window.FUNCTION_ARGUMENTS=e,console.log(`${l} %cThe global variable %cFUNCTION_ARGUMENTS%c has been set to %o`,"font-weight: bold; color: blue","background: #6663; color: gray; padding: 3px; border-radius: 2px;","font-weight: bold; color: blue",e)},"Set the FUNCTION_ARGUMENTS variable to the arguments passed."));var i=this(...e);return console.log(c({message:"Store the result of this function in a variable."},()=>{window.FUNCTION_RESULT=i,console.log(`${l} %cThe global variable %cFUNCTION_RESULT%c has been set to %o`,"font-weight: bold; color: blue","background: #6663; color: gray; padding: 3px; border-radius: 2px;","font-weight: bold; color: blue",i)},"Set the FUNCTION_RESULT variable to the arguments passed.")),console.groupEnd(),console.groupEnd(),i}};
You might also like...

Simple and Extensible Markdown Parser for Svelte, however its simplicity can be extended to any framework.

svelte-simple-markdown This is a fork of Simple-Markdown, modified to target Svelte, however due to separating the parsing and outputting steps, it ca

May 22, 2022

Group and sort Eleventy’s verbose output by directory (and show file size with benchmarks)

Group and sort Eleventy’s verbose output by directory (and show file size with benchmarks)

eleventy-plugin-directory-output Group and sort Eleventy’s verbose output by directory (and show file size with benchmarks). Sample output from eleven

Oct 27, 2022

Get into docker, its time now hhh

get_into_docker This repo is a personal reference and a guide in case of need that holds the process on my activities. This repo is a kind of knowledg

Nov 1, 2022

Keep your sensitive information out of chat logs, emails, and more with heavily encrypted secrets.

Keep your sensitive information out of chat logs, emails, and more with heavily encrypted secrets.

Free encrypted secret sharing for everyone! This application is to be used to share encrypted secrets cross organizations, or as private persons. Hemm

Dec 31, 2022

A string of four operations of the library, can solve the js digital calculation accuracy of scientific notation and formatting problems, support for thousands of decimal point formatting output operations

A string of four operations of the library, can solve the js digital calculation accuracy of scientific notation and formatting problems, support for thousands of decimal point formatting output operations

Apr 6, 2022

Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

🔎 Moralis NFT Snapshot Moralis NFT API will only return 500 itens at a time when its is called. For that reason, a simple logic is needed to fetch al

Jun 23, 2022

Introduction to Metrics, Logs and Traces session companion code.

Introduction to Metrics, Logs and Traces in Grafana This is the companion repository to a series of presentations over the three pillars of observabil

Dec 24, 2022

logs ROBLOX's updates and new versions

logs ROBLOX's updates and new versions

roblox-update-notifier logs ROBLOX's updates and new versions This is meant to be ran in NodeJS, 24/7, using something like pm2. NPM packages required

Oct 23, 2022

Get the last logs of your /var/log folder

var-log-crawler Get the last logs of your /var/log folder Requirements: Node installed. Hot to use: Rename .env.sample to .env and fill with your valu

Jan 5, 2022
Owner
--Explosion--
I'm a 16 year old coder! I love to use Node.js, create browser extensions, and other useful and non-useful websites!
--Explosion--
It's a repository to studies. Its idea is to learn about Nx and its plugins.

StudyingNx This project was generated using Nx. ?? Smart, Fast and Extensible Build System Adding capabilities to your workspace Nx supports many plug

Open-ish 4 May 13, 2022
Can see everything, beware of its omniscience, kneel before its greatness.

Can see everything, beware of its omniscience, kneel before its greatness. Summary Presentation Installation Removing Credits Presentation Main goal T

Duc Justin 3 Sep 30, 2022
A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM deffiniation and appropriate file structure.

Welcome to function-stencil ?? A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM

Ben Smith 21 Jun 20, 2022
Tries to execute sync/async function, returns a specified default value if the function throws

good-try Tries to execute sync/async function, returns a specified default value if the function throws. Why Why not nice-try with it's 70+ million do

Antonio Stoilkov 14 Dec 8, 2022
CLI Progress Bar implemented in NodeJS to track Time, ETA and Steps for any long running jobs in any loops in JS, NodeJS code

NodeJS-ProgressBar CLI Progress Bar for NodeJS and JavaScript to track Time, ETA and Steps for any long running jobs in any loops in JS, NodeJS code D

Atanu Sarkar 5 Nov 14, 2022
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time. Dropdown, navigation bu

Matthieu Bué 277 Nov 25, 2022
⚡️ Lightning Time: a new way to measure time

Lightning Time ⚡️ Lightning Time ⚡️ is a new way to measure time. It's a spin on hexadecimal time: the day is split into 16 parts over and over. The f

Purdue Hackers 7 Nov 22, 2022
Transmute one JavaScript string into another by way of mutating its AST. Powered by babel and recast.

equivalent-exchange Transmute one JavaScript string into another by way of mutating its AST. Powered by babel and recast. Features Can parse code usin

Lily Scott 51 Jul 9, 2022
Serialize and deserialize any object and all of its references 🥣

Super Cereal ?? Serialize and deserialize any object and all of its references. Supports: Class (with inheritance set-up) Object Array Function Map Se

Seb Ringrose 9 Dec 24, 2022
Serialize and deserialize any object and all of its references 🥣

Super Cereal ?? Serialize and deserialize any object and all of its references. Supports: Class (with inheritance set-up) Object Array Function Map Se

Seb Ringrose 5 Nov 1, 2022