➡️The word - WINDOW

The word window 🪟 represents the browser’s window. All the global variables, functions, and objects automatically become members of the window object.

👉Window object provides different properties and methods such as closed, console, document, history, navigator, location, alert(), clearInterval(), prompt(), setTimeout(), etc. "console" is one of the important and common properties of a window object.

➡️Window Console Object

The console object provides access to the browser’s debugging console. The console object is the property of the window object. The web console is made available through multiple methods of the console javascript object that can be accessed by console.dir(console) or just console.

🔓Opening the console

There are two ways to open our console :

1. right click -> inspect -> console

2. SHORTCUT Keys to open developer tools

i. Chrome :

• Windows / Linux:

• Ctrl + Shift + J

• F12 -> If the tab is on "Elements" then click on the "console" tab or press ESC to toggle the console on and off.

• Mac OS:

• Cmd + Opt + J

ii. Firefox :

• Windows / Linux:

• Ctrl + Shift + K

• F12 -> If the tab is on "Elements" then click on the "console" tab or press ESC to toggle the console on and off.

• Mac OS:

• Cmd + Opt + K

iii. Microsoft Edge :

• F12 -> Enable the "remember my decision" box and then click on "open DevTools" button and then click on the "console" tab.

iv. Safari :

Before you open the developer console in Safari, you first need to enable the Developer Menu. Go to Safari menu -> preferences -> Advanced Tab. After Opening the advanced tab enable the ✅Show Develop menu in menu bar.

Once that menu is enabled use this shortcut to open the console Cmd + Option + C

v. Opera :

• Ctrl + Shift + I then click on the "console" tab.

➡️Accessing Console Object

The console object is accessed with window.console or just console

• Console methods are:

assert: ƒ assert()
clear: ƒ clear()
context: ƒ context()
count: ƒ count()
countReset: ƒ countReset()
debug: ƒ debug()
dir: ƒ dir()
dirxml: ƒ dirxml()
error: ƒ error()
group: ƒ group()
groupCollapsed: ƒ groupCollapsed()
groupEnd: ƒ groupEnd()
info: ƒ info()
log: ƒ log()
profile: ƒ profile()
profileEnd: ƒ profileEnd()
table: ƒ table()
time: ƒ time()
timeEnd: ƒ timeEnd()
timeLog: ƒ timeLog()
timeStamp: ƒ timeStamp()
trace: ƒ trace()
warn: ƒ warn()

Let's dive a bit into these methods.

1. Assert: In this method console.assert() if we pass any info/condition and if that assertion is false the method will throw an error message to the console saying that the assertion failed. But if the assertion is true, the console won't print anything.

In this process, we can also provide multiple arguments after the assertion (these can be "strings" or other objects that will be printed if the statement is false.

2. Clear: This method is used to clear the console. This method removes all the previously printed messages in the console.

-> There are two ways to clear the console

🟡 1st way is to simply click the clear icon or Ctrl + L

🟡 Another way is to use the console.clear() method. This will remove the messages in the console and may print a message in the console like "Console was cleared". Clear function will take no arguments. We can still access the variables, objects, functions, values of variables, etc in the console. Clear helps to remove any running messages, errors, warnings, etc while we are trying to debug in the console.

3. Context: As far as I know, this method console.context() just prints out all the methods present in the console object.

4. Count: This method logs the number of times console.count() is called. console.count(value) places a counter on the value provided as arguments. Each time this method is invoked the counter increases. If no arguments are passed, the method will count as a default.

You can add a Label that will be included in the console view:

Label: X -> here, label is the value passed as an argument, and X is the counter's value.

To remove the label use " " as a parameter. Even if console.count() is called twice, the number will be counted as 1. Because now the call has no label, the browser will treat it as a new console.count() each time.

IMP -> Strings with numbers as their arguments will be converted to NUMBER :

5. countReset: This method is used to reset the counter used with the console.count() method. This will also reset the label if any, but the count and countReset label should match.

6. debug: console.debug() is just a method that outputs a message to the web console. The message is displayed to the user if the console is set to display debug output.

To use this method you have to keep one thing in mind, debug messages are hidden by default in recent versions of chrome. You have to set your log level to verbose on the top of the console.

❗**The verbose option specifies that you want to display detailed information about you data on your screen.**

The debug messages are printed in blue color.

7. dir: console.dir() allows you to display an interactive list of the specified object and its child objects. The output is presented as a hierarchical listing with small triangles that let you see the contents of the child objects.

8. dirXml: console.dirxml() is very similar to the previous method dir. The difference here is dirxml shows the tree of nodes related to the given XML / HTML. The output is presented as a hierarchical listing of expandable nodes that let you see the contents of the child nodes.

First, use these two example to know exactly how dir and dirxml are different from each other. 👇

console.dir(document)
console.dirxml(document);
console.dirxml(document.querySelector('body'));  //or you can also use 'head' in place of body.

9. error: console.error() prints out an error message to the console with a message passed in as an argument. In this type of message, a small icon (⊗) appears on the left side with red background.

10. group: This method creates an expanded group of statements that can be collapsed to hide the entries after this method is invoked.

NOTE: Try this on your console to know exactly how this works. ( console.group() accept arguments to name or label the group.)

console.log("I am in the outer level");
console.group();
console.log("I am in the first level");
console.group();
console.log("I am in the second level now");
console.group();
console.log("Upgraded to third level");
console.log("new part of third level");
console.groupEnd();
console.log("Back to level three");
console.groupEnd();
console.log("Back to level two");
console.groupEnd();
console.log("finally I am back to the outer level again");

11. groupCollapsed: This method is the same as the group() method except that the entries inside the group are collapsed by default when the method is invoked. You just need to expand that statement through the disclosure button in order to reveal all the entries.

NOTE: Try this on your console.

console.log("I am in the outer level");
console.group();
console.log("I am in the first level");
console.groupCollapsed();
console.log("I am in the second level now");
console.groupCollapsed();
console.log("Upgraded to third level");
console.log("new part of third level");
console.groupEnd();
console.log("Back to level three");
console.groupEnd();
console.log("Back to level two");
console.groupEnd();
console.log("finally I am back to the outer level again");

12. groupEnd: console.groupEnd() is used to exit the current group. It allows you to enter new statements in the parent group.

13. info: console.info() prints the passed strings or objects to the console. The main purpose of this method is to show some informational message to the user.

NOTE: In Firefox, a small icon (ⓘ) appears on the left side of the printed string(s) or object(s).

❗ Chrome console

❗Firefox console

14. log: console.log() prints out a message to the console. This method can be called with any number of arguments. (The arguments may be a single string or it may be any JavaScript objects)

15 and 16. profile and profileEnd: These two methods are used for recording performance profile. console.profile() is used to start the recording and console.profileEnd() is used to stop the recording. You can pass any parameter to name the profile and profileEnd (The parameter part is optional).

🔴 Both methods are non-standard and have compatibility issues. So, it is recommended not to use these methods on the production sites. They show different behavior in different browser.

→ CHROME

→ FIREFOX

17. table: This method is used to display arrays and objects in a tabular format.

-> In case of objects

-> In case of arrays

18 and 19. time and timeEnd: console.time() is used to track how long a task in your code takes to run.

console.time([label]) starts a new timer for your code. Here, label is any name you want to give to your timer. The time taken is printed out only when you call console.timeEnd([label]) after the time method. The timeEnd() will stop the timer and give you the number of milliseconds it takes to print out the whole code. The label of timeEnd should be equal/same as the time method.

Example:- Start the timer .....write your code.....End the timer ↓

20. timeLog: console.timeLog() displays the current value of a timer that was started by the console.time() . This is the same as the timeEnd method just the difference is timeEnd method stops the timer and the timeLog method displays the time without stopping the timer.

Example:

21. timeStamp: This method outputs the current time. (You need to enable the "Show TimeStamp" option in your developer's tool setting)

NOTE: This feature is non-standard and has compatibility issues.

22. trace: console.trace() displays a trace that shows how we ended up on the line we are currently on. In console.trace([label]) label is optional while defining this method.

Here in this above example we have nested functions and the trace method is inside the innermost function tracking and printing out all the functions from innermost to the outermost function.

23. warn: console.warn() prints a warning message to the web console with a message passed in as an argument. In this type of message, a small icon (!) appears on the left side with a yellow background.

That's it for now. 😇

I hope I have helped you to understand the concept of console through my blog. I write about HTML, CSS, TailwindCSS, and JS .

Stick around, there is more to come. 🥳

Tweeter handle: Sneha Purkayastha