Walter Nascimento

Posted on Feb 11, 2021

JavaScript Course — Part 2/3

#javascript #course #training #part2

Console

To work with javascript one of the most used functions is console.log(), but there are several of which will be described and detailed below.

You can use the longer command format, window.console.[Command], if you need to avoid possible confusion with local objects called console.

assert

Used to test in the browser, checking whether an instruction is true or false.

let x = 2;
console.assert((x == 1), "assert message: x != 1");

clear

Clear the console window messages, including script error messages, and clear the script displayed in the console window as well. It does not clear the script entered at the console input prompt.

console.clear();

count

Displays the number of times the particular count() call was invoked. This function takes an optional label argument. console.count([label]);

for (let index = 0; index < 10; index++) {
    console.count('loop');
}

countReset

The console.countReset() method resets the counter used with console.count().

console.countReset([label]);

error

This ‘Write’ an error message on the Web Console.

Note: console.exception() is an alias for console.error(); their functionality is identical.

console.error(msg [, subst1, ..., substN]);
console.exception(obj1 [, obj2, ..., objN]);

group

Create a new online group and move all subsequent messages back to a higher level of indentation. To go back one level, use groupEnd().
console.group([label]);

console.group(‘info’);
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd(‘info’);

groupCollapsed

Starts a grouping of messages sent to the console window and sends the optional title as a group label. Groups submitted using groupCollapsed appear in a collapsed view by default. Groups can be nested and appear in a tree view in the console window.
console.groupCollapsed([label]);

console.log("This is the outer level");
console.groupCollapsed('a');
console.log("Level 2");
console.groupCollapsed('b');
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd('b');
console.log("Back to level 2");
console.groupEnd('a');
console.log("Back to the outer level");

groupEnd

Closes the current group.

info

Displays an outgoing message on the browser console. In Firefox and Chrome, a small “i” icon is displayed next to the console log items.

console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);

log

Used for issuing registration information in general. You can use string substitution and other arguments with this method.

console.log(obj1[, obj2, ..., objN]);

table

Displays tabular data as a table.
This function takes a mandatory data parameter, which must be an array or an object, and an optional columns parameter.

console.table(["apples", "oranges", "bananas"]);

time and timeEnd

Starts a timer that you can use to monitor how long an operation takes. You give each timer a unique name, and you should have a maximum of 10,000 running on the page. When you call console.timeEnd() with the same name, the browser will show the time, in milliseconds, that has elapsed since the timer starts.

console.time("app start");
app.start();
console.timeEnd("app start");

trace

Shows a stack trace.

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();

warn

Sends an alert message. You can use string substitution and additional arguments with this method.

console.warn("app start");

Use of string substitution

The use of string substitution can be used in the console (log, error, warn, info, group).

String	Description
%o	Issues a link to the JavaScript object.
%d ou %i	Issues a whole number.
%s	Emits a string.
%f	Issues a floating point number.
%o	object
%b	binary
%x	hexadecimal
%e	exponent

console.log('%c Red ', 'color:#FFCCCC; background-color:#FF0000;');
console.log('%c Orange ', 'color:#ffe4b3; background-color:#ffa600;');
console.log('%c Yellow ', 'color:#b3b300; background-color:#ffff00;');
console.log('%c Green ', 'color:#33ff33; background-color:#008000;');
console.log('%c Blue ', 'color:#ccccff; background-color:#0000ff;');
console.log('%c Purple ', 'color:#ffb3ff; background-color:#800080;');
console.log('%c Black ', 'color:#cccccc; background-color:#000000;');

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊

DEV Community