Merge pull request #5334 from codeigniter4/toolbar-db-trace

Display file:line and trace information to database queries in debug toolbar

Author: lonnieezell

system/Debug/Toolbar/Collectors/Database.php

@@ -89,6 +89,7 @@ public static function collect(Query $query)
                 'query'     => $query,
                 'string'    => $queryString,
                 'duplicate' => in_array($queryString, array_column(static::$queries, 'string', null), true),
+                'trace'     => debug_backtrace(),
             ];
         }
     }
@@ -133,11 +134,31 @@ public function display(): array
         $data['queries'] = array_map(static function (array $query) {
             $isDuplicate = $query['duplicate'] === true;
 
+            // Find the first line that doesn't include `system` in the backtrace
+            $line = [];
+
+            foreach ($query['trace'] as &$traceLine) {
+                // Clean up the file paths
+                $traceLine['file'] = str_ireplace(APPPATH, 'APPPATH/', $traceLine['file']);
+                $traceLine['file'] = str_ireplace(SYSTEMPATH, 'SYSTEMPATH/', $traceLine['file']);
+                $traceLine['file'] = str_ireplace(VENDORPATH, 'VENDORPATH/', $traceLine['file']);
+                $traceLine['file'] = str_ireplace(ROOTPATH, 'ROOTPATH/', $traceLine['file']);
+
+                if (strpos($traceLine['file'], 'SYSTEMPATH') !== false) {
+                    continue;
+                }
+                $line = empty($line) ? $traceLine : $line;
+            }
+
             return [
-                'hover'    => $isDuplicate ? 'This query was called more than once.' : '',
-                'class'    => $isDuplicate ? 'duplicate' : '',
-                'duration' => ((float) $query['query']->getDuration(5) * 1000) . ' ms',
-                'sql'      => $query['query']->debugToolbarDisplay(),
+                'hover'      => $isDuplicate ? 'This query was called more than once.' : '',
+                'class'      => $isDuplicate ? 'duplicate' : '',
+                'duration'   => ((float) $query['query']->getDuration(5) * 1000) . ' ms',
+                'sql'        => $query['query']->debugToolbarDisplay(),
+                'trace'      => $query['trace'],
+                'trace-file' => str_replace(ROOTPATH, '/', $line['file'] ?? ''),
+                'trace-line' => $line['line'] ?? '',
+                'qid'        => md5($query['query'] . microtime()),
             ];
         }, static::$queries);
 

system/Debug/Toolbar/Views/_database.tpl

@@ -7,9 +7,18 @@
     </thead>
     <tbody>
     {queries}
-        <tr class="{class}" title="{hover}">
+        <tr class="{class}" title="{hover}" data-toggle="{qid}-trace">
             <td class="narrow">{duration}</td>
             <td>{! sql !}</td>
+            <td style="text-align: right">{trace-file}:<strong>{trace-line}</strong></td>
+        </tr>
+        <tr class="muted" id="{qid}-trace" style="display:none">
+            <td></td>
+            <td colspan="2">
+            {trace}
+                {file}:<strong>{line}</strong><br/>
+            {/trace}
+            </td>
         </tr>
     {/queries}
     </tbody>

system/Debug/Toolbar/Views/toolbar.css

@@ -344,6 +344,8 @@
 
 .debug-view.show-view {
   border-color: #DD8615; }
+#debug-bar tr[data-toggle] {
+  cursor: pointer; }
 
 .debug-view-path {
   background-color: #FDC894;
@@ -407,7 +409,7 @@
     #debug-bar .muted {
       color: #DFDFDF; }
       #debug-bar .muted td {
-        color: #434343; }
+        color: #797979; }
       #debug-bar .muted:hover td {
         color: #DFDFDF; }
     #debug-bar #toolbar-position,
@@ -496,7 +498,7 @@
   #toolbarContainer.dark #debug-bar .muted {
     color: #DFDFDF; }
     #toolbarContainer.dark #debug-bar .muted td {
-      color: #434343; }
+      color: #797979; }
     #toolbarContainer.dark #debug-bar .muted:hover td {
       color: #DFDFDF; }
   #toolbarContainer.dark #debug-bar #toolbar-position,
@@ -587,9 +589,9 @@
     -moz-box-shadow: 0 1px 4px #DFDFDF;
     -webkit-box-shadow: 0 1px 4px #DFDFDF; }
   #toolbarContainer.light #debug-bar .muted {
-    color: #434343; }
+    color: #797979; }
     #toolbarContainer.light #debug-bar .muted td {
-      color: #DFDFDF; }
+      color: #797979; }
     #toolbarContainer.light #debug-bar .muted:hover td {
       color: #434343; }
   #toolbarContainer.light #debug-bar #toolbar-position,

system/Debug/Toolbar/Views/toolbar.js

@@ -58,6 +58,13 @@ var ciDebugBar = {
 		{
 			buttons[i].addEventListener('click', ciDebugBar.showTab, true);
 		}
+
+		// Hook up generic toggle via data attributes `data-toggle="foo"`
+		var links = document.querySelectorAll('[data-toggle]');
+		for (var i = 0; i < links.length; i++)
+		{
+			links[i].addEventListener('click', ciDebugBar.toggleRows, true);
+		}
 	},
 
 	showTab: function () {
@@ -124,6 +131,21 @@ var ciDebugBar = {
 		}
 	},
 
+	/**
+	 * Toggle display of another object based on
+	 * the data-toggle value of this object
+	 *
+	 * @param event
+	 */
+	toggleRows : function(event) {
+		if(event.target)
+		{
+			let row = event.target.closest('tr');
+			let target = document.getElementById(row.getAttribute('data-toggle'));
+			target.style.display = target.style.display === 'none' ? 'table-row' : 'none';
+		}
+	},
+
 	/**
 	 * Toggle display of a data table
 	 *
@@ -137,7 +159,7 @@ var ciDebugBar = {
 
 		if (obj)
 		{
-			obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
+			obj.style.display = obj.style.display === 'none' ? 'block' : 'none';
 		}
 	},
 
@@ -155,7 +177,7 @@ var ciDebugBar = {
 
 		if (par && obj)
 		{
-			obj.style.display = obj.style.display == 'none' ? '' : 'none';
+			obj.style.display = obj.style.display === 'none' ? '' : 'none';
 			par.classList.toggle('timeline-parent-open');
 		}
 	},

user_guide_src/source/changelogs/v4.1.6.rst

@@ -14,6 +14,7 @@ BREAKING
 
 Enhancements
 ============
+- Database pane on debug toolbar now displays location where Query was called from. Also displays full backtrace.
 
 Changes
 =======