Query time bar chart in CF debug

posted: 27 Jul 2011

One of the most useful (although not necessarily beautiful) parts of ColdFusion's toolset it the debug feature. This allows you to view the timings for all the parts that contribute to the final rendering of a page. It shows you a break down of all the queries that were run; their execution time, records returned and the full query body passed to the db.

However, getting an overview of the all queries, particularly comparing each query with the others, is difficult. Enter another great feature of CF, they provide the code they use to generate the debug pages, for you to tweak :)

So here is a simple piece of code that renders an easy to see comparison of the different query times running on the page. Add it to {jrun.home}/servers/{}/cfusion-ear/cfusion-war/WEB-INF/debug/classic.cfm. I stuck it in at line 567, just after the template timings and exception summaries and before the full SQL Queries output.

<!--- Query Performance Graph --->
  <cfif bFoundSQLQueries>
      <p class="cfdebug">
        <strong class="cfdebuglge">
          <a name="cfdebug_querygraph">SQL Query Graph</a>
      <cfset maxQueryTime = 0>
      <cfloop query="cfdebug_queries">
        <cfset maxQueryTime = Max(cfdebug_queries.executionTime, maxQueryTime)>
        <cfloop query="cfdebug_queries">
            <td>#Max(cfdebug_queries.executionTime, 0)#ms</td>
              <div style="width: #Int(Max(cfdebug_queries.executionTime, 0)/maxQueryTime*100)#px; background-color: red; height: 10px"></div>

You end up with something like this: