diff --git a/plugins/system/debug/JavascriptRenderer.php b/plugins/system/debug/JavascriptRenderer.php
new file mode 100644
index 0000000000000..26791d7e759e1
--- /dev/null
+++ b/plugins/system/debug/JavascriptRenderer.php
@@ -0,0 +1,141 @@
+<?php
+/**
+ * @package     Joomla.Plugin
+ * @subpackage  System.Debug
+ *
+ * @copyright   Copyright (C) 2019 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+namespace Joomla\Plugin\System\Debug;
+
+use DebugBar\DebugBar;
+use DebugBar\JavascriptRenderer as DebugBarJavascriptRenderer;
+use Joomla\CMS\Factory;
+
+/**
+ * Custom JavascriptRenderer for DebugBar
+ *
+ * @since  __DEPLOY_VERSION__
+ */
+class JavascriptRenderer extends DebugBarJavascriptRenderer
+{
+	/**
+	 * Class constructor.
+	 *
+	 * @param   \DebugBar\DebugBar  $debugBar  DebugBar instance
+	 * @param   string              $baseUrl   The base URL from which assets will be served
+	 * @param   string              $basePath  The path which assets are relative to
+	 *
+	 * @since  __DEPLOY_VERSION__
+	 */
+	public function __construct(DebugBar $debugBar, $baseUrl = null, $basePath = null)
+	{
+		parent::__construct($debugBar, $baseUrl, $basePath);
+
+		// Disable features that loaded by Joomla! API, or not in use
+		$this->setEnableJqueryNoConflict(false);
+		$this->disableVendor('jquery');
+		$this->disableVendor('fontawesome');
+	}
+
+	/**
+	 * Renders the html to include needed assets
+	 *
+	 * Only useful if Assetic is not used
+	 *
+	 * @return string
+	 *
+	 * @since  __DEPLOY_VERSION__
+	 */
+	public function renderHead()
+	{
+		list($cssFiles, $jsFiles, $inlineCss, $inlineJs, $inlineHead) = $this->getAssets(null, self::RELATIVE_URL);
+		$html = '';
+		$doc  = Factory::getApplication()->getDocument();
+
+		foreach ($cssFiles as $file)
+		{
+			$html .= sprintf('<link rel="stylesheet" type="text/css" href="%s">' . "\n", $file);
+		}
+
+		foreach ($inlineCss as $content)
+		{
+			$html .= sprintf('<style type="text/css">%s</style>' . "\n", $content);
+		}
+
+		foreach ($jsFiles as $file)
+		{
+			$html .= sprintf('<script type="text/javascript" src="%s" defer></script>' . "\n", $file);
+		}
+
+		$nonce = '';
+
+		if ($doc->cspNonce)
+		{
+			$nonce = ' nonce="' . $doc->cspNonce . '"';
+		}
+
+		foreach ($inlineJs as $content)
+		{
+			$html .= sprintf('<script type="module"%s>%s</script>' . "\n", $nonce, $content);
+		}
+
+		foreach ($inlineHead as $content)
+		{
+			$html .= $content . "\n";
+		}
+
+		return $html;
+	}
+
+	/**
+	 * Returns the code needed to display the debug bar
+	 *
+	 * AJAX request should not render the initialization code.
+	 *
+	 * @param   boolean  $initialize         Whether or not to render the debug bar initialization code
+	 * @param   boolean  $renderStackedData  Whether or not to render the stacked data
+	 *
+	 * @return string
+	 *
+	 * @since  __DEPLOY_VERSION__
+	 */
+	public function render($initialize = true, $renderStackedData = true)
+	{
+		$js  = '';
+		$doc = Factory::getApplication()->getDocument();
+
+		if ($initialize)
+		{
+			$js = $this->getJsInitializationCode();
+		}
+
+		if ($renderStackedData && $this->debugBar->hasStackedData())
+		{
+			foreach ($this->debugBar->getStackedData() as $id => $data)
+			{
+				$js .= $this->getAddDatasetCode($id, $data, '(stacked)');
+			}
+		}
+
+		$suffix = !$initialize ? '(ajax)' : null;
+		$js .= $this->getAddDatasetCode($this->debugBar->getCurrentRequestId(), $this->debugBar->getData(), $suffix);
+
+		$nonce = '';
+
+		if ($doc->cspNonce)
+		{
+			$nonce = ' nonce="' . $doc->cspNonce . '"';
+		}
+
+		if ($this->useRequireJs)
+		{
+			return "<script type=\"module\"$nonce>\nrequire(['debugbar'], function(PhpDebugBar){ $js });\n</script>\n";
+		}
+		else
+		{
+			return "<script type=\"module\"$nonce>\n$js\n</script>\n";
+		}
+	}
+}
diff --git a/plugins/system/debug/debug.php b/plugins/system/debug/debug.php
index 15bd3af39172a..1e5e7c1aee0a8 100644
--- a/plugins/system/debug/debug.php
+++ b/plugins/system/debug/debug.php
@@ -31,6 +31,7 @@
 use Joomla\Plugin\System\Debug\DataCollector\ProfileCollector;
 use Joomla\Plugin\System\Debug\DataCollector\QueryCollector;
 use Joomla\Plugin\System\Debug\DataCollector\SessionCollector;
+use Joomla\Plugin\System\Debug\JavascriptRenderer;
 use Joomla\Plugin\System\Debug\Storage\FileStorage;
 
 /**
@@ -185,11 +186,22 @@ public function onAfterDispatch()
 		{
 			// Use our own jQuery and fontawesome instead of the debug bar shipped version
 			$assetManager = $this->app->getDocument()->getWebAssetManager();
-			$assetManager->enableAsset('jquery-noconflict');
-			$assetManager->enableAsset('fontawesome-free');
-
-			HTMLHelper::_('stylesheet', 'plg_system_debug/debug.css', array('version' => 'auto', 'relative' => true));
-			HTMLHelper::_('script', 'plg_system_debug/debug.min.js', array('version' => 'auto', 'relative' => true));
+			$assetManager->getRegistry()->add(
+				new Joomla\CMS\WebAsset\WebAssetItem(
+					'plg.system.debug',
+					[
+						'dependencies' => ['jquery', 'fontawesome-free'],
+						'css' => ['plg_system_debug/debug.css'],
+						'js'  => ['plg_system_debug/debug.min.js'],
+						'attribute' => [
+							'plg_system_debug/debug.min.js' => [
+								'defer' => true,
+							],
+						]
+					]
+				)
+			);
+			$assetManager->enableAsset('plg.system.debug');
 		}
 
 		// Disable asset media version if needed.
@@ -267,16 +279,19 @@ public function onAfterRespond()
 			$this->debugBar->addCollector(new LanguageErrorsCollector($this->params));
 		}
 
-		$debugBarRenderer = $this->debugBar->getJavascriptRenderer();
+		// Only render for HTML output.
+		if ($this->app->getDocument()->getType() !== 'html')
+		{
+			$this->debugBar->stackData();
+
+			return;
+		}
+
+		$debugBarRenderer = new JavascriptRenderer($this->debugBar, Uri::root(true) . '/media/vendor/debugbar/');
 		$openHandlerUrl   = Uri::base(true) . '/index.php?option=com_ajax&plugin=debug&group=system&format=raw&action=openhandler';
 		$openHandlerUrl  .= '&' . Session::getFormToken() . '=1';
 
 		$debugBarRenderer->setOpenHandlerUrl($openHandlerUrl);
-		$debugBarRenderer->setBaseUrl(Uri::root(true) . '/media/vendor/debugbar/');
-
-		$debugBarRenderer->disableVendor('jquery');
-		$debugBarRenderer->setEnableJqueryNoConflict(false);
-		$debugBarRenderer->disableVendor('fontawesome');
 
 		/**
 		 * @todo disable highlightjs from the DebugBar, import it through NPM
@@ -285,14 +300,6 @@ public function onAfterRespond()
 		 *       $debugBarRenderer->disableVendor('highlightjs');
 		 */
 
-		// Only render for HTML output.
-		if ($this->app->getDocument()->getType() !== 'html')
-		{
-			$this->debugBar->stackData();
-
-			return;
-		}
-
 		// Capture output.
 		$contents = ob_get_contents();