JavaScript debugging tips

I came across this blog post which provides some very handy tips for debugging JavaScript in the browser.  My favorite top three are:

Display an object in a table format for an easier view

var animals = [
   { animal: ‘Horse’, name: ‘Henry’, age: 43 },
   { animal: ‘Dog’, name: ‘Fred’, age: 13 },
   { animal: ‘Cat’, name: ‘Frodo’, age: 18 }
];
 
console.table(animals);

with this output:

console.table

Unminify code as an easy way to debug JavaScript

unminify

Custom console log messages

console.todo = function(msg) {
	console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}
 
console.important = function(msg) {
	console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}
 
console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

for this result:

console.log

Very handy stuff!

A love letter to jQuery

A love letter to jQuery – very beautiful and sentimental …

So thank you jQuery! It’s been a wonderful 10 years. I hope we have another 10, but if we don’t it will always be with dignity and respect that I remember you and never less, because you do the perfect job of making yourself redundant. It is befitting that you do this so gracefully. If the time does come to say goodbye it will be because you have given us all that you can. To not be needed does not mean you will not forever be important to the me and the web.