3 Quick Ways to Debug Your Code

bugs
Here are my favorite ways to debug live and non live sites. The first is great to put in all of your sites from the very beginning so if you ever do contract some kind of bug, you can easily open any file and just use the class. The 2nd is better if used on a non live site or with #1. It will let you see any or all elements either on load or while hovering your HTML elements. Lastly, I have a very short script that you can view generated source code without a plugin and view it in a stylish way as well.

1. Use GET values to Add a Conditional Class

Use the following for your <html> element. Then call .debug body for example or .debug a.myclass. This is a great way to work on a live site without creating an entire dev version to fix bugs or make minor updates. All you have to do is in the url of your site add ?debug like: http://mysite.com/thepage/?debug

To add the class with PHP:

<html<?php if(isset($_GET['debug'])){echo ' class="debug"';} ?>>

To add the class with jQuery:

$(function(){
	if(window.location.toString().search('debug') > 0){
		$('html').addClass('debug')
	}
});

2. Outline Your Elements

Use outlines to outline your elements when you can’t figure out why something is not where it should be. Make sure to use outlines, because borders can break your design because they add width to the elements. I use the following two methods:

/* Outline single elements on load */
.left {outline:1px solid blue;}
 
/* With this I can point my cursor and see all the elements and child elements */
*:hover{outline:1px solid blue;}

3. Alert or Display Generated Content

Quit trying guess what JavaScript or jQuery is outputting or grabbing, might seem like a no brainer, but I know a lot of programmers who keep on trying new things without even checking for simple mistakes. I personally find my most frequent mistake is when chaining a bunch of jQuery my code is not being placed in the right spot, so I do a simple check like below to see if it’s targeting the right element

$(function(){
     alert($(this).attr('class')); //Check the class of the current element
     alert($(this).text()); //Check the text inside the element
});

That’s the quickest way, but a better way to get the generated source code, without a plugin is by using something like this. It’s very basic right now, but I’m writing a full blown js console plugin with a lot more features.

I copied and pasted the code below and made a demo here:
http://kneedeepincode.com/cdn/code_terminal/demo.html

Here is how it’s done (if you copy this code please click the “View Plain Text” link first! WordPress is converting the ampersands and semicolons to Unicode equivalents in the pre tags ):

$(function(){
	//Get the code however you want and make it the, the_source_code var
	var the_source_code = $('#header').html();
	$('body').prepend('<div class="debugger"></div>') //Create the debugger
	.find('.debugger').toggle( //Select it with jQuery and create a toggle
		function(){
			//If you click on it, it will hide, but stick out just enough to click on
			$(this).animate({left:'-'+($(this).width()-20)+'px'});
		},
		function(){
			//If you click it again it will pop back out where it was
			$(this).animate({left:'0px'});
		}
	)//Lastly, add the code to the debugger and convert to HTML entities
	.append(the_source_code.replace(/</g,'&#x26;lt&#x3b;').replace(/>/g,'&#x26;gt&#x3b;<br/>'));
});

Now, that’d get the code on the page, but now let’s make it usable with a little CSS:

.debugger {
	/* Just making it look nice... */
	background:#000;
	color:#fff;
	opacity:0.9;
	font-family:courier;
	font-size:0.7em;
	padding:1em;
	top:0;
	left:0;
	line-height:1.5em;
	/* now for the important stuff: */
	position:fixed; /* follow us on the page */
	width:95%; /* if 100%, you won't see the scroll bars, so give it some space */
	max-height:500px; /* if there is too much code, it will go outside the viewport */
	overflow:auto; /* ...so let's make it scroll */
	z-index:999; /* place it on top of everything else */
}

So, what about you? Do you have any quick ways to debug you code? Do you have alternate methods like above? Does anyone know how they’d do #1 in Ruby, ASP, etc?