Javascript console logging in chrome

Some useful console logging commands and usages (they all work at least with chrome):
This page was inspired by the Pluralsight course given by John Sonmez (Using The Chrome Developer Tools)
I strongly recommend everybody to watch this course – I enjoyed it very much!
Further documentation can be found here:

Grouping of logs"Groupname")
// console.log('...')

Measuring time (visible in chrome Console\Debug)

console.time("Measured time");
console.timeEnd("Measured time");

Highlight a named line into the timeline Panel of Chrome developer tools

console.timeStamp("Named line");

Log formatting

console.log("Logging a string and a number... %s %i", str, num);

Log css styling"%cStyledText", "font-color: red")

Log DOM elements


Console selections:

// Select element
// Select previously selected element
// Jump to Elements panel and highlight the selected
// Monitoring events on an element it can be: mouse, key, touch, control
monitorEvents($(css-selector), "mouse")
monitorEvents(document.body, "click")

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s