One simple method for spending less time debugging HTML Emails

HTML Emails in certain mail clients commonly have display issues caused by line breaks, tabs or other whitespace between elements that should be ignored. Removing this whitespace is a common, but annoying, debugging strategy but it makes the code difficult to read or modify.

Simple Solution

Have PHP remove the whitespace for you before sending to the browser.

1. Change the extension on the file from .html to .php
2. Make sure you’re viewing the file through a web server (http:// not file://)
3. Add this to the top of the file:

   		<?php
   			//buffer output
   			ob_start();
   		?>
   		

4. Add this to the bottom of the file:

   		<?php
   		   //get everything we printed
   		   $html = str_replace(array("\t", "\n", "\r"), "", ob_get_contents());
   
   		   //end buffer and discard previous output
   		   ob_end_clean();
   
   		   //send to browser
   		   echo $html;
   		?>
   		

5. View the page and either use either Save or View Source to grab the output.

Drawbacks

This method doesn’t work without a web server. This isn’t a problem for me since I do all of my development under localhost but I understand that isn’t true for everyone.

The render step. Having to view the page and either Save or View Source + Copy/Paste is a small extra step. I haven’t found a situation where this minor drawback wasn’t worth it for all the debugging time saved but your mileage may vary.