Debugging Javascript Using console.log & Conditional Blocks

When developing a site, you may have a main javascript file that contains various blocks of code for different parts of your site. As time goes on, this file could get really long and you may not want to break it up to keep minimize requests and the number of files to maintain. Sometimes you might accidentally have code in one block that is meant for one part of  your site interfere with code from another. In addition, you may find it hard to see which blocks of code are getting executed. One way to overcome this is by setting up your code as follows:

/**
 * Code to do one thing on one part of your site,
 * e.g. slide show your product pages
 */
(function ($) {
	$(document).ready(function () {
		 if ($("body.products").size() > 0) {
		 	if (typeof console != 'undefined' && console !== null) {
				console.log("slide show on product pages called.");
			}
			// put code here ...
		}
	});
}(jQuery));


/**
 * Code to do one thing on one part of your site,
 * e.g. custom animation your resources pages
 */
(function ($) {
	$(document).ready(function () {
		 if ($("body.resources").size() > 0) {
		 	if (typeof console != 'undefined' && console !== null) {
				console.log("custom animation on resources pages called.");
			}
			// put code here ...
		}
	});
}(jQuery));