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的进程通信APIconst { 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的进程通信APIconst { ipcRenderer } = require('electron');// 设置应用的控制台打开/关闭ipcRenderer.send('SET_FULLSCREEN');}});// electron的入口文件
// 监听主线程的退出/进入全屏事件
ipcMain.on('SET_FULLSCREEN', () => {// 判断当前是否全屏const isFullScreen = mainWindow.isFullScreen();// 根据当前全屏的状态选择退出/进入全屏mainWindow.setFullScreen(!isFullScreen);
})