如何在node.js Electron应用的客户端页面添加可交互控制台

方案1：直接调用Electron内置开发者工具（零额外开发，最适合自用场景） #

你自用的场景不需要额外开发界面，直接给应用加个快捷键唤起内置DevTools，自带的Console标签页本身就支持直接读写渲染进程的全局对象，完全满足你的低频查询需求。
主进程实现代码：

const { app, BrowserWindow, globalShortcut } = require('electron')
let mainWindow
app.whenReady().then(() => {
  // 注册F12快捷键唤起/关闭DevTools
  globalShortcut.register('F12', () => {
    if (mainWindow) {
      mainWindow.webContents.toggleDevTools()
      // 唤起后默认切到Console标签页
      mainWindow.webContents.on('devtools-opened', () => {
        mainWindow.webContents.devToolsWebContents.executeJavaScript(`
          DevToolsAPI.showPanel("console")
        `)
      })
    }
  })
  // 你原有创建窗口的逻辑
  mainWindow = new BrowserWindow({/* 原有配置不变 */})
  // 把需要查询的数据源挂载到渲染进程全局
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.executeJavaScript(`
      // 直接挂载你的数据源对象，带方法的复杂对象也不需要序列化
      window.myDataSource = 你存储的数据源JS对象
    `)
  })
})

使用时按F12唤起控制台，直接输入myDataSource即可查看所有数据，也支持输入JS代码做临时处理。 #

方案2：内嵌轻量自定义控制台（无需弹出独立DevTools窗口） #

如果想要把控制台集成在自己的应用界面里，可以用下面的无依赖最小实现，复制代码即可使用：
首先在渲染进程的HTML文件中添加控制台DOM结构：

<!-- 控制台容器 -->
<div id="custom-console" style="position: fixed; bottom: 0; left: 0; right: 0; height: 300px; background: #1e1e1e; color: #fff; padding: 10px; display: none; z-index: 9999;">
  <div id="console-output" style="height: 250px; overflow-y: auto; font-family: monospace; margin-bottom: 10px;"></div>
  <input type="text" id="console-input" placeholder="输入JS代码执行" style="width: 100%; padding: 5px; font-family: monospace; background: #333; border: 1px solid #555; color: #fff;">
</div>
<!-- 控制台切换按钮 -->
<button id="toggle-console" style="position: fixed; bottom: 10px; right: 10px; z-index: 10000;">打开控制台</button>

在渲染进程的JS文件中添加交互逻辑：

// 挂载数据源到全局
window.myDataSource = 你存储的数据源JS对象
const toggleBtn = document.getElementById('toggle-console')
const consoleEl = document.getElementById('custom-console')
const outputEl = document.getElementById('console-output')
const inputEl = document.getElementById('console-input')
// 切换控制台显隐
toggleBtn.addEventListener('click', () => {
  const isHidden = consoleEl.style.display === 'none'
  consoleEl.style.display = isHidden ? 'block' : 'none'
  toggleBtn.textContent = isHidden ? '关闭控制台' : '打开控制台'
  if (isHidden) inputEl.focus()
})
// 执行输入的代码
inputEl.addEventListener('keydown', async (e) => {
  if (e.key === 'Enter') {
    const code = inputEl.value.trim()
    if (!code) return
    // 输出输入的代码
    const inputLine = document.createElement('div')
    inputLine.style.color = '#9cdcfe'
    inputLine.textContent = `> ${code}`
    outputEl.appendChild(inputLine)
    try {
      const result = eval(code)
      // 兼容Promise类型返回值
      const resolvedResult = result instanceof Promise ? await result : result
      // 输出执行结果
      const outputLine = document.createElement('div')
      outputLine.style.color = '#ce9178'
      outputLine.textContent = `< ${JSON.stringify(resolvedResult, null, 2)}`
      outputEl.appendChild(outputLine)
    } catch (err) {
      // 输出错误信息
      const errLine = document.createElement('div')
      errLine.style.color = '#f48771'
      errLine.textContent = `! ${err.message}`
      outputEl.appendChild(errLine)
    }
    inputEl.value = ''
    outputEl.scrollTop = outputEl.scrollHeight
  }
})

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