JavaScript Course — Part 2/3
JavaScript Introduction — Console
[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");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! 😊😊
