Anyone who has used Safari (or any other WebKit-based browser) to debug javascript has encountered the annoying “Resource interpreted as other but transferred with MIME type application/x-javascript” bug. When this happens, the source of the javascript file appears blank in the debugger, and various other things may go wrong (sometimes code isn’t executed, for example).
This problem is caused by a WebKit bug, triggered when files are taken from the browser’s cache rather than from your server. The simple workaround is to force WebKit not to cache your javascript files while you’re debugging them. This is easy if you server supports PHP (it almost certainly does). Create a php file to serve your javascript, and have your test page include that instead of your javascript:
Before:<script src="testing.js" type="text/javascript"></script>
After:<script src="debug.php/testing.js" type="text/javascript"></script>
Where debug.php has:
<?php
header('Content-Type: application/x-javascript');
header('Expires: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
readfile(dirname(__FILE__).'/testing.js');
?>
Or, more generally:
<?php
header('Content-Type: application/x-javascript');
header('Expires: ' . gmdate('D, d M Y H:i:s') . ' GMT');
header('Cache-Control: no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
$file = isset($_SERVER['PATH_INFO']) ? $_SERVER['PATH_INFO'] : '/testing.js';
readfile(dirname(__FILE__).$file);
?>
If you use the general version, you may wish to include some security checks on the input (PATH_INFO) to protect against potential exploits. That is left as an exercise for the reader.
Of course, before you deploy, remember to change the script include back to the original form!