Log console invocations to the terminal.

packages/cli/src/commands/server/middleware/MiddlewareManager.js

@@ -21,6 +21,7 @@ import getSecurityHeadersMiddleware from './getSecurityHeadersMiddleware';
 import loadRawBodyMiddleware from './loadRawBodyMiddleware';
 import openStackFrameInEditorMiddleware from './openStackFrameInEditorMiddleware';
 import openURLMiddleware from './openURLMiddleware';
+import logToConsoleMiddleware from './logToConsoleMiddleware';
 import statusPageMiddleware from './statusPageMiddleware';
 import systraceProfileMiddleware from './systraceProfileMiddleware';
 import getDevToolsMiddleware from './getDevToolsMiddleware';
@@ -53,6 +54,7 @@ export default class MiddlewareManager {
       .use('/debugger-ui', serveStatic(debuggerUIFolder))
       .use(openStackFrameInEditorMiddleware(this.options))
       .use(openURLMiddleware)
+      .use(logToConsoleMiddleware)
       .use(copyToClipBoardMiddleware)
       .use(statusPageMiddleware)
       .use(systraceProfileMiddleware)

packages/cli/src/commands/server/middleware/logToConsoleMiddleware.js

@@ -0,0 +1,37 @@
+'use strict';
+
+import chalk from 'chalk';
+
+let cache = [];
+let timer;
+
+const log = ({level, data, id}) => {
+  const logFunction = level !== 'trace' && console[level] ? level : 'log';
+  const color =
+    level === 'error' ? 'red' : level === 'warn' ? 'yellow' : 'white';
+
+  console[logFunction].apply(console, [
+    chalk.inverse[color].bold(` ${level.toUpperCase()} `),
+    ...data,
+  ]);
+};
+
+// Hold messages and flush them to reduce the amount of out-of-order logs
+const flush = () => {
+  timer = null;
+  cache.sort((a, b) => a.id - b.id).forEach(log);
+  cache = [];
+};
+
+export default (req, res, next) => {
+  if (req.url === '/log-to-console') {
+    cache.push(JSON.parse(req.rawBody));
+    if (!timer) {
+      timer = setTimeout(flush, 200);
+    }
+
+    res.end('OK');
+  } else {
+    next();
+  }
+};