JavaScript Console Secrets

JavaScript Console Object Secrets

Image may be NSFW.
Clik here to view.

There are some secrets about JavaScript that we don’t know, so I decided to create content and I call it JavaScript secrets and those will be the first secrets Console Gang .

In the past, when you wanted to work on Testing Purpose using a console, it displayed properties for some of the objects using log function like the given below

console.log(Object)

Well, there are some function that you can invoke using a console Object that helps you to show your operations more clearly and depended on your situation

Console Functions :

Tip: When testing this method, be sure to have the console view visible (press F12 to view the console).

1- Assert

The console.assert() method writes a message to the console, but only if an expression evaluates to false.

const myObj = { firstname : "John", lastname : "Doe" }
console.assert(document.getElementById("demo"), myObj)

2- Clear

All of us Sometimes Turned on Debugging in Production by fault , let’s ignore all console message

The console.clear() method will also write a message in the console: “Console was cleared”.

console.clear();

3- Count

Writes to the console the number of times that particular console.count() is called.

You can add a label that will be included in the console view.

console.count("Scope1");
console.count("Scope2");
console.count("Scope2");
console.count("Scope2");

Output :

Scope1: 1
Scope2: 1
Scope2: 2
Scope2: 3

4- Error

The console.error() method writes an error message to the console.

The console is useful for testing purposes.

console.error('This is A Medium Article Error ')

4- Group

Create a group of messages in the console : you can use this function to group you objects insides loops and scopes and the output will be a tree of operations describes when and what had been declared on each iterate and each scope

const arr1 = [1, 2, 3]
const arr2 = [10, 20, 30]
arr1.forEach((item, index) => {
    console.group(`item ${item} Declared at scope 1 in iter ${index}`)
    arr2.forEach((item2,index2) => {
        console.group('scope of array 2')
        console.log(`item ${item2} Declared at scope 2 iter ${index2}`)
    })
})

Output :

Image may be NSFW.
Clik here to view.

5- groupCollapsed

The console.groupCollapsed() method indicates the start of a collapsed message group.

Click the expand button to open the message group.

All messages will from now on be written inside this group.

Tip: Use the console.groupEnd() method to end the group.

Tip: Use the console.group() method for not-collapsed message groups.

console.log("Hello world!");
console.groupCollapsed();
console.log("Hello again, this time inside a collapsed group!");

6- groupEnd

The console.groupEnd() method indicates the end of a message group.

Tip: Use the console.group() method to start a message group.

Tip: Use the console.groupCollapsed() method to start a collapsed message group.

console.log("Hello world!");
console.group();
console.log("Hello again, this time inside a group!");
console.groupEnd();
console.log("and we are back.");

6- log

The console.log() method writes a message to the console.

Tip: When testing the console methods, be sure to have the console view visible (press F12 to view the console).

console.log('Message is Sent !')

6- info

The console.info() method writes a message to the console.

console.info('Message is Sent !')

6- table

The console.table() method writes a table in the console view.

The first parameter is required, and must be either an object, or an array, containing data to fill the table.

var car1 = { name : "Audi", model : "A4" }
var car2 = { name : "Volvo", model : "XC90" }
var car3 = { name : "Ford", model : "Fusion" }

console.table([car1, car2, car3])

Image may be NSFW.
Clik here to view.

6- time

You can use this function to specify the time needed and the approximate time to perform some operations on objects and functions

console.time();
for (i = 0; i < 100000; i++) {
  // some code
}
console.timeEnd()

6- trace

The console.trace() method displays a trace that show how the code ended up at a certain point.

function myFunction() {
  myOtherFunction()
}

function myOtherFunction() {
  console.trace()
}

myFunction()

7- warn

The console.warn() method writes a warning to the console.

var myArr = ["Orange", "Banana", "Mango", "Kiwi" ]
console.warn(myObj)

Conclusion:

There are many things buried that we can at least know that they exist because they may save us a lot of time for you , follow me and we will choose random topics about some patterns and techniques and discussing it with you

Sources :

Thank you so much for W3SCHOOLS

Image may be NSFW.
Clik here to view.