Next.js14项目中如何将浏览器DevTools Console日志同步至VS Code终端？

以下是两种可行的实现方式，无需依赖第三方外部工具，直接通过代码实现日志同步：

方案一：自定义Console封装 + 后端API接收 #

通过重写浏览器端的console方法，将日志发送到Next.js的API路由，再由后端将日志输出到VS Code终端。

1. 前端创建日志代理工具 #

在app/utils/console-proxy.js中编写代码：

// 保存原始console方法，避免循环日志
const originalConsole = {
  log: console.log,
  error: console.error,
  warn: console.warn,
  info: console.info
};

// 向后端API发送日志的函数
async function sendLogToServer(type, args) {
  try {
    await fetch('/api/logs', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        type,
        timestamp: new Date().toISOString(),
        // 序列化对象类型的日志参数
        args: args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg)
      })
    });
  } catch (err) {
    // 使用原始console输出错误，防止循环
    originalConsole.error('日志发送失败:', err);
  }
}

// 重写console方法，同时保留浏览器端输出
console.log = (...args) => {
  originalConsole.log(...args);
  sendLogToServer('log', args);
};

console.error = (...args) => {
  originalConsole.error(...args);
  sendLogToServer('error', args);
};

console.warn = (...args) => {
  originalConsole.warn(...args);
  sendLogToServer('warn', args);
};

console.info = (...args) => {
  originalConsole.info(...args);
  sendLogToServer('info', args);
};

2. 全局引入日志代理 #

在app/layout.js中导入该工具，确保所有页面生效：

import './utils/console-proxy';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

3. 后端创建日志接收API #

在app/api/logs/route.js中编写接收逻辑：

export async function POST(request) {
  const logData = await request.json();
  
  // 根据日志类型区分终端输出样式
  switch (logData.type) {
    case 'error':
      console.error(`[浏览器错误] ${logData.timestamp}:`, ...logData.args);
      break;
    case 'warn':
      console.warn(`[浏览器警告] ${logData.timestamp}:`, ...logData.args);
      break;
    case 'info':
      console.info(`[浏览器信息] ${logData.timestamp}:`, ...logData.args);
      break;
    default:
      console.log(`[浏览器日志] ${logData.timestamp}:`, ...logData.args);
  }
  
  return new Response(JSON.stringify({ success: true }), { status: 200 });
}

启动项目后，浏览器端的所有console日志会同时输出到VS Code终端。

方案二：WebSocket实时传输日志 #

适合需要实时性的场景，通过WebSocket建立浏览器与后端的长连接，实时同步日志。

1. 安装WebSocket依赖 #

npm install ws

2. 后端启动WebSocket服务 #

在app/lib/websocket-server.js中编写：

import { WebSocketServer } from 'ws';

let wss;

export function startWebSocketServer(server) {
  wss = new WebSocketServer({ server });

  wss.on('connection', (ws) => {
    console.log('日志同步客户端已连接');
    
    ws.on('message', (message) => {
      const logData = JSON.parse(message.toString());
      switch (logData.type) {
        case 'error':
          console.error(`[浏览器错误] ${logData.timestamp}:`, ...logData.args);
          break;
        case 'warn':
          console.warn(`[浏览器警告] ${logData.timestamp}:`, ...logData.args);
          break;
        case 'info':
          console.info(`[浏览器信息] ${logData.timestamp}:`, ...logData.args);
          break;
        default:
          console.log(`[浏览器日志] ${logData.timestamp}:`, ...logData.args);
      }
    });

    ws.on('close', () => {
      console.log('日志同步客户端已断开');
    });
  });
}

3. 自定义Next.js服务器 #

创建server.js文件，整合WebSocket服务：

const { createServer } = require('http');
const next = require('next');
const { startWebSocketServer } = require('./app/lib/websocket-server');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = createServer((req, res) => {
    handle(req, res);
  });

  startWebSocketServer(server);

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

4. 修改启动脚本 #

在package.json中更新scripts：

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node server.js"
}

5. 前端WebSocket日志代理 #

修改app/utils/console-proxy.js为WebSocket版本：

const originalConsole = {
  log: console.log,
  error: console.error,
  warn: console.warn,
  info: console.info
};

// 根据当前协议选择ws/wss
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const ws = new WebSocket(`${wsProtocol}//${window.location.host}`);

ws.onopen = () => {
  originalConsole.log('日志同步连接已建立');
};

ws.onerror = (err) => {
  originalConsole.error('日志同步连接失败:', err);
};

function sendLogToServer(type, args) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify({
      type,
      timestamp: new Date().toISOString(),
      args: args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg)
    }));
  } else {
    originalConsole.warn('日志同步连接未就绪，日志未发送');
  }
}

// 重写console方法
console.log = (...args) => {
  originalConsole.log(...args);
  sendLogToServer('log', args);
};

console.error = (...args) => {
  originalConsole.error(...args);
  sendLogToServer('error', args);
};

console.warn = (...args) => {
  originalConsole.warn(...args);
  sendLogToServer('warn', args);
};

console.info = (...args) => {
  originalConsole.info(...args);
  sendLogToServer('info', args);
};

启动项目后，浏览器日志会实时同步到VS Code终端。

内容的提问来源于stack exchange，提问作者balaji gv