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: http://developers.google.com/chrome-developer-tools

Grouping of logs

console.group("Groupname")
// console.log('...')
console.groupEnd();

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

console.group("%cStyledText", "font-color: red")

Log DOM elements

console.log(document)
console.dir(document)

Console selections:

// Select element
$(css-selector)
// Select previously selected element
$0
// Jump to Elements panel and highlight the selected
inspect($(css-selector))
// 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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s