Posted almost 3 years ago. Visible to the public. Repeats. External content.

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)

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

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

Output:

Copy
> group: > group content > back to base level

Profiling the time a piece of code takes to run

Great to find bottlenecks

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

Output:

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

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Author of this card:

Avatar
Henning Koch
Last edit:
almost 3 years ago
by Besprechungs-PC
Keywords:
Chrome, Firefox
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandropedia