diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss
index 5d809874ebee..9c5b149d392c 100644
--- a/admin/css/debug-toolbar/toolbar.scss
+++ b/admin/css/debug-toolbar/toolbar.scss
@@ -398,6 +398,11 @@
             text-align: right;
         }
     }
+
+    // show tab
+    &>.debug-bar-dblock {
+        display: block;
+    }
 }
 
 
@@ -467,7 +472,6 @@
     @import '_theme-light';
 }
 
-
 // LAYOUT HELPERS
 // ========================================================================== */
 
@@ -510,3 +514,47 @@
 .debug-bar-noverflow {
     overflow: hidden;
 }
+
+.debug-bar-dtableRow {
+    display: table-row;
+}
+  
+.debug-bar-dinlineBlock {
+    display: inline-block;
+}
+  
+.debug-bar-pointer {
+    cursor: pointer;
+}
+  
+.debug-bar-mleft4 {
+    margin-left: 4px;
+}
+  
+.debug-bar-level-0 {
+    --level: 0;
+}
+  
+.debug-bar-level-1 {
+    --level: 1;
+}
+  
+.debug-bar-level-2 {
+    --level: 2;
+}
+  
+.debug-bar-level-3 {
+    --level: 3;
+}
+  
+.debug-bar-level-4 {
+    --level: 4;
+}
+  
+.debug-bar-level-5 {
+    --level: 5;
+}
+  
+.debug-bar-level-6 {
+    --level: 6;
+}
diff --git a/app/Views/welcome_message.php b/app/Views/welcome_message.php
index 6d5da23f1224..86a6e39de305 100644
--- a/app/Views/welcome_message.php
+++ b/app/Views/welcome_message.php
@@ -150,6 +150,11 @@
         .further h2:first-of-type {
             padding-top: 0;
         }
+        .svg-stroke {
+            fill: none;
+            stroke: #000;
+            stroke-width: 32px;
+        }
         footer {
             background-color: rgba(221, 72, 20, .8);
             text-align: center;
@@ -206,7 +211,7 @@
                 </a>
             </li>
             <li class="menu-toggle">
-                <button onclick="toggleMenu();">&#9776;</button>
+                <button id="menuToggle">&#9776;</button>
             </li>
             <li class="menu-item hidden"><a href="#">Home</a></li>
             <li class="menu-item hidden"><a href="https://codeigniter4.github.io/userguide/" target="_blank">Docs</a>
@@ -253,7 +258,7 @@
         <h1>Go further</h1>
 
         <h2>
-            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='32' y='96' width='64' height='368' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><line x1='112' y1='224' x2='240' y2='224' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line x1='112' y1='400' x2='240' y2='400' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect x='112' y='160' width='128' height='304' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><rect x='256' y='48' width='96' height='416' rx='16' ry='16' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/><path d='M422.46,96.11l-40.4,4.25c-11.12,1.17-19.18,11.57-17.93,23.1l34.92,321.59c1.26,11.53,11.37,20,22.49,18.84l40.4-4.25c11.12-1.17,19.18-11.57,17.93-23.1L445,115C443.69,103.42,433.58,94.94,422.46,96.11Z' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/></svg>
+            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='32' y='96' width='64' height='368' rx='16' ry='16' class="svg-stroke" /><line x1='112' y1='224' x2='240' y2='224' class="svg-stroke" /><line x1='112' y1='400' x2='240' y2='400' class="svg-stroke" /><rect x='112' y='160' width='128' height='304' rx='16' ry='16' class="svg-stroke" /><rect x='256' y='48' width='96' height='416' rx='16' ry='16' class="svg-stroke" /><path d='M422.46,96.11l-40.4,4.25c-11.12,1.17-19.18,11.57-17.93,23.1l34.92,321.59c1.26,11.53,11.37,20,22.49,18.84l40.4-4.25c11.12-1.17,19.18-11.57,17.93-23.1L445,115C443.69,103.42,433.58,94.94,422.46,96.11Z' class="svg-stroke"/></svg>
             Learn
         </h2>
 
@@ -263,7 +268,7 @@
             target="_blank">User Guide</a> !</p>
 
         <h2>
-            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
+            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z' class="svg-stroke" /><path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11' class="svg-stroke" /></svg>
             Discuss
         </h2>
 
@@ -274,7 +279,7 @@
              target="_blank">chat on Slack</a> !</p>
 
         <h2>
-             <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><line x1='176' y1='48' x2='336' y2='48' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='118' y1='304' x2='394' y2='304' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><path d='M208,48v93.48a64.09,64.09,0,0,1-9.88,34.18L73.21,373.49C48.4,412.78,76.63,464,123.08,464H388.92c46.45,0,74.68-51.22,49.87-90.51L313.87,175.66A64.09,64.09,0,0,1,304,141.48V48' style='fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><line x1='176' y1='48' x2='336' y2='48' class="svg-stroke" /><line x1='118' y1='304' x2='394' y2='304' class="svg-stroke" /><path d='M208,48v93.48a64.09,64.09,0,0,1-9.88,34.18L73.21,373.49C48.4,412.78,76.63,464,123.08,464H388.92c46.45,0,74.68-51.22,49.87-90.51L313.87,175.66A64.09,64.09,0,0,1,304,141.48V48' class="svg-stroke" /></svg>
              Contribute
         </h2>
 
@@ -309,7 +314,8 @@
 
 <!-- SCRIPTS -->
 
-<script>
+<script {csp-script-nonce}>
+    document.getElementById("menuToggle").addEventListener('click', toggleMenu);
     function toggleMenu() {
         var menuItems = document.getElementsByClassName('menu-item');
         for (var i = 0; i < menuItems.length; i++) {
diff --git a/system/Debug/Toolbar.php b/system/Debug/Toolbar.php
index b99d839265b7..1a8faaf399ba 100644
--- a/system/Debug/Toolbar.php
+++ b/system/Debug/Toolbar.php
@@ -197,12 +197,12 @@ protected function renderTimelineRecursive(array $rows, float $startTime, int $s
             $open = $row['name'] === 'Controller';
 
             if ($hasChildren || $isQuery) {
-                $output .= '<tr class="timeline-parent' . ($open ? ' timeline-parent-open' : '') . '" id="timeline-' . $styleCount . '_parent" onclick="ciDebugBar.toggleChildRows(\'timeline-' . $styleCount . '\');">';
+                $output .= '<tr class="timeline-parent' . ($open ? ' timeline-parent-open' : '') . '" id="timeline-' . $styleCount . '_parent" data-toggle="childrows" data-child="timeline-' . $styleCount . '">';
             } else {
                 $output .= '<tr>';
             }
 
-            $output .= '<td class="' . ($isChild ? 'debug-bar-width30' : '') . '" style="--level: ' . $level . ';">' . ($hasChildren || $isQuery ? '<nav></nav>' : '') . $row['name'] . '</td>';
+            $output .= '<td class="' . ($isChild ? 'debug-bar-width30' : '') . ' debug-bar-level-' . $level . '" >' . ($hasChildren || $isQuery ? '<nav></nav>' : '') . $row['name'] . '</td>';
             $output .= '<td class="' . ($isChild ? 'debug-bar-width10' : '') . '">' . $row['component'] . '</td>';
             $output .= '<td class="' . ($isChild ? 'debug-bar-width10 ' : '') . 'debug-bar-alignRight">' . number_format($row['duration'] * 1000, 2) . ' ms</td>';
             $output .= "<td class='debug-bar-noverflow' colspan='{$segmentCount}'>";
@@ -220,7 +220,7 @@ protected function renderTimelineRecursive(array $rows, float $startTime, int $s
 
             // Add children if any
             if ($hasChildren || $isQuery) {
-                $output .= '<tr class="child-row" id="timeline-' . ($styleCount - 1) . '_children" style="' . ($open ? '' : 'display: none;') . '">';
+                $output .= '<tr class="child-row ' . ($open ? '' : ' debug-bar-ndisplay') . '" id="timeline-' . ($styleCount - 1) . '_children" >';
                 $output .= '<td colspan="' . ($segmentCount + 3) . '" class="child-container">';
                 $output .= '<table class="timeline">';
                 $output .= '<tbody>';
@@ -228,7 +228,7 @@ protected function renderTimelineRecursive(array $rows, float $startTime, int $s
                 if ($isQuery) {
                     // Output query string if query
                     $output .= '<tr>';
-                    $output .= '<td class="query-container" style="--level: ' . ($level + 1) . ';">' . $row['query'] . '</td>';
+                    $output .= '<td class="query-container debug-bar-level-' . ($level + 1) . '" >' . $row['query'] . '</td>';
                     $output .= '</tr>';
                 } else {
                     // Recursively render children
diff --git a/system/Debug/Toolbar/Views/_database.tpl b/system/Debug/Toolbar/Views/_database.tpl
index 1bd9b8a88405..054dd36231c3 100644
--- a/system/Debug/Toolbar/Views/_database.tpl
+++ b/system/Debug/Toolbar/Views/_database.tpl
@@ -10,9 +10,9 @@
         <tr class="{class}" title="{hover}" data-toggle="{qid}-trace">
             <td class="narrow">{duration}</td>
             <td>{! sql !}</td>
-            <td style="text-align: right"><strong>{trace-file}</strong></td>
+            <td class="debug-bar-alignRight"><strong>{trace-file}</strong></td>
         </tr>
-        <tr class="muted" id="{qid}-trace" style="display:none">
+        <tr class="muted debug-bar-ndisplay" id="{qid}-trace">
             <td></td>
             <td colspan="2">
             {trace}
diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css
index 8a302b4019e9..a3b934b68bd4 100644
--- a/system/Debug/Toolbar/Views/toolbar.css
+++ b/system/Debug/Toolbar/Views/toolbar.css
@@ -288,6 +288,9 @@
   padding-left: 1em;
   text-align: right;
 }
+#debug-bar > .debug-bar-dblock {
+  display: block;
+}
 
 .debug-view.show-view {
   border: 1px solid;
@@ -804,3 +807,47 @@
 .debug-bar-noverflow {
   overflow: hidden;
 }
+
+.debug-bar-dtableRow {
+  display: table-row;
+}
+
+.debug-bar-dinlineBlock {
+  display: inline-block;
+}
+
+.debug-bar-pointer {
+  cursor: pointer;
+}
+
+.debug-bar-mleft4 {
+  margin-left: 4px;
+}
+
+.debug-bar-level-0 {
+  --level: 0;
+}
+
+.debug-bar-level-1 {
+  --level: 1;
+}
+
+.debug-bar-level-2 {
+  --level: 2;
+}
+
+.debug-bar-level-3 {
+  --level: 3;
+}
+
+.debug-bar-level-4 {
+  --level: 4;
+}
+
+.debug-bar-level-5 {
+  --level: 5;
+}
+
+.debug-bar-level-6 {
+  --level: 6;
+}
diff --git a/system/Debug/Toolbar/Views/toolbar.js b/system/Debug/Toolbar/Views/toolbar.js
index 073a76ab4312..54fe3d69f106 100644
--- a/system/Debug/Toolbar/Views/toolbar.js
+++ b/system/Debug/Toolbar/Views/toolbar.js
@@ -49,7 +49,7 @@ var ciDebugBar = {
         var tab = ciDebugBar.readCookie("debug-bar-tab");
         if (document.getElementById(tab)) {
             var el = document.getElementById(tab);
-            el.style.display = "block";
+            ciDebugBar.switchClass(el, "debug-bar-ndisplay", "debug-bar-dblock");
             ciDebugBar.addClass(el, "active");
             tab = document.querySelector("[data-tab=" + tab + "]");
             if (tab) {
@@ -70,7 +70,24 @@ var ciDebugBar = {
         // Hook up generic toggle via data attributes `data-toggle="foo"`
         var links = this.toolbar.querySelectorAll("[data-toggle]");
         for (var i = 0; i < links.length; i++) {
-            links[i].addEventListener("click", ciDebugBar.toggleRows, true);
+            let toggleData = links[i].getAttribute("data-toggle");
+            if (toggleData === "datatable") {
+
+                let datatable = links[i].getAttribute("data-table");
+                links[i].addEventListener("click", function() {
+                    ciDebugBar.toggleDataTable(datatable)
+                }, true);
+               
+            } else if (toggleData === "childrows") {
+
+                let child = links[i].getAttribute("data-child");
+                links[i].addEventListener("click", function() {
+                    ciDebugBar.toggleChildRows(child)
+                }, true);
+                
+            } else {
+                links[i].addEventListener("click", ciDebugBar.toggleRows, true);
+            }
         }
     },
 
@@ -79,7 +96,7 @@ var ciDebugBar = {
         var tab = document.getElementById(this.getAttribute("data-tab"));
 
         // If the label have not a tab stops here
-        if (!tab) {
+        if (! tab) {
             return;
         }
 
@@ -87,13 +104,13 @@ var ciDebugBar = {
         ciDebugBar.createCookie("debug-bar-tab", "", -1);
 
         // Check our current state.
-        var state = tab.style.display;
+        var state = tab.classList.contains("debug-bar-dblock");
 
         // Hide all tabs
         var tabs = document.querySelectorAll("#debug-bar .tab");
 
         for (var i = 0; i < tabs.length; i++) {
-            tabs[i].style.display = "none";
+            ciDebugBar.switchClass(tabs[i], "debug-bar-dblock", "debug-bar-ndisplay");
         }
 
         // Mark all labels as inactive
@@ -104,8 +121,8 @@ var ciDebugBar = {
         }
 
         // Show/hide the selected tab
-        if (state != "block") {
-            tab.style.display = "block";
+        if (! state) {
+            ciDebugBar.switchClass(tab, "debug-bar-ndisplay", "debug-bar-dblock");
             ciDebugBar.addClass(this.parentNode, "active");
             // Create debug-bar-tab cookie to persistent state
             ciDebugBar.createCookie(
@@ -138,6 +155,11 @@ var ciDebugBar = {
         }
     },
 
+    switchClass  : function(el, classFrom, classTo) {
+        ciDebugBar.removeClass(el, classFrom);
+        ciDebugBar.addClass(el, classTo);
+    },
+
     /**
      * Toggle display of another object based on
      * the data-toggle value of this object
@@ -150,8 +172,12 @@ var ciDebugBar = {
             let target = document.getElementById(
                 row.getAttribute("data-toggle")
             );
-            target.style.display =
-                target.style.display === "none" ? "table-row" : "none";
+
+            if (target.classList.contains("debug-bar-ndisplay")) {
+                ciDebugBar.switchClass(target, "debug-bar-ndisplay", "debug-bar-dtableRow");   
+            } else {
+                ciDebugBar.switchClass(target, "debug-bar-dtableRow", "debug-bar-ndisplay");
+            } 
         }
     },
 
@@ -166,7 +192,11 @@ var ciDebugBar = {
         }
 
         if (obj) {
-            obj.style.display = obj.style.display === "none" ? "block" : "none";
+            if (obj.classList.contains("debug-bar-ndisplay")) {
+                ciDebugBar.switchClass(obj, "debug-bar-ndisplay", "debug-bar-dblock");
+            } else {
+                ciDebugBar.switchClass(obj, "debug-bar-dblock", "debug-bar-ndisplay");
+            }
         }
     },
 
@@ -182,7 +212,13 @@ var ciDebugBar = {
         }
 
         if (par && obj) {
-            obj.style.display = obj.style.display === "none" ? "" : "none";
+
+            if (obj.classList.contains("debug-bar-ndisplay")) {
+                ciDebugBar.removeClass(obj, "debug-bar-ndisplay");
+            } else {
+                ciDebugBar.addClass(obj, "debug-bar-ndisplay");
+            }
+
             par.classList.toggle("timeline-parent-open");
         }
     },
@@ -193,11 +229,15 @@ var ciDebugBar = {
      *   Toggle tool bar from full to icon and icon to full
      */
     toggleToolbar: function () {
-        var open = ciDebugBar.toolbar.style.display != "none";
+        var open = ! ciDebugBar.toolbar.classList.contains("debug-bar-ndisplay");
 
-        ciDebugBar.icon.style.display = open == true ? "inline-block" : "none";
-        ciDebugBar.toolbar.style.display =
-            open == false ? "inline-block" : "none";
+        if (open) {
+            ciDebugBar.switchClass(ciDebugBar.icon, "debug-bar-ndisplay", "debug-bar-dinlineBlock");
+            ciDebugBar.switchClass(ciDebugBar.toolbar, "debug-bar-dinlineBlock", "debug-bar-ndisplay");
+        } else {
+            ciDebugBar.switchClass(ciDebugBar.icon, "debug-bar-dinlineBlock", "debug-bar-ndisplay");
+            ciDebugBar.switchClass(ciDebugBar.toolbar, "debug-bar-ndisplay", "debug-bar-dinlineBlock");
+        }
 
         // Remember it for other page loads on this site
         ciDebugBar.createCookie("debug-bar-state", "", -1);
@@ -215,10 +255,13 @@ var ciDebugBar = {
     setToolbarState: function () {
         var open = ciDebugBar.readCookie("debug-bar-state");
 
-        ciDebugBar.icon.style.display =
-            open != "open" ? "inline-block" : "none";
-        ciDebugBar.toolbar.style.display =
-            open == "open" ? "inline-block" : "none";
+        if (open != "open") {
+            ciDebugBar.switchClass(ciDebugBar.icon, "debug-bar-ndisplay", "debug-bar-dinlineBlock");
+            ciDebugBar.switchClass(ciDebugBar.toolbar, "debug-bar-dinlineBlock", "debug-bar-ndisplay");
+        } else {
+            ciDebugBar.switchClass(ciDebugBar.icon, "debug-bar-dinlineBlock", "debug-bar-ndisplay");
+            ciDebugBar.switchClass(ciDebugBar.toolbar, "debug-bar-ndisplay", "debug-bar-dinlineBlock");
+        } 
     },
 
     toggleViewsHints: function () {
@@ -494,7 +537,7 @@ var ciDebugBar = {
         var btn = document.querySelector("[data-tab=ci-views]");
 
         // If the Views Collector is inactive stops here
-        if (!btn) {
+        if (! btn) {
             return;
         }
 
@@ -527,7 +570,7 @@ var ciDebugBar = {
 
                 ciDebugBar.createCookie("debug-bar-position", "", -1);
 
-                if (!position || position === "bottom") {
+                if (! position || position === "bottom") {
                     ciDebugBar.createCookie("debug-bar-position", "top", 365);
                     ciDebugBar.addClass(ciDebugBar.icon, "fixed-top");
                     ciDebugBar.addClass(ciDebugBar.toolbar, "fixed-top");
@@ -569,7 +612,7 @@ var ciDebugBar = {
                 var theme = ciDebugBar.readCookie("debug-bar-theme");
 
                 if (
-                    !theme &&
+                    ! theme &&
                     window.matchMedia("(prefers-color-scheme: dark)").matches
                 ) {
                     // If there is no cookie, and "prefers-color-scheme" is set to "dark"
@@ -617,7 +660,7 @@ var ciDebugBar = {
         var eventSource;
 
         // If the Hot Reload Collector is inactive stops here
-        if (!btn) {
+        if (! btn) {
             return;
         }
 
@@ -716,7 +759,7 @@ var ciDebugBar = {
         for (var i = 0; i < rowGet.length; i++) {
             row = rowGet[i];
             if (!/\/\(.+?\)/.test(rowGet[i].innerText)) {
-                row.style = "cursor: pointer;";
+                ciDebugBar.addClass(row, "debug-bar-pointer");
                 row.setAttribute(
                     "title",
                     location.origin + "/" + ciDebugBar.trimSlash(row.innerText)
@@ -741,7 +784,7 @@ var ciDebugBar = {
                         patt,
                         '<input type="text" placeholder="$1">'
                     ) +
-                    '<input type="submit" value="Go" style="margin-left: 4px;">' +
+                    '<input type="submit" value="Go" class="debug-bar-mleft4">' +
                     "</form>";
             }
         }
diff --git a/system/Debug/Toolbar/Views/toolbar.tpl.php b/system/Debug/Toolbar/Views/toolbar.tpl.php
index 3652a536443c..e2336326088e 100644
--- a/system/Debug/Toolbar/Views/toolbar.tpl.php
+++ b/system/Debug/Toolbar/Views/toolbar.tpl.php
@@ -27,21 +27,21 @@
     <?= file_get_contents(__DIR__ . '/toolbar.js') ?>
 </script>
 <div id="debug-icon" class="debug-bar-ndisplay">
-    <a id="debug-icon-link" href="javascript:void(0)">
+    <a id="debug-icon-link" href="#">
         <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 155 200"><defs/><path fill="#dd4814" d="M73.7 3.7c2.2 7.9-.7 18.5-7.8 29-1.8 2.6-10.7 12.2-19.7 21.3-23.9 24-33.6 37.1-40.3 54.4-7.9 20.6-7.8 40.8.5 58.2C12.8 180 27.6 193 42.5 198l6 2-3-2.2c-21-15.2-22.9-38.7-4.8-58.8 2.5-2.7 4.8-5 5.1-5 .4 0 .7 2.7.7 6.1 0 5.7.2 6.2 3.7 9.5 3 2.7 4.6 3.4 7.8 3.4 5.6 0 9.9-2.4 11.6-6.5 2.9-6.9 1.6-12-5-20.5-10.5-13.4-11.7-23.3-4.3-34.7l3.1-4.8.7 4.7c1.3 8.2 5.8 12.9 25 25.8 20.9 14.1 30.6 26.1 32.8 40.5 1.1 7.2-.1 16.1-3.1 21.8-2.7 5.3-11.2 14.3-16.5 17.4-2.4 1.4-4.3 2.6-4.3 2.8 0 .2 2.4-.4 5.3-1.4 24.1-8.3 42.7-27.1 48.2-48.6 1.9-7.6 1.9-20.2-.1-28.5-3.5-15.2-14.6-30.5-29.9-41.2l-7-4.9-.6 3.3c-.8 4.8-2.6 7.6-5.9 9.3-4.5 2.3-10.3 1.9-13.8-1-6.7-5.7-7.8-14.6-3.7-30.5 3-11.6 3.2-20.6.5-29.1C88.3 18 80.6 6.3 74.8 2.2 73.1.9 73 1 73.7 3.7z"/></svg>
     </a>
 </div>
 <div id="debug-bar">
     <div class="toolbar">
-        <span id="toolbar-position"><a href="javascript: void(0)">&#8597;</a></span>
-        <span id="toolbar-theme"><a href="javascript: void(0)">&#128261;</a></span>
+        <span id="toolbar-position"><a href="#">&#8597;</a></span>
+        <span id="toolbar-theme"><a href="#">&#128261;</a></span>
         <span id="hot-reload-btn" class="ci-label">
-            <a id="debug-hot-reload" href="javascript: void(0)" title="Toggle Hot Reload">
+            <a id="debug-hot-reload" href="#" title="Toggle Hot Reload">
                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNklEQVR4nN2US04CQRCGv/DaiBxEvYWuBRPDKSCIXsCdcg0ULqTI8xIGN7JwTCU/ScV5tTO64Us6maSq/7+nuqvgkLgHopTl+QAWwBToAg3+wMTzM7YBrihp4jkCToEB8OJyRkCFAB5yDDxVoAd8OpNMOkrcAeMAgz3nzsQ0EqkDayXZqXy5Qugrdy2tGNdKeNWv40xCqGpvJK0YEwXt8ooylMZzUnCh4EkJgzNpmFaMrYLNEgbH0thmGVhSUVrSeE8KLv+7RBMFb0oY3EnDeihGN+WZhmJ7ZlnPtKHB5RvtNwy0d5XWaGgqRmp7a/9QLjRevoDLvOSRM+nnlKumk++0xwZlLhVnEulOhnohTS37vnU1t5M/ho7rPR03/LKW1bxNQep6ETZb5mpGW2/Ak2KpF3oYfAPX9Xpc671kqwAAAABJRU5ErkJggg==" />
             </a>
         </span>
         <span class="ci-label">
-            <a href="javascript: void(0)" data-tab="ci-timeline">
+            <a href="#" data-tab="ci-timeline">
                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAD7SURBVEhLY6ArSEtLK09NTbWHcvGC9PR0BaDaQiAdUl9fzwQVxg+AFvwHamqHcnGCpKQkeaDa9yD1UD09UCn8AKaBWJySkmIApFehi0ONwwRQBceBLurAh4FqFoHUAtkrgPgREN+ByYEw1DhMANVEMIhAYQ5U1wtU/wmILwLZRlAp/IBYC8gGw88CaFj3A/FnIL4ETDXGUCnyANSC/UC6HIpnQMXAqQXIvo0khxNDjcMEQEmU9AzDuNI7Lgw1DhOAJIEuhQcRKMcC+e+QNHdDpcgD6BaAANSSQqBcENFlDi6AzQKqgkFlwWhxjVI8o2OgmkFaXI8CTMDAAAAxd1O4FzLMaAAAAABJRU5ErkJggg==">
                 <span class="hide-sm"><?= $totalTime ?> ms &nbsp; <?= $totalMemory ?> MB</span>
             </a>
@@ -50,7 +50,7 @@
         <?php foreach ($collectors as $c) : ?>
             <?php if (! $c['isEmpty'] && ($c['hasTabContent'] || $c['hasLabel'])) : ?>
                 <span class="ci-label">
-                    <a href="javascript: void(0)" data-tab="ci-<?= $c['titleSafe'] ?>">
+                    <a href="#" data-tab="ci-<?= $c['titleSafe'] ?>">
                         <img src="<?= $c['icon'] ?>">
                         <span class="hide-sm">
                             <?= $c['title'] ?>
@@ -64,7 +64,7 @@
         <?php endforeach ?>
 
         <span class="ci-label">
-            <a href="javascript: void(0)" data-tab="ci-vars">
+            <a href="#" data-tab="ci-vars">
                 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACLSURBVEhLYxgFJIHU1NSraWlp/6H4T0pKSjRUijoAyXAwBlrYDpViAFpmARQrJwZDtWACoCROC4D8CnR5XBiqBRMADfyNprgRKkUdAApzoCUdUNwE5MtApYYIALp6NBWBMVQLJgAaOJqK8AOgq+mSio6DggjEBtLUT0UwQ5HZIADkj6aiUTAggIEBANAEDa/lkCRlAAAAAElFTkSuQmCC">
                 <span class="hide-sm">Vars</span>
             </a>
@@ -72,7 +72,7 @@
 
         <h1>
             <span class="ci-label">
-                <a href="javascript: void(0)" data-tab="ci-config">
+                <a href="#" data-tab="ci-config">
                     <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 155 200"><defs/><path fill="#dd4814" d="M73.7 3.7c2.2 7.9-.7 18.5-7.8 29-1.8 2.6-10.7 12.2-19.7 21.3-23.9 24-33.6 37.1-40.3 54.4-7.9 20.6-7.8 40.8.5 58.2C12.8 180 27.6 193 42.5 198l6 2-3-2.2c-21-15.2-22.9-38.7-4.8-58.8 2.5-2.7 4.8-5 5.1-5 .4 0 .7 2.7.7 6.1 0 5.7.2 6.2 3.7 9.5 3 2.7 4.6 3.4 7.8 3.4 5.6 0 9.9-2.4 11.6-6.5 2.9-6.9 1.6-12-5-20.5-10.5-13.4-11.7-23.3-4.3-34.7l3.1-4.8.7 4.7c1.3 8.2 5.8 12.9 25 25.8 20.9 14.1 30.6 26.1 32.8 40.5 1.1 7.2-.1 16.1-3.1 21.8-2.7 5.3-11.2 14.3-16.5 17.4-2.4 1.4-4.3 2.6-4.3 2.8 0 .2 2.4-.4 5.3-1.4 24.1-8.3 42.7-27.1 48.2-48.6 1.9-7.6 1.9-20.2-.1-28.5-3.5-15.2-14.6-30.5-29.9-41.2l-7-4.9-.6 3.3c-.8 4.8-2.6 7.6-5.9 9.3-4.5 2.3-10.3 1.9-13.8-1-6.7-5.7-7.8-14.6-3.7-30.5 3-11.6 3.2-20.6.5-29.1C88.3 18 80.6 6.3 74.8 2.2 73.1.9 73 1 73.7 3.7z"/></svg>
                     <?= $CI_VERSION ?>
                 </a>
@@ -80,7 +80,7 @@
         </h1>
 
         <!-- Open/Close Toggle -->
-        <a id="debug-bar-link" href="javascript:void(0)" title="Open/Close">
+        <a id="debug-bar-link" href="#" title="Open/Close">
             <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEPSURBVEhL7ZVLDoJAEEThRuoGDwSEG+jCuFU34s3AK3APP1VDDSGMqI1xx0s6M/2rnlHEaMZElmWrPM+vsDvsYbQ7+us0TReSC2EBrEHxCevRYuppYLXkQpC8sVCuGfTvqSE3hFdFwUGuGfRvqSE35NUAfKZrbQNQm2jrMA+gOK+M+FmhDsRL5voHMA8gFGecq0JOXLWlQg7E7AMIxZnjOiZOEJ82gFCcedUE4gS56QP8yf8ywItz7e+RituKlkkDBoIOH4Nd4HZD4NsGYJ/Abn1xEVOcuZ8f0zc/tHiYmzTAwscBvDIK/veyQ9K/rnewjdF26q0kF1IUxZIFPAVW98x/a+qp8L2M/+HMhETRE6S8TxpZ7KGXAAAAAElFTkSuQmCC">
         </a>
     </div>
@@ -124,7 +124,7 @@
         <?php if (isset($vars['varData'])) : ?>
             <?php foreach ($vars['varData'] as $heading => $items) : ?>
 
-                <a href="javascript:void(0)" onclick="ciDebugBar.toggleDataTable('<?= strtolower(str_replace(' ', '-', $heading)) ?>'); return false;">
+                <a href="#" data-toggle="datatable" data-table="<?= strtolower(str_replace(' ', '-', $heading)) ?>">
                     <h2><?= $heading ?></h2>
                 </a>
 
@@ -148,7 +148,7 @@
         <?php endif ?>
 
         <!-- Session -->
-        <a href="javascript:void(0)" onclick="ciDebugBar.toggleDataTable('session'); return false;">
+        <a href="#" data-toggle="datatable" data-table="session">
             <h2>Session User Data</h2>
         </a>
 
@@ -174,7 +174,7 @@
         <h2>Request <span>( <?= $vars['request'] ?> )</span></h2>
 
         <?php if (isset($vars['get']) && $get = $vars['get']) : ?>
-            <a href="javascript:void(0)" onclick="ciDebugBar.toggleDataTable('get'); return false;">
+            <a href="#" data-toggle="datatable" data-table="get">
                 <h3>$_GET</h3>
             </a>
 
@@ -191,7 +191,7 @@
         <?php endif ?>
 
         <?php if (isset($vars['post']) && $post = $vars['post']) : ?>
-            <a href="javascript:void(0)" onclick="ciDebugBar.toggleDataTable('post'); return false;">
+            <a href="#" data-toggle="datatable" data-table="post">
                 <h3>$_POST</h3>
             </a>
 
@@ -208,7 +208,7 @@
         <?php endif ?>
 
         <?php if (isset($vars['headers']) && $headers = $vars['headers']) : ?>
-            <a href="javascript:void(0)" onclick="ciDebugBar.toggleDataTable('request_headers'); return false;">
+            <a href="#" data-toggle="datatable" data-table="request_headers">
                 <h3>Headers</h3>
             </a>
 
@@ -225,7 +225,7 @@
         <?php endif ?>
 
         <?php if (isset($vars['cookies']) && $cookies = $vars['cookies']) : ?>
-            <a href="javascript:void(0)" onclick="ciDebugBar.toggleDataTable('cookie'); return false;">
+            <a href="#" data-toggle="datatable" data-table="cookie">
                 <h3>Cookies</h3>
             </a>
 
@@ -246,7 +246,7 @@
         </h2>
 
         <?php if (isset($vars['response']['headers']) && $headers = $vars['response']['headers']) : ?>
-            <a href="javascript:void(0)" onclick="ciDebugBar.toggleDataTable('response_headers'); return false;">
+            <a href="#" data-toggle="datatable" data-table="response_headers">
                 <h3>Headers</h3>
             </a>
 
diff --git a/system/Debug/Toolbar/Views/toolbarloader.js b/system/Debug/Toolbar/Views/toolbarloader.js
index 7e5914354481..a8bacb4c69cd 100644
--- a/system/Debug/Toolbar/Views/toolbarloader.js
+++ b/system/Debug/Toolbar/Views/toolbarloader.js
@@ -74,8 +74,11 @@ function newXHR() {
                     let h2 = document.querySelector('#ci-history > h2');
 
                     if (h2) {
-                        h2.innerHTML = 'History <small>You have new debug data.</small> <button onclick="loadDoc(' + debugbarTime + ')">Update</button>';
+                        h2.innerHTML = 'History <small>You have new debug data.</small> <button id="ci-history-update">Update</button>';
                         document.querySelector('a[data-tab="ci-history"] > span > .badge').className += ' active';
+                        document.getElementById('ci-history-update').addEventListener('click', function () {
+                            loadDoc(debugbarTime);
+                        }, false)
                     }
                 }
             }