xxxxxxxxxx
// console.assert
// This method is used to check if a condition is true. If it's not,
// it will throw an error.
console.assert(/** Condition **/, /** Error message **/);
console.assert(1 === 1, "1 is equal to 1"); // No error
console.assert(0 === [], "0 is equal to []"); // Error in the console
xxxxxxxxxx
// console.time
// This method is used to measure time. For example,
// checking how many seconds it went to complete the x task?
console.time("test");
setTimeout(() => {
console.timeEnd("test");
}, 1000);
// This will give us the following result:
// test: 1.000s
xxxxxxxxxx
// console.group
console.group("groupName");
console.log("hi");
console.log("testing");
console.groupEnd();
console.group("groupName2");
console.log("hi");
console.log("testing");
console.groupEnd();
xxxxxxxxxx
// debugger keyword
// You may not hear about the debugger keyword.
// It's a keyword that is used to stop the execution of the code.
const buggyCode = () => {
debugger;
console.log("hi");
};
// ...
buggyCode();
console.log("World");
xxxxxxxxxx
// console.table
// Useful for printing an array.
const arr = [1, 2, 3, 4, 5];
console.table(arr);
xxxxxxxxxx
<!-- console.trace -->
<!-- This method traces where it was called. I have an HTML file like this: -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
"test";
console.trace();
i = 0;
</script>
</body>
</html>
xxxxxxxxxx
// Use destructuring
const { log } = console;
log("hi");
log("testing");
const { log: myLog } = console;
myLog("hi");
myLog("testing");