--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -1085,16 +1085,22 @@ a.learn-more-link.webconsole-learn-more-
 }
 
 .theme-dark .webconsole-output-wrapper .message.error .stacktrace,
 .theme-light .webconsole-output-wrapper .message.error .stacktrace {
   /* Removing specificity from the old console */
   background-color: inherit;
 }
 
+/* console.trace() */
+.new-consoletrace {
+  /* Padding extra arguments */
+  padding-right: 5px;
+}
+
 /* console.table() */
 .new-consoletable {
   width: 100%;
   border-collapse: collapse;
   --consoletable-border: var(--theme-splitter-color);
   margin-block-end: var(--attachment-margin-block-end);
   color: var(--theme-body-color);
 }
@@ -1248,9 +1254,9 @@ body #output-container {
 }
 
 .sidebar-close-button::before {
   background-image: var(--close-button-image);
 }
 
 .sidebar-contents .object-inspector {
   min-width: 100%;
-}
\ No newline at end of file
+}

--- a/devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js
@@ -60,17 +60,24 @@ function ConsoleApiCall(props) {
     messageId,
     parameters,
     userProvidedStyles,
     serviceContainer,
     type,
   };
 
   if (type === "trace") {
-    messageBody = dom.span({className: "cm-variable"}, "console.trace()");
+    let parametersBody = Array.isArray(parameters) && parameters.length > 0
+      ? formatReps(messageBodyConfig)
+      : [];
+
+    messageBody = [
+      dom.span({className: "cm-variable new-consoletrace"}, "console.trace()"),
+      ...parametersBody
+    ];
   } else if (type === "assert") {
     let reps = formatReps(messageBodyConfig);
     messageBody = dom.span({ className: "cm-variable" }, "Assertion failed: ", reps);
   } else if (type === "table") {
     // TODO: Chrome does not output anything, see if we want to keep this
     messageBody = dom.span({className: "cm-variable"}, "console.table()");
   } else if (parameters) {
     messageBody = formatReps(messageBodyConfig);

--- a/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js
@@ -201,16 +201,50 @@ describe("ConsoleAPICall component:", ()
       expect(frameLinks.eq(2).find(".frame-link-function-display-name").text())
         .toBe("triggerPacket");
       expect(frameLinks.eq(2).find(".frame-link-filename").text())
         .toBe(filepath);
 
       // it should not be collapsible.
       expect(wrapper.find(`.theme-twisty`).length).toBe(0);
     });
+    it("render with arguments", () => {
+      const message = stubPreparedMessages.get(
+        "console.trace('bar', {'foo': 'bar'}, [1,2,3])");
+      const wrapper = render(ConsoleApiCall({ message, serviceContainer, open: true }));
+
+      const filepath = "http://example.com/browser/devtools/client/webconsole/" +
+                       "new-console-output/test/fixtures/stub-generators/" +
+                       "test-console-api.html";
+
+      expect(wrapper.find(".message-body").text())
+        .toBe("console.trace()bar Object { foo: \"bar\" } Array [ 1, 2, 3 ]");
+
+      const frameLinks = wrapper.find(
+        `.stack-trace span.frame-link[data-url]`);
+      expect(frameLinks.length).toBe(3);
+
+      expect(frameLinks.eq(0).find(".frame-link-function-display-name").text())
+        .toBe("testStacktraceWithLog");
+      expect(frameLinks.eq(0).find(".frame-link-filename").text())
+        .toBe(filepath);
+
+      expect(frameLinks.eq(1).find(".frame-link-function-display-name").text())
+        .toBe("foo");
+      expect(frameLinks.eq(1).find(".frame-link-filename").text())
+        .toBe(filepath);
+
+      expect(frameLinks.eq(2).find(".frame-link-function-display-name").text())
+        .toBe("triggerPacket");
+      expect(frameLinks.eq(2).find(".frame-link-filename").text())
+        .toBe(filepath);
+
+      // it should not be collapsible.
+      expect(wrapper.find(`.theme-twisty`).length).toBe(0);
+    });
   });
 
   describe("console.group", () => {
     it("renders", () => {
       const message = stubPreparedMessages.get("console.group('bar')");
       const wrapper = render(ConsoleApiCall({ message, serviceContainer, open: true }));
 
       expect(wrapper.find(".message-body").text()).toBe("bar");

--- a/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/stub-snippets.js
+++ b/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/stub-snippets.js
@@ -53,16 +53,29 @@ function testStacktraceFiltering() {
 }
 function foo() {
   testStacktraceFiltering()
 }
 
 foo()
 `});
 
+consoleApi.set("console.trace('bar', {'foo': 'bar'}, [1,2,3])", {
+  keys: ["console.trace('bar', {'foo': 'bar'}, [1,2,3])"],
+  code: `
+function testStacktraceWithLog() {
+  console.trace('bar', {'foo': 'bar'}, [1,2,3])
+}
+function foo() {
+  testStacktraceWithLog()
+}
+
+foo()
+`});
+
 consoleApi.set("console.time('bar')", {
   keys: ["console.time('bar')", "timerAlreadyExists",
          "console.timeEnd('bar')", "timerDoesntExist"],
   code: `
 console.time("bar");
 console.time("bar");
 console.timeEnd("bar");
 console.timeEnd("bar");

--- a/devtools/client/webconsole/new-console-output/test/fixtures/stubs/consoleApi.js
+++ b/devtools/client/webconsole/new-console-output/test/fixtures/stubs/consoleApi.js
@@ -772,16 +772,103 @@ stubPreparedMessages.set("console.trace(
   },
   "groupId": null,
   "exceptionDocURL": null,
   "userProvidedStyles": [],
   "notes": null,
   "indent": 0
 }));
 
+stubPreparedMessages.set("console.trace('bar', {'foo': 'bar'}, [1,2,3])", new ConsoleMessage({
+  "id": "1",
+  "allowRepeating": true,
+  "source": "console-api",
+  "timeStamp": 1513255735128,
+  "type": "trace",
+  "helperType": null,
+  "level": "log",
+  "messageText": null,
+  "parameters": [
+    "bar",
+    {
+      "type": "object",
+      "actor": "server1.conn0.child1/obj36",
+      "class": "Object",
+      "extensible": true,
+      "frozen": false,
+      "sealed": false,
+      "ownPropertyLength": 1,
+      "preview": {
+        "kind": "Object",
+        "ownProperties": {
+          "foo": {
+            "configurable": true,
+            "enumerable": true,
+            "writable": true,
+            "value": "bar"
+          }
+        },
+        "ownSymbols": [],
+        "ownPropertiesLength": 1,
+        "ownSymbolsLength": 0,
+        "safeGetterValues": {}
+      }
+    },
+    {
+      "type": "object",
+      "actor": "server1.conn0.child1/obj37",
+      "class": "Array",
+      "extensible": true,
+      "frozen": false,
+      "sealed": false,
+      "ownPropertyLength": 4,
+      "preview": {
+        "kind": "ArrayLike",
+        "length": 3,
+        "items": [
+          1,
+          2,
+          3
+        ]
+      }
+    }
+  ],
+  "repeatId": "{\"frame\":{\"source\":\"http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html\",\"line\":3,\"column\":3},\"groupId\":null,\"indent\":0,\"level\":\"log\",\"messageText\":null,\"parameters\":[\"bar\",{\"type\":\"object\",\"actor\":\"server1.conn0.child1/obj36\",\"class\":\"Object\",\"extensible\":true,\"frozen\":false,\"sealed\":false,\"ownPropertyLength\":1,\"preview\":{\"kind\":\"Object\",\"ownProperties\":{\"foo\":{\"configurable\":true,\"enumerable\":true,\"writable\":true,\"value\":\"bar\"}},\"ownSymbols\":[],\"ownPropertiesLength\":1,\"ownSymbolsLength\":0,\"safeGetterValues\":{}}},{\"type\":\"object\",\"actor\":\"server1.conn0.child1/obj37\",\"class\":\"Array\",\"extensible\":true,\"frozen\":false,\"sealed\":false,\"ownPropertyLength\":4,\"preview\":{\"kind\":\"ArrayLike\",\"length\":3,\"items\":[1,2,3]}}],\"source\":\"console-api\",\"type\":\"trace\",\"userProvidedStyles\":[]}",
+  "stacktrace": [
+    {
+      "columnNumber": 3,
+      "filename": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html",
+      "functionName": "testStacktraceWithLog",
+      "lineNumber": 3
+    },
+    {
+      "columnNumber": 3,
+      "filename": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html",
+      "functionName": "foo",
+      "lineNumber": 6
+    },
+    {
+      "columnNumber": 1,
+      "filename": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html",
+      "functionName": "triggerPacket",
+      "lineNumber": 9
+    }
+  ],
+  "frame": {
+    "source": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html",
+    "line": 3,
+    "column": 3
+  },
+  "groupId": null,
+  "exceptionDocURL": null,
+  "userProvidedStyles": [],
+  "notes": null,
+  "indent": 0
+}));
+
 stubPreparedMessages.set("console.time('bar')", new ConsoleMessage({
   "id": "1",
   "allowRepeating": true,
   "source": "console-api",
   "timeStamp": 1502884924757,
   "type": "nullMessage",
   "helperType": null,
   "level": "log",
@@ -2018,16 +2105,102 @@ stubPackets.set("console.trace()", {
       }
     ],
     "workerType": "none",
     "styles": [],
     "category": "webdev"
   }
 });
 
+stubPackets.set("console.trace('bar', {'foo': 'bar'}, [1,2,3])", {
+  "from": "server1.conn0.child1/consoleActor2",
+  "type": "consoleAPICall",
+  "message": {
+    "addonId": "",
+    "arguments": [
+      "bar",
+      {
+        "type": "object",
+        "actor": "server1.conn0.child1/obj36",
+        "class": "Object",
+        "extensible": true,
+        "frozen": false,
+        "sealed": false,
+        "ownPropertyLength": 1,
+        "preview": {
+          "kind": "Object",
+          "ownProperties": {
+            "foo": {
+              "configurable": true,
+              "enumerable": true,
+              "writable": true,
+              "value": "bar"
+            }
+          },
+          "ownSymbols": [],
+          "ownPropertiesLength": 1,
+          "ownSymbolsLength": 0,
+          "safeGetterValues": {}
+        }
+      },
+      {
+        "type": "object",
+        "actor": "server1.conn0.child1/obj37",
+        "class": "Array",
+        "extensible": true,
+        "frozen": false,
+        "sealed": false,
+        "ownPropertyLength": 4,
+        "preview": {
+          "kind": "ArrayLike",
+          "length": 3,
+          "items": [
+            1,
+            2,
+            3
+          ]
+        }
+      }
+    ],
+    "columnNumber": 3,
+    "counter": null,
+    "filename": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html",
+    "functionName": "testStacktraceWithLog",
+    "groupName": "",
+    "level": "trace",
+    "lineNumber": 3,
+    "private": false,
+    "timeStamp": 1513255735128,
+    "timer": null,
+    "stacktrace": [
+      {
+        "columnNumber": 3,
+        "filename": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html",
+        "functionName": "testStacktraceWithLog",
+        "lineNumber": 3
+      },
+      {
+        "columnNumber": 3,
+        "filename": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html",
+        "functionName": "foo",
+        "lineNumber": 6
+      },
+      {
+        "columnNumber": 1,
+        "filename": "http://example.com/browser/devtools/client/webconsole/new-console-output/test/fixtures/stub-generators/test-console-api.html",
+        "functionName": "triggerPacket",
+        "lineNumber": 9
+      }
+    ],
+    "workerType": "none",
+    "styles": [],
+    "category": "webdev"
+  }
+});
+
 stubPackets.set("console.time('bar')", {
   "from": "server1.conn0.child1/consoleActor2",
   "type": "consoleAPICall",
   "message": {
     "addonId": "",
     "arguments": [
       "bar"
     ],