Appearance
electron-debug
一个用于增强 Electron 应用程序调试功能的工具
安装
bash
pnpm add -D electron-debug基础配置
主进程配置
ts
import { app, BrowserWindow } from 'electron'
import debug from 'electron-debug'
// 启用调试功能
debug({
showDevTools: true, // 自动打开开发者工具
isEnabled: true, // 启用调试功能
})
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
width: 900,
height: 670,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
})
})使用示例
自定义快捷键
ts
import debug from 'electron-debug'
// 配置自定义快捷键
debug({
// 自定义开发者工具快捷键
devToolsMode: 'right', // 开发者工具停靠位置
showDevTools: false, // 不自动打开开发者工具
// 自定义快捷键
shortcuts: {
// 刷新页面
reload: 'CommandOrControl+R',
// 强制刷新页面
forceReload: 'CommandOrControl+Shift+R',
// 切换开发者工具
toggleDevTools: 'CommandOrControl+Shift+I',
// 切换全屏
toggleFullscreen: 'F11',
},
})条件启用调试
ts
import debug from 'electron-debug'
// 仅在开发环境启用调试
if (process.env.NODE_ENV === 'development') {
debug({
showDevTools: true,
// 自定义开发者工具初始面板
devToolsMode: 'bottom',
// 启用额外的调试功能
enabled: true,
})
}高级配置
ts
import { app, BrowserWindow } from 'electron'
import debug from 'electron-debug'
// 高级调试配置
debug({
// 开发者工具配置
showDevTools: true,
devToolsMode: 'undocked',
// 自定义事件处理
showDevTools: (showDevTools, currentWindow) => {
// 在特定条件下打开开发者工具
if (currentWindow.getTitle().includes('debug')) {
showDevTools()
}
},
// 自定义快捷键处理函数
handleKeyboardShortcuts: (win) => {
// 注册自定义快捷键行为
return {
reload: () => {
// 自定义刷新行为
win.webContents.reload()
console.log('页面已刷新')
},
toggleDevTools: () => {
// 自定义开发者工具切换行为
const webContents = win.webContents
if (webContents.isDevToolsOpened()) {
webContents.closeDevTools()
} else {
webContents.openDevTools({ mode: 'right' })
}
},
}
},
})
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
width: 900,
height: 670,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
})
})