--- a/devtools/client/webconsole/new-console-output/utils/messages.js
+++ b/devtools/client/webconsole/new-console-output/utils/messages.js
@@ -16,26 +16,46 @@ const {
   SEVERITY_ERROR,
   SEVERITY_WARNING,
   SEVERITY_LOG,
 } = require("../constants");
 const WebConsoleUtils = require("devtools/shared/webconsole/utils").Utils;
 const STRINGS_URI = "chrome://devtools/locale/webconsole.properties";
 const l10n = new WebConsoleUtils.L10n(STRINGS_URI);
 
+function convertCachedPacket(packet) {
+  // The devtools server provides cached message packets in a different shape
+  // from those of consoleApiCalls, so we prepare them for preparation here.
+  let convertPacket = {};
+  if (packet._type === "ConsoleAPI") {
+    convertPacket.message = packet;
+    convertPacket.type = "consoleAPICall";
+  } else if (packet._type === "PageError") {
+    convertPacket.pageError = packet;
+    convertPacket.type = "pageError";
+  } else {
+    throw new Error("Unexpected packet type");
+  }
+  return convertPacket;
+}
+
 function prepareMessage(packet) {
   // @TODO turn this into an Immutable Record.
   let allowRepeating;
   let category;
   let data;
   let messageType;
   let repeat;
   let repeatId;
   let severity;
 
+  if (packet._type) {
+    packet = convertCachedPacket(packet);
+  }
+
   switch (packet.type) {
     case "consoleAPICall":
       data = Object.assign({}, packet.message);
 
       if (data.level === "clear") {
         data.arguments = [l10n.getStr("consoleCleared")];
       }
 

--- a/devtools/client/webconsole/webconsole.js
+++ b/devtools/client/webconsole/webconsole.js
@@ -3267,20 +3267,25 @@ WebConsoleConnectionProxy.prototype = {
       // connection attempt is successful, nonetheless.
       console.error("Web Console getCachedMessages error: invalid state.");
     }
 
     let messages =
       response.messages.concat(...this.webConsoleClient.getNetworkEvents());
     messages.sort((a, b) => a.timeStamp - b.timeStamp);
 
-    this.webConsoleFrame.displayCachedMessages(messages);
-
-    if (!this._hasNativeConsoleAPI) {
-      this.webConsoleFrame.logWarningAboutReplacedAPI();
+    if (this.webConsoleFrame.NEW_CONSOLE_OUTPUT_ENABLED) {
+      for (let packet of messages) {
+        this.webConsoleFrame.newConsoleOutput.dispatchMessageAdd(packet);
+      }
+    } else {
+      this.webConsoleFrame.displayCachedMessages(messages);
+      if (!this._hasNativeConsoleAPI) {
+        this.webConsoleFrame.logWarningAboutReplacedAPI();
+      }
     }
 
     this.connected = true;
     this._connectDefer.resolve(this);
   },
 
   /**
    * The "pageError" message type handler. We redirect any page errors to the UI