DEV Community

Cover image for JavaScript Course — Part 2/3
Walter Nascimento
Walter Nascimento

Posted on

JavaScript Course — Part 2/3

[clique aqui para ler em português]

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");
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

countReset

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

console.countReset([label]);
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

log

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

console.log(obj1[, obj2, ..., objN]);
Enter fullscreen mode Exit fullscreen mode

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"]);
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

trace

Shows a stack trace.

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();
Enter fullscreen mode Exit fullscreen mode

warn

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

console.warn("app start");
Enter fullscreen mode Exit fullscreen mode

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;');
Enter fullscreen mode Exit fullscreen mode

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! 😊😊

Discussion (0)