Related to console.log in the Dev Tools,

we can use $ instead of document.querySelector
and $$ instead of document.querySelectorAll.

That's not related to the jQuery $.

Example:

// old
document.querySelectorAll(".myClass");

// new
$$(".myClass");

I like to use console.time and console.timeEnd to benchmark code execution time.

console.time("for");

let sum = 0;
for (let i = 0; i < 1e4; ++i) {
  sum += i;
}

console.log(sum);
console.timeEnd("for");

console.time("while");

sum = 0;
let i = 1e4;
while(--i) {
  sum += i;
}

console.log(sum);
console.timeEnd("while");

With your code, you can actually have it change the console type too, like so

function customLog(message, color='black') {
     let logType = 'log';
     switch (color) {
         case 'success':  
              color = 'Green';
              break
         case 'info':     
              color = 'Blue';
              logType = 'info';
              break;
         case 'error':   
              color = 'Red'; 
              logType = 'error';
              break;
         case 'warning':  
              color = 'Orange';
              logType = 'warning';
              break;
         default: 
              color = color
     }

     console[logType](`%c${message}`, `color:${color}`);
}

customLog('Hello World!')
customLog('Success!', 'success')
customLog('Error!', 'error')
customLog('Warning!', 'warning')
customLog('Info...', 'info')

Also, console.count('nameToCount') will count how many times it is called, which can be handy.

All this methods to debug operations could be seen by final users when console is open in released applications.

I use console.debug with all included arguments and the debug messages only appears when application is in debug mode and the level of messages from console includes Verbose messages.

I'm a big fan of the debug module. For debug logs that you don't remove afterwards it is very nice.

Another nice thing is console.trace, which also prints out a stack trace where the log is called. Useful if you're trying to debug a function which is being called in several critical areas.

That's great - I didn't know about console.table. That's some very cool web-fu.

BUT!

Remember - all this debugging is as nothing to the power of good automated tests. A debug line should be ephemeral - an automated test is for life!

As a temporary measure for writing quicker console.log()'s just put the following in a temporary file (for polluting the global namespace) and link it to the top of your web application then unlink it when no longer needed:

const log = (...args) => console.log(...args);

Now you can easily do...

log(message, ' : ', func.name, func(arg));

Error at nameOfFunc : undefined // example output

This is especially useful when logging multiple test cases in a single run. Similarly can be done with the other console methods. And if you really want to go crazy, this can also be done with Object.prototype.methods but you must often bind the function to the calling object's scope by setting the context with Function.prototype.bind or Function.prototype.call. I think ES5 and ES6 have made Function.prototype.apply obsolete so I don't use it or recommend it anymore. But only do this on very small projects or inside created objects.

I have gone about this via namespacing my debug logs so it assigns a colour based on that namespace.

debug('cache:set', {}) // cache:set +1ms {}

The namespace here being cache which is mapped against an array of colours using the following code...

let log = 'cache:set';
let colors = [];

const hash = data => {
    let hash = 0;

    for (let index = 0; index < data.length; index++) {
        hash = ((hash << 5) + hash + data.charCodeAt(index)) & 0xffffffff;
    }

    return hash;
};

let namespace = log.substring(0, log.indexOf(':'));
let color = colors[Math.abs(hash(namespace)) % colors.length];

This way cache logs are always shown in the same colour allowing you to visually identify them.

I use console.trace to check the stack calls. I use also console.log({variableName}) to get the variableName in the console..

Is there anything more fun than inspecting a website you're visiting for hidden console.log messages? The console.table is a new one for me and it's awesome, thanks for sharing!

Nice for adding colors on console. It's better!

You can also take a look at chalk for coloring the terminal string

console.table also comes in handy a lot.

Idea: Make this an npm package. Wait for it to become popular enough. Inject code to steal credit cards :)

(There was an article about this a few months ago, luckily it was a joke)

Short, simple and easy! Thanks!

ah cool, i did not know about error or warn!

Is it possible to console.log within a width, so for example the entire width of the console?

Cool! Didn't know about the styling/coloring

Do not forget "console.group"!

enriquemorenotent.com/post/differe...

It was useful. Good job.
I've published a tiny package about this topic.
npmjs.com/package/havecoolconsole

I've authored "console colors", a tiny package which allows easy fun coloring:

github.com/yairEO/console-colors

I thought that console.pretty was a fast way to do this, now I'll star to use more the manual way of console.*

bvaughn / console.pretty

Pretty console logging

console.pretty

Pretty console logging.

---

The problem

You're trying to log information, but have a hard time tracking down what the output means, where it came from, or can't find what you're looking for quickly.

This solution

Use colors to easily parse through your console.

Example

import log, { green } from "console.pretty"
const handleOnClick = () => {
  log.blue("Click!")
}
const handleMouseover = () => {
  green("Mouseover!");
};

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

$ npm install console.pretty

or

$ yarn add console.pretty

API

By default, the following colors are available:

• blue
• brown
• gray
• green
• red
• orange
• purple
• yellow

However, you can also build your own logger using the provided createLogger.

import { createLogger } from

…

View on GitHub

dope

@itsmanojb something we were talking about the other day, what was that video you shared?