Modern web applications almost all make use of AJAX to enhance their user appeal. However, AJAX can be hard to debug, especially when all the traditional tools do little to help. When doing standard PHP coding CodeIgniter (CI) offers a profiler which will be appended to the bottom of generated pages. This gives you information on the request that was recently processed, including any POST or GET values passed to the script, how long execution took and how long any SQL queries took as well as what those queries actually were. During development I find this information indispensable to make sure my SQL queries are correct and things are working as I want.
However, when coding up AJAX aspects of the application this doesn’t work very well, any page fragments fed back to the JavaScript will have the profiler stuck at the bottom, and since these fragments are usually inserted inside DIVs the profiler cannot be read in it’s entirety, or it breaks the layout, or more likely, both of the above. Therefore I set out to find a way of making it AJAX compatible, so that it would always end up at the bottom of the page, even when it was originally returned appended to a page fragment. In the end this turned out easier than anticipated.
One small change needs to be made to your footer, you need to create an empty div with an ID of “debug”, this div will hold the profiler, so place the div where you want the profiler. The advantage with this is that you cannot see it when it is empty so it could even be left in for production code. The div looks like this:
<div id="debug"></div>
Now we need to extend, or rather override the CI profiler so create the file system/application/libraries/MY_Profiler.php
Replace MY_ with the value of $config['subclass_prefix'] found in your config file, by default it is MY_.
Next paste the following code in to it. Remember to change the name of the class as dictated by the filename you use, also change the name of the constructor function too. You can also change the script line to load the jQuery library from one of your servers, or even rewrite the entire script section to use any JavaScript you like.
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class MY_Profiler extends CI_Profiler
{
function MY_profiler()
{
parent::CI_Profiler();
}
function run()
{
$output = <<<ENDJS
<script src="http://code.jquery.com/jquery-latest.js" />
<script type="text/javascript" language="javascript" charset="utf-8">
// < ![CDATA[
$(document).ready(function() {
var html = $('#codeigniter_profiler').clone();
$('#codeigniter_profiler').remove();
$('#debug').hide().empty().append(html).fadeIn('slow');
});
// ]]>
</script>
ENDJS;
$output .= "<div id='codeigniter_profiler' style='font-size: 0.7em; clear:both;background-color:#fff;padding:10px;'>";
$output .= $this->_compile_uri_string();
$output .= $this->_compile_controller_info();
$output .= $this->_compile_memory_usage();
$output .= $this->_compile_benchmarks();
$output .= $this->_compile_get();
$output .= $this->_compile_post();
$output .= $this->_compile_queries();
$output .= '</div>';
return $output;
}
}
If you have already loaded a jQuery library in your header somewhere then make sure this ajax fragment doesn’t load jQuery again – otherwise all your event bindings and everything else will fail. If this is the case simply remove the line:
<script src="http://code.jquery.com/jquery-latest.js" />
From the above code.
That should be it, hit me back if you have any feedback, questions, or need some help.
