Posted over 2 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)

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

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

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

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

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

Check out our new e-book:

Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Learn more

Author of this card:

Henning Koch

Last edit:

over 2 years ago

by Besprechungs-PC

Keywords:

Chrome, Firefox

About this deck:

We are makandra and do test-driven, agile Ruby on Rails software development.