自定义Chrome的浏览器开发者工具DevTools界面的字体和样式

流萤

已于 2024-02-23 19:19:43 修改

阅读量4k

点赞数 11

分类专栏： Web前端工作中用到的杂文文章标签： chrome 前端 chrome devtools

于 2024-02-23 15:56:34 首次发布

本文链接：https://blog.csdn.net/wangjingkaibear/article/details/136257913

版权

工作中用到的同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

Web前端

2 篇文章 0 订阅

订阅专栏

杂文

2 篇文章 0 订阅

订阅专栏

本文介绍了如何通过修改Chrome开发者工具的源代码和创建扩展程序，解决默认字体过小的问题，包括设置实验选项、编写HTML、JS和CSS文件，以及创建`manifest.json`来实现自定义主题。

摘要由CSDN通过智能技术生成

Chrome浏览器开发者工具默认的字体太小，想要修改但没有相关设置。

外观——字体可以自定义字体，但大小不可以调整。

github上有人给出了方法

整理为中文教程：

1.打开浏览器开发者工具，点开设置——实验，勾上红框设置

2.在电脑上建立一个文件夹，然后建一个devtools.html文件，内容：

<html>
<head></head>
<body><script src="devtools.js"></script></body>
</html>

3.再建立一个devtools.js文件，内容：

var x = new XMLHttpRequest();
x.open('GET', 'style.css');
x.onload = function() {
    chrome.devtools.panels.applyStyleSheet(x.responseText);
};
x.send();

4.再建立一个style.css文件，内容：

/* 元素和console里的字体 */
:host-context(.platform-windows) .monospace,
:host-context(.platform-windows) .source-code,
.platform-windows .monospace, 
.platform-windows .source-code {
    font-size: 14px !important;
    font-family: GeistMono NFM, monospace !important;
}

/* 没改成功 */
:host-context(.platform-windows) .cm-editor,
.platform-windows .cm-editor 
{
    font-size: 14px !important;
    font-family: SauceCodePro NFM, monospace !important;
}

/* 网络——预览里面的字体 */
:host-context(.platform-windows) .network-item-view .cm-content .cm-line,
.platform-windows .network-item-view .cm-content .cm-line
{
    font-size: 14px !important;
    font-family: SauceCodePro NFM, monospace !important;
}

/* 网络——预览里面的行高 */
:host-context(.platform-windows) span.name-and-value,
.platform-windows span.name-and-value 
{
    line-height: 17px;
}

/* 网络——请求的地址 */
:host-context(.platform-windows) .network-log-grid .name-column,
.platform-windows .network-log-grid .name-column
{
    font-size: 14px !important;
    /*font-family: SauceCodePro NFM, monospace !important;*/
    font-family: GeistMono NFM, monospace !important;
}

.monospace,
.source-code {
    font-size: 14px !important;
    font-family: SauceCodePro NFM, monospace !important;
}

::shadow .monospace,
::shadow .source-code {
    font-size: 14px !important;
    font-family: SauceCodePro NFM, monospace !important;
}

5.再建立一个manifest.json文件，内容：

{
    "name": "Custom Chrome Devtools Theme",
    "version": "1.0.0",
    "description": "A customized theme for Chrome Devtools.",
    "devtools_page": "devtools.html",
    "manifest_version": 2
}

6.然后打开Chrome的管理扩展程序页面，勾选右上角的开发者模式，然后点击加载已解压的扩展程序，选择刚刚建立的文件夹就可以了。