Console Function

Console functions allow us to display information about the program that is executing. This JavaScript program demonstrates all of the available console functions. Press F12 to see the console output.

ConsoleFunctions.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="ConsoleFunctions.js"></script>
</body>
</html>

ConsoleFunctions.js

document.writeln("Press F12 to view the console");

// Simple messages
console.log("Log1");
console.info("Info1");
console.warn("Warn1");
console.error("Error1");

// Clear everything and output simple messages
console.clear();
console.log("Log2");
console.info("Info2");
console.warn("Warn2");
console.error("Error2");

// Output an object with its properties
const kqPerson = {sName: "Jesus", iAge: 33, sBirthplace: "Bethlehem"};
console.dir(kqPerson);

// Output an HTML or XML element and its contents
const kqHTML = document.querySelector("html");
console.dirxml(kqHTML);

// Output a table
const kqaPeople = [
	{ name: "Peter", age: 30},
	{ name: "Paul", age: 27}
];
console.table(kqaPeople);

// Groupings
console.group("Group 1");
console.log("Things 1");
console.log("Stuff 1");
console.log("Objects 1");
console.groupEnd();

// This is just like a group, but it starts out collapsed.
console.groupCollapsed("Group 2");
console.log("Things 2");
console.log("Stuff 2");
console.log("Objects 2");
console.groupEnd();

// Assertions
const kbFalse = false;
const kbTrue = true;
// This appears as an error
console.assert(kbFalse, "This is not true!");
// This does not show because the assertion value is true.
console.assert(kbTrue, "This is true!");

// Counters
console.count("Counter 1");
console.count("Counter 1");
console.count("Counter 2");
console.count("Counter 1");
console.count("Counter 2");
console.countReset("Counter 1");
console.count("Counter 1");
console.count("Counter 2");

// Stack trace
console.trace("External");
f();
g();
function f() {
	console.trace("from f()");
}
function g() {
	h();
}
function h() {
	console.trace("from h()");
}

// Timers
console.time("Timer 1");
function Delay() {
	console.timeEnd("Timer 1");
}
// Call Delay() in one second.
setTimeout(Delay, 1000);