The console.log
method is not the only method used in the console.
Check out other console methods besides log
by running the code below:
console.dir(console);
If you want to reference each of the console methods, click the links below:
- asset
- clear
- count
- countReset
- debug
- dir
- dirxml
- error
- group
- groupCollapsed
- groupEnd
- info
- log
- profile
- profileEnd
- table
- time
- timeEnd
- timeLog
- timeStamp
- trace
- warn
Let's look at a few here:
Measuring time
The start time is console.time(...)
while the end time is console.timeEnd(...)
. The timing is in milliseconds (ms).
See the syntax below:
console.time('...')
.
.
.
console.timeEnd('...')
Note: The same string (e.g. response time
) must be used in both the time
and timeEnd
function
See the example below:
console.time('response time');
alert('Click to continue');
console.timeEnd('response time');
See another example below:
console.time('response time');
const pow = (x, y) => {
let result = 1;
for (let i = 0; i < y; i++) {
result *= x;
}
return result;
};
console.log( 'iterative:', pow(2, 4) ); // 16
console.timeEnd('response time');
console.time('response time');
const power = (x, y) => {
if (y === 1) {
return x;
}
else {
return power( x, (y-1) ) * x;
}
};
console.log( 'recursive:', power(2, 4) ); // 16
console.timeEnd('response time');
// output
16
response time: 2.7529296875 ms
16
response time: 1.0400390625 ms
Recursive seems to be faster than iterative looping.
Formating console output
We can also format the output from the console. Below shows a list of common specifiers in JavaScript
specifier | output |
%s | Format the value as a string |
%i or %d | Format the value as an integer |
%f | Format the value as a floating-point value |
%o | Format the value as an expandable DOM element |
%O | Format the value as an expandable JavaScript object |
%c | Applies CSS style rules to the output string as specified by the second parameter |
See the examples below:
console.log('%s has %d points', 'Bello', 100); // Bello has 100 points
console.log('%cHello world!', 'color: blue; font-size: 30px');
It is possible to apply css rule differently on each word in the console.log
See the example below:
console.log("%cHello %cWorld%c!!", // string to be printed
"color: blue;", // applies color formatting to the 1st substring
"font-size: 30px;", // applies font formatting to the 2nd substring
"/* no CSS rule*/" // does not apply any rule to the remaining substring
);
Tabular values
The console.table
can be used to display objects and arrays in a tabular format.
See the examples below:
console.table( ['Hello', 'world'] );
console.table( {foo: 'bar', bar: 'baz'} );
// output
(index) value
0 "Hello"
1 "world"
(index) value
foo "bar"
bar "baz"
See another fun example below:
const personArr = [
{
"personId": 123,
"name": "Jhon",
"city": "Melbourne",
"phoneNo": "1234567890"
},
{
"personId": 124,
"name": "Amelia",
"city": "Sydney",
"phoneNo": "1234567890"
},
{
"personId": 125,
"name": "Emily",
"city": "Perth",
"phoneNo": "1234567890"
},
{
"personId": 126,
"name": "Abraham",
"city": "Perth",
"phoneNo": "1234567890"
}
];
console.table(personArr, ['name', 'personId']);
Clearing the console
Most of the time we clear the console with Ctrl + L but we can also use the console.clear
method to clear the console.
console.clear()
Displaying objects
console.dir(object)
displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.
const personArr = [
{
"personId": 123,
"name": "Jhon",
"city": "Melbourne",
"phoneNo": "1234567890"
},
{
"personId": 124,
"name": "Amelia",
"city": "Sydney",
"phoneNo": "1234567890"
},
{
"personId": 125,
"name": "Emily",
"city": "Perth",
"phoneNo": "1234567890"
},
{
"personId": 126,
"name": "Abraham",
"city": "Perth",
"phoneNo": "1234567890"
}
];
console.dir(personArr);
There's also a console.dirxml
function that logs the XML (eXtensible Markup Language) representation of the descendant elements of the object if possible, or the
JavaScript representation if not.
See the example below:
console.dirxml(document)
Debugging with assertions
The
console.assert()
method writes an error message to the console if the assertion is false. If the assertion is true, nothing happens - MDN
console.assert('zero' === 0)
Syntax:
console.assert(assertion, obj [, type1, ..., typeN]);
console.assert(assertion, string [, type1, ..., typeN]);
There's an error message to the console only if the assertion is false.
console.assert(true, {key: 'string'}, NaN, Object, undefined);
console.assert(true, {key: 'string'}, NaN, String, undefined);
console.assert(true, {key: 'string'}, NaN, undefined);
console.assert(false, {key: 'string'}, NaN, Object, undefined); // error
Other print methods
- info – a small informative icon (ⓘ) appears on the left side in some browsers' developer tool.
- warn - a small warning icon (!) appears on the left side in some browsers' developer tool.
- error - small times icon (⊗) appears on the left side in some browsers' developer tool.
console.info('info - 1 message');
console.warn('warn - 1 message');
console.error('error - 1 message');