Electron更改DevTools的字体

在开发项目的过程中，随着功能需求的增加和技术环境的变化，软件版本的升级是不可避免的。最近，由于某个关键功能的需求，我不得不将项目中的Electron版本从27.0.4升级到最新的31.2.1。

总体讲，问题不大，毕竟从Electron的发版日志上看，是修复了不少 Bug 的，其中包括我之前提出的《抽丝剥茧：Electron 与 Node.js 的奇葩 Bug》。一个同事安装依赖贼慢，近10分钟才安装好；另一个同事安装Electron时一直404，我猜测是网络哪里不对了，折腾了一个小时也没能解决，他一怒之下放弃治疗，把同事机器上二进制文件拷贝到node_modules目录下......

但有个妹纸提出，她的Windows机器，在打开控制台时，发现字体样式变了，看着没有以前舒服：

有趣的是，在MacOS上没有看出明显区别，这可能就是Windows用户偶尔要遭遇的苦恼吧。

妹纸对审美是有追求的，非常不满意，问：『不能改字体配置吗？不用默认的。』

我一声哀叹，没敢把话说死：『没处理过，查查有没有配置。』

搜索

于是，我就进行百度了：『Chrome 控制台的字体能调整吗』，搜索到 CSDN 这两篇求助贴：

其中这个回答感觉是有用的：

在 Chrome 的设置里就可以修改。

当我准备把这篇 URL 发给同事，让她自己修改时，突然意识到：『咦，在 Electron 里能打开"设置"吗？』

这确实是个问题。

Electron 内置了 Chrome 内核，控制台的设置倒是能打开，浏览器本身的设置可没地儿打开啊。

又搜索了『Electron 中怎么打开 Chrome 设置』，只有一个提问是想启用chrome://flag的，Electron 提供了 API 可以往 CLI 中添加命令，比如：

javascript 复制代码

const { app } = require('electron')
app.commandLine.appendSwitch('remote-debugging-port', '8315')
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1')

app.whenReady().then(() => {
  // Your code here
})

但没有我想要的。

按照惯例，骂了一句『垃圾百度』后，接着在 Google 中搜索：

一样不行。

没事，别急着开骂，换英文再试下：

很快，第二篇就是 GitHub 上 Electron 的issue，我一看时间是今年 5 月的，知道可能有希望。打开一看，其实是在提需求：

简单来说，作者对比了Electron在29.3.2和30.0.2的差异，觉得现在的 UI 太丑了，忍不住提了个需求，希望能类似于 BrowserView WebPreferences 中的 defaultFontFamily 和 defaultFontSize，添加 defaultDevToolsFontFamily 和 defaultDevToolsFontSize。或者在 webContents 中添加一个方法来设置默认字体/字号。

底下评论里有人给了个临时解决方案：

javascript 复制代码

win.webContents.on('devtools-opened', () => {
    const css = `
    :root {
        --sys-color-base: var(--ref-palette-neutral100);
        --source-code-font-family: consolas;
        --source-code-font-size: 12px;
        --monospace-font-family: consolas;
        --monospace-font-size: 12px;
        --default-font-family: system-ui, sans-serif;
        --default-font-size: 12px;
    }
    .-theme-with-dark-background {
        --sys-color-base: var(--ref-palette-secondary25);
    }
    body {
        --default-font-family: system-ui,sans-serif;
    }`;
    win.webContents.devToolsWebContents.executeJavaScript(`
    const overriddenStyle = document.createElement('style');
    overriddenStyle.innerHTML = '${css.replaceAll('\n', ' ')}';
    document.body.append(overriddenStyle);
    document.body.classList.remove('platform-windows');`);
});

在我们代码中添加以后，同事反馈说可以了！不得不说，社区人才真多，真不愧是全球最大交友中心。

总结

虽然这个问题暂时得到了缓解，但我们仍然期待着Electron官方能够提供一个更完善的解决方案。同时，对于开发者来说，提升自己的问题解决能力，积极参与社区讨论，甚至提出自己的需求，都是提升项目质量和开发体验的重要途径。

另外，此次的教训：遇到技术类问题时，还是直接 Google 搜索吧，不然有水字数的嫌疑。

Tips：最近用豆包的AI插件，感觉还不错，起码可以替代Google翻译了，虽然效果仍然差点儿意思，但胜在不用fq，基本的需求可以满足。