如何将Electron主进程日志及C++原生插件日志输出到渲染进程控制台

我之前做Electron+C混合开发时，也碰到过一模一样的问题——开发阶段终端能看C和main的日志，打包成可执行文件后完全找不到踪迹，后来折腾出这几个靠谱的解决方案，分享给你：

1. 重定向main进程的标准输出/错误到渲染进程 #

Electron的main进程默认输出会打印到终端，但打包后没有终端，我们可以通过监听process.stdout和process.stderr的输出事件，再用IPC机制把日志发送给渲染进程，让渲染进程把日志输出到开发者工具控制台。

示例代码： #

main.js

const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false, // 若使用Electron 12+，需配置此项或使用preload脚本
      enableRemoteModule: true
    }
  });

  mainWindow.loadFile('index.html');

  // 监听stdout输出，转发到渲染进程
  process.stdout.on('data', (data) => {
    if (mainWindow?.webContents) {
      mainWindow.webContents.send('log-message', { 
        type: 'main-stdout', 
        message: data.toString().trim() 
      });
    }
  });

  // 监听stderr输出，转发到渲染进程
  process.stderr.on('data', (data) => {
    if (mainWindow?.webContents) {
      mainWindow.webContents.send('log-message', { 
        type: 'main-stderr', 
        message: data.toString().trim() 
      });
    }
  });
}

app.whenReady().then(createWindow);

renderer.js

const { ipcRenderer } = require('electron');

// 接收main进程发来的日志并打印到控制台
ipcRenderer.on('log-message', (event, logData) => {
  switch(logData.type) {
    case 'main-stdout':
      console.log(`[MAIN] ${logData.message}`);
      break;
    case 'main-stderr':
      console.error(`[MAIN ERROR] ${logData.message}`);
      break;
    // 后续会添加C++日志的处理分支
    default:
      console.log(logData.message);
  }
});

2. 捕获C++原生插件的日志 #

C插件的cout/printf输出默认会到系统标准输出，打包后同样无法查看。我们可以在C代码里通过N-API把日志发送到main进程，再由main进程转发到渲染进程。

示例代码： #

C++插件代码

#include <napi.h>
#include <string>

// 封装发送日志到main进程的函数
void SendCppLog(const Napi::Env& env, const std::string& logContent) {
  // 获取Node.js全局对象
  Napi::Object globalObj = env.Global();
  // 获取process对象
  Napi::Object processObj = globalObj.Get("process").As<Napi::Object>();
  // 调用main.js绑定到process的sendCppLog函数
  Napi::Function sendLogFunc = processObj.Get("sendCppLog").As<Napi::Function>();
  sendLogFunc.Call({Napi::String::New(env, logContent)});
}

// 你的插件业务函数示例
Napi::String MyPluginFunc(const Napi::CallbackInfo& info) {
  Napi::Env env = info.Env();
  
  // 替换原来的cout/printf，用SendCppLog发送日志
  std::string logMsg = "C++插件：执行了某操作，这是日志信息";
  SendCppLog(env, logMsg);

  return Napi::String::New(env, "插件执行成功");
}

// 注册插件入口
Napi::Object Init(Napi::Env env, Napi::Object exports) {
  exports.Set(Napi::String::New(env, "myPluginFunc"),
              Napi::Function::New(env, MyPluginFunc));
  return exports;
}

NODE_API_MODULE(my_cpp_plugin, Init)

在main.js中添加绑定函数

在createWindow函数外或者内部合适位置，给process绑定供C++调用的函数：

// 供C++插件调用，转发日志到渲染进程
process.sendCppLog = (logMsg) => {
  if (mainWindow?.webContents) {
    mainWindow.webContents.send('log-message', { 
      type: 'cpp-log', 
      message: logMsg 
    });
  }
};

更新renderer.js的日志处理逻辑

添加C++日志的处理分支：

ipcRenderer.on('log-message', (event, logData) => {
  switch(logData.type) {
    case 'main-stdout':
      console.log(`[MAIN] ${logData.message}`);
      break;
    case 'main-stderr':
      console.error(`[MAIN ERROR] ${logData.message}`);
      break;
    case 'cpp-log':
      console.log(`[C++ PLUGIN] ${logData.message}`);
      break;
    default:
      console.log(logData.message);
  }
});

3. 打包后查看日志的小技巧 #

打包后的应用默认不会显示开发者工具，你可以给main进程添加右键菜单，让用户能手动打开控制台：

// 在createWindow函数内添加
mainWindow.webContents.on('context-menu', (event, props) => {
  const { x, y } = props;
  require('electron').Menu.buildFromTemplate([
    {
      label: '打开开发者工具',
      click: () => {
        mainWindow.webContents.openDevTools();
      }
    }
  ]).popup({ x, y });
});

这样用户右键点击应用窗口，就能打开开发者工具查看所有日志了。

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