JavaScript Course — Part 2/3
Tags: javascript, course, training, part2
Published: 2021-02-11 15:53:03

[[clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/curso-de-javascript-parte-2-3-a16f330d5547)

# 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.

```JavaScript
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.

```JavaScript
console.clear();
```

## count

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

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

## countReset

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

```JavaScript
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.

```JavaScript
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])`;

```JavaScript
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])`;

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

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

## trace

Shows a stack trace.

```JavaScript
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.

```JavaScript
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                                |

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