All major web browsers have developer tools built into them. This tool kit consists of the console, debugger, network activity analyzer, inspect element, etc., and makes web developers’ lives a lot easier.
All modern browsers have a console that can be opened using a shortcut key from the keyboard. To open up the browser console:
- Use the F12 key in Chrome and other chromium-based browsers.
- Use CTRL + SHIFT + K keyboard shortcut keys for Mozilla.
- Use Option + ⌘ + C keyboard shortcut keys in Safari (if developer menu does not appear, then open Preferences by pressing ⌘ +, and in Advanced tab check “Show Develop menu in menu bar”).
It can also be opened by right-clicking on a web page and selecting the “Inspect” option from the menu.
Now select the Console option to open the console:
What is a console in JavaScript
Console in JavaScript is an object which is used to access the web console of the browser. It can be combined with different methods to perform several actions. Some browsers do not support specific methods. Google Chrome should be preferred over other browsers as it supports the most number of methods.
Here is a list of some of the methods of the console object:
- console.log()
To output logging information to the console
- console.info()
To output informative information on the console
- console.error()
To output an error on the console
- console.warn()
To output a warning on the console
- console.clear()
To clear the console
- console.time() & console.timeEnd()
console.time starts a timer and console.timeEnd stops the specified timer and outputs the amount of time in milliseconds that has passed since it started
- console.timeLog()
To output the value of a timer on the console
- console.table()
To show data in tabular form on the console
- console.count()
To output, the number of times a line of code has been executed under a given label
- console.countReset()
To reset the value of the above mentioned counter
- console.group() & console.groupEnd()
console.group to indent the following output by another level and console.groupEnd to exit the group.
- console.debug()
To output a debug log level message
- console.dir()
To output properties of a JavaScript object to the console
Now we will use some of the methods mentioned above as examples.
How to use console.log()
This is the most used console method to general output information to the console. It can take many arguments such as strings, variables, objects, arrays, functions, etc.
In the same manner, console.info, console.error, and console.warn can also be used to output text on the console:
console.error("This is an error message");
console.warn("This is a warning message");
How to use console.table()
console.table is used to display data in tabular form on the console. It takes an array or an object as an argument:
How to use console.group() & console.groupEnd()
It is used to indent the output to the next level:
console.group();
console.log("Within .group method");
console.groupEnd();
console.log("After .group method");
How to use console.time() & console.timeEnd()
console.time() & console.timeEnd() are used to output the number of milliseconds a block of code or a function takes to be executed:
for (let i = 0; i < 100000; i++) {
}
console.timeEnd();
Conclusion
Many developers use the console to log information in order to figure out whether their code is working properly or not. It allows the developer to read, write and modify the JavaScript code while running in the browser.
JavaScript has a built-in object named console that can be used to log information onto the browser’s console.
In this guide, we talked about the built-in developer tools/console of the web browser. We also learned about the console object and its various options, and their functionalities.
from https://ift.tt/3xSpBPr
0 Comments