The developer console can do more than you think!

You can do so much more than console.log(...)! See the attached link for a great breakdown of what the developer console can give you.

Some of my favorites:

console.log takes many arguments

E.g. console.log("Current string:", string, "Current number:", 12)

Your output can have hyperlinks to Javascript objects

E.g. console.log("Check out the current %o, it's great", location)

Displaying tabular data

Just hand an array of arrays (or an array of objects) to console.table().

Example: console.table(["apples", "oranges", "bananas"]) prints:

(index) Values
0 "apples"
1 "oranges"
2 "bananas"

Grouping output in nested, collapsible sections

Great for debugging deeply nested or recursive function invocations

console.log("group:");
console.group();
console.log("group content");
console.groupEnd();
console.log("back to base level");

Output:

> group:
>   group content
> back to base level

Profiling the time a piece of code takes to run

Great to find bottlenecks

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

Output:

answer time: timer started
answer time: 998ms

Output a current stack trace

console.trace(): Great when you're debugging and you lost track of where you are in the current call stack.

Henning Koch over 6 years ago
This website uses short-lived cookies to improve usability.
Accept or learn more