electron升级到33.0.x版本后,devtools字体的修改方法

默认字体在中文环境下是宋体12px,会看瞎狗眼,修改方法如下

复制代码
win.webContents.on('devtools-opened', () => {
    const css = `
        :root {
            --sys-color-base: var(--ref-palette-neutral100);
            --source-code-font-family: consolas !important;
            --source-code-font-size: 12px;
            --monospace-font-family: consolas !important;
            --monospace-font-size: 12px;
            --default-font-family: system-ui, sans-serif;
            --default-font-size: 12px;
            --ref-palette-neutral99: #ffffffff;
        }
        .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.querySelectorAll('.platform-windows').forEach(el => el.classList.remove('platform-windows'));
        addStyleToAutoComplete();
        const observer = new MutationObserver((mutationList, observer) => {
            for (const mutation of mutationList) {
                if (mutation.type === 'childList') {
                    for (let i = 0; i < mutation.addedNodes.length; i++) {
                        const item = mutation.addedNodes[i];
                        if (item.classList.contains('editor-tooltip-host')) {
                            addStyleToAutoComplete();
                        }
                    }
                }
            }
        });
        observer.observe(document.body, {childList: true});
        function addStyleToAutoComplete() {
            document.querySelectorAll('.editor-tooltip-host').forEach(element => {
                if (element.shadowRoot.querySelectorAll('[data-key="overridden-dev-tools-font"]').length === 0) {
                    const overriddenStyle = document.createElement('style');
                    overriddenStyle.setAttribute('data-key', 'overridden-dev-tools-font');
                    overriddenStyle.innerHTML = '.cm-tooltip-autocomplete ul[role=listbox] {font-family: consolas !important;}';
                    element.shadowRoot.append(overriddenStyle);
                }
            });
        }
    `);
});

其中的字体设置自己酌情修改,参考地址如下:

Github electron issues 42055

相关推荐
阮小贰7 分钟前
干支编码的确定性实现:节气切分 + 1000 条溯源断语(附 JS 源码)
开发语言·javascript·ecmascript
雪芽蓝域zzs12 分钟前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员15 分钟前
还有高手?用Shader让图片中的3D圆环转起来!
前端
灯澜忆梦16 分钟前
【基于GO的Web开发14】gin请求重定向
前端·后端·golang·gin
qq_4523962317 分钟前
第十一篇:《前端性能优化体系:从加载到交互的全链路》
前端·性能优化·交互
Mh21 分钟前
听说我兄弟喜欢跑车,所以必须安排上
前端·javascript·vue.js
zttbee21 分钟前
vue学习(白话功能版)
前端·vue.js·学习·前端框架
qq_4260039622 分钟前
多语言新增语种全量测试策略
前端·javascript·python·pycharm·自动化
黄敬峰28 分钟前
从零搭建 Next.js 单词管理系统:Supabase + Drizzle ORM + shadcn/ui 全栈实战
javascript·面试
nicole bai30 分钟前
前端封装el-table及注意点
前端·javascript·vue.js