electron打包后如何还能想打开控制台就打开控制台?(便于在生产环境调试)

前言

首先祝大家2025年新年快乐,在新的一年里写的代码都没bug,写的功能都能一次过😁

进入正题

• 问题: 不知道有没有朋友遇到过写electron,在测试环境跑的好好地,放到正式环境就不行了?

• 出现问题的场景: 有时候开发环境是Windows,但是生产环境是linux,就很容易遇到这种情况3

• 痛点: 但是electron在正式环境有没有办法手动的打开控制台,不方便调试

• 我遇到的问题和解决问题的笨方法: 我就遇到了这个问题, 在windows中写的应用,但是是放在linux环境下的,经常会出现一个api不适用的问题,此时就需要调试了,我的笨方法是将是否打开控制台放到配置文件中,每次启动应用的时候读取配置文件,如果配置了打开控制台,就自动打开,如果没有配置,就不打开,这就导致了每次想打开控制台都需要重启一次应用,非常不方便

有没有一种更好的方法?可以随时随地想打开控制台就打开,想关闭就关闭?就像在网页中按住Ctrl+Shift+I一样?

聪明的你肯定想到了,对!就是快捷键,网页中可以通过Ctrl+Shift+I打开控制台,那么在我的electron应用中集成一下,监听一下快捷键,然后进行对应的操作,不也就可以了吗? 理论存在,实践开始!

document.addEventListener('keydown', event => {
    // 检测是否同时按下Ctrl + Shift + I,自动打开开发者模式
    if (event.ctrlKey && event.shiftKey && event.key === 'I') {
      // 阻止默认行为
      event.preventDefault();

      // 控制开启/打开控制台
    }
})

通过上面的方法,就可以监听到是否按下了Ctrl+Shift+I,接下来就是对应操作了,如何打开控制台与关闭控制台呢?

在electron中可以使用nodejs的api,例如这里的require导入electrn的进程通信API

document.addEventListener('keydown', event => {
    // 检测是否同时按下Ctrl + Shift + I,自动打开开发者模式
    if (event.ctrlKey && event.shiftKey && event.key === 'I') {
      // 阻止默认行为
      event.preventDefault();

      // 导入electron的进程通信API
      const { ipcRenderer } = require('electron');
      // 设置应用的控制台打开/关闭
      ipcRenderer.send('SET_CONSOLE');
    }
})

// electron的入口文件
// 监听主线程的打开/关闭控制台事件
ipcMain.on('SET_CONSOLE', () => {
  // 判断当前是否打开控制台
  const isOpen = mainWindow.webContents.isDevToolsOpened();

  // 根据当前控制台的状态选择关闭/打开控制台
  if (isOpen) {
    // 关闭控制台
    mainWindow.webContents.closeDevTools();
  } else {
    // 打开控制台
    mainWindow.webContents.openDevTools();
  }
});

使用上面的代码,在electron的入口文件监听SET_CONSOLE事件,在项目文件中监听快捷键,然后调用SET_CONSOLE方法,这样就可以实现随时随地通过快捷键打开控制台了!

补充:

不止有打开控制台可以用这种方法,这里只是列举ipcMain的通信方式实现这种方法,使用这种通信方式,可以实现在项目代码中控制整个应用,非常方便!例如想要控制electron应用的全屏,控制刷新页面等等,都可以用同样的方法

document.addEventListener('keydown', event => {
    // 检测是否同时按下Ctrl + Shift + R,自动刷新页面
    if (event.ctrlKey && event.shiftKey && event.key === 'R') {
      // 阻止默认行为
      event.preventDefault();

      // 自动开启/关闭控制台
      router.go();
    }
    // 检测是否同时按下Ctrl + Shift + F,自动进入/退出全屏
    if (event.ctrlKey && event.shiftKey && event.key === 'F') {
      // 阻止默认行为
      event.preventDefault();

      // 导入electron的进程通信API
      const { ipcRenderer } = require('electron');
      // 设置应用的控制台打开/关闭
      ipcRenderer.send('SET_FULLSCREEN');
    }
  });

// electron的入口文件
// 监听主线程的退出/进入全屏事件
ipcMain.on('SET_FULLSCREEN', () => {
  // 判断当前是否全屏
  const isFullScreen = mainWindow.isFullScreen();

  // 根据当前全屏的状态选择退出/进入全屏
  mainWindow.setFullScreen(!isFullScreen);
})

总结:

以上就是本篇文章的所有内容了,如果你感觉到有收获,请帮忙点个赞🤗,如果有其他的方法或者有想要讨论的内容,欢迎私信与评论