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

相关推荐
Jyywww1212 分钟前
Uniapp+Vue3 使用父传子方法实现自定义tabBar
javascript·vue.js·uni-app
李少兄3 分钟前
CSS clip-path:前端开发中的裁剪技术
前端·css
zhengxianyi51515 分钟前
使用码云gitee登录ruoyi-vue-pro——坑比较多
前端·vue.js·gitee·ruoyi-vue-pro优化·三方登陆
光影少年22 分钟前
React vs Next.js
前端·javascript·react.js
谢尔登23 分钟前
Vue3 响应式系统——ref 和 reactive
前端·javascript·vue.js
天若有情67324 分钟前
【JavaScript】React 实现 Vue 的 watch 和 computed 详解
javascript·vue.js·react.js
OEC小胖胖25 分钟前
16|总复习:把前 15 章串成一张 React 源码主线地图
前端·react.js·前端框架·react·开源库
董世昌4127 分钟前
HTTP协议中,GET和POST有什么区别?分别适用什么场景?
java·开发语言·前端
_OP_CHEN28 分钟前
【前端开发之HTML】(二)HTML 常见标签(上):从入门到实战,搞定网页基础排版!
前端·css·html·前端开发·网页开发·html标签
满栀5851 小时前
插件轮播图制作
开发语言·前端·javascript·jquery