Read more

The developer console can do more than you think!

Henning Koch
January 09, 2015Software engineer at makandra GmbH

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

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

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 Show archive.org snapshot

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 Show archive.org snapshot

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 Show archive.org snapshot

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 Show archive.org snapshot

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

Henning Koch
January 09, 2015Software engineer at makandra GmbH
Posted by Henning Koch to makandra dev (2015-01-09 09:29)