当前位置：首页 > news >正文

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

news 2026/1/27 14:14:34

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的管理扩展程序页面，勾选右上角的开发者模式，然后点击加载已解压的扩展程序，选择刚刚建立的文件夹就可以了。

打开浏览器开发者工具后，可以再按 Ctrl+Shift+i 打开新的开发者工具，用于查看开发者工具各个元素的结构，用于构建你想要修改的地方的selector。

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

Chrome浏览器开发者工具默认的字体太小，想要修改但没有相关设置。外观——字体可以自定义字体，但大小不可以调整。 github上有人给出了方法整理为中文教程： 1.打开浏览器开发者工具，点开设置——实验，勾上红框设…...

编程日记 2024/2/28 1:34:18

人事|人事管理系统|基于Springboot的人事管理系统设计与实现(源码+数据库+文档)

人事管理系统目录目录基于Springboot的人事管理系统设计与实现一、前言二、系统功能设计三、系统实现 1、管理员登录 2、员工管理 3、公告信息管理 4、公告类型管理 5、培训管理 6、培训类型管理四、数据库设计 1、实体ER图五、核心代码六、论文参考七、…...

编程日记 2024/2/28 1:31:16

React18源码: Fiber树中的优先级与帧栈模型

优先级{#lanes} 在全局变量中有不少变量都以Lanes命名如workInProgressRootRenderLanes, subtreeRenderLanes其作用见上文注释它们都与优先级相关 React中有3套优先级体系，并了解了它们之间的关联关系现在来看下fiber树构造过程中，车道模型Lane的具体应…...

编程日记 2024/2/28 1:29:15

Hive 最全面试题及答案(基础篇)

基本知识 hive元数据存储 Hive 元数据存储了关于表、分区、列、分桶等信息。在生产环境中，通常会将 Hive 的元数据存储在外部的关系型数据库中，如 MySQL 或 PostgreSQL。这样可以提供更好的性能、可扩展性和容错性。通过配置 Hive 的元数据存储为 MySQL 或 PostgreSQL，可以…...

编程日记 2024/2/28 1:27:13

【力扣】整数反转，判断是否溢出的数学解法

整数反转原题地址方法一：数学反转整数如何反转一个整数呢？考虑整数操作的3个技巧： xmod10 可以取出 x 的最低位，如 x123 ， xmod103 。x/10 可以去掉 x 的最低位，如 x123 ， x/10 &#xf…...

编程日记 2024/2/28 1:25:11

Jmeter之内置函数property和P的区别

1. __property函数作用读取 Jmeter 属性语法格式 ${__property(key,var,default)} 参数讲解小栗子 ${__property(key)} 读取 key 属性如果找不到 key 属性，则返回 key（属性名） ${__property(key,,default)} 读取 key 属性如果找不到 k…...

编程日记 2024/2/28 1:24:10

1. GPT润色指令 Below is a paragraph from an academic paper. Polish the writing to meet the academic style,improve the spelling, grammar, clarity, concision and overall readability. When necessary, rewrite the whole sentence. Paragraph ：你的句子…...

编程日记 2024/2/28 1:20:07

Ubuntu中matplotlib显示中文的方法

其实有很多朋友已经总结得很好了：Ubuntu下让matplotlib显示中文字体_ubuntu matplot 使用汉字-CSDN博客这里我就是简单补充一下： 按照上面这篇博客，下载：GitHub - tracyone/program_font: fonts for programmer 然后运行&#…...

编程日记 2024/2/28 1:19:07

String类-equals和==的区别-遍历-SubString()-StringBuilder-StringJoiner-打乱字符串

概述 String 类代表字符串，Java 程序中的所有字符串文字（例如“abc”）都被实现为此类的实例。也就是说，Java 程序中所有的双引号字符串，都是 String 类的对象。String 类在 java.lang 包下，所以使用的时候…...

编程日记 2024/2/28 1:11:01

IDEA的LeetCode插件的设置

一、下载插件选择点击File->Setting->Plugins：搜索LeetCode 二、打开这个插件选择View —>Tool Windows—>leetcode 三、登陆自己的账号关于下面几个参数的定义，官方给的是： Custom code template: 开启使用自定义模板&…...

编程日记 2024/2/28 1:08:59

2024.2.29 模拟实现 RabbitMQ —— 项目展示

目录项目介绍核心功能核心技术演示直接交换机演示扇出交换机演示主题交换机项目介绍此处我们模拟 RabbitMQ 实现了一个消息队列服务器核心功能提供了虚拟主机、交换机、队列、绑定、消息概念的管理九大核心 API 创建队列、销毁队列、创建交换机、销毁交换机、…...

编程日记 2024/2/28 1:04:55

React htmlfor

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。在React中，当我们需要为一个表单元素设置标签时，可以使用htmlFor属性。它…...

编程日记 2024/2/28 1:03:54

现代化数据架构升级：毫末智行自动驾驶如何应对年增20PB的数据规模挑战？

毫末智行是一家致力于自动驾驶的人工智能技术公司，其前身是长城汽车智能驾驶前瞻分部，以零事故、零拥堵、自由出行和高效物流为目标，助力合作伙伴重塑和全面升级整个社会的出行及物流方式。在自动驾驶领域中，是什么原因让毫末智行…...

编程日记 2024/2/28 0:58:48

理解Stable Diffusion、LoRA、Dreambooth、Hypernetworks、Textual Inversion、Checkpoint

前言在深度学习和人工智能的领域中，模型生成和调整技术的快速发展为创造性内容的自动化提供了新的可能性。本文将介绍四种重要的模型技术——Stable Diffusion、LoRA、Dreambooth、和Hypernetworks——它们在生成艺术、个性化模型调整和网络结构设计方面各自的特点…...

编程日记 2024/2/28 0:56:46

spring boot3登录开发-2(1图形验证码接口实现)

⛰️个人主页: 蒾酒 🔥系列专栏：《spring boot实战》 🌊山高路远，行路漫漫，终有归途。目录前置条件内容简介图形验证码接口实现导入糊涂工具依赖接口分析编写验证码接口测试验证码接口前置条件 …...

编程日记 2024/2/28 0:53:44

网络编程中的问题总结

1、服务端重启后bind失败，因为TCP 套接字状态 TIME_WAIT 引起，该状态在套接字关闭后约保留 2 到 4 分钟。在 TIME_WAIT 状态退出之后，套接字被删除，该地址才能被重新绑定而不出问题。可以通过setsockopt()设置Socket描述符的选项S…...

编程日记 2024/2/28 0:49:40

数据结构-关键路径

介绍在AOV网的基础上，如果用对应边来表示活动持续时间，这种有向图被称为AOE网在AOE网中，入度为0的为源点，出度为0的为汇点，整张网看做是一件事情完成的过程，那么这两个点就是事情的开始和结束。每个活动持…...

编程日记 2024/2/28 0:45:35

进程间通信学习笔记（共享内存）

内存映射概念： 共享内存可以通过mmap()映射普通文件使一个磁盘文件与内存中的一个缓冲区相映射，进程可以像访问普通文件一样对文件进行访问，不必再强调read,write。 mmap的优点： 实现了用户空间和内核空间的高效交互方式 mmap的…...

编程日记 2024/2/28 0:41:31

ChatGPT学习第三周

📖 学习目标 ChatGPT在各行各业的应用探索ChatGPT在不同领域（如教育、客户服务等）的实际应用案例。 ChatGPT的局限性和挑战讨论ChatGPT面临的挑战，包括偏见、误解及其限制。 ✍️ 学习活动学习资料《人工智能通用大模型(…...

编程日记 2024/2/28 0:38:29

R语言混合效应（多水平/层次/嵌套）模型及贝叶斯实现技术应用

回归分析是科学研究中十分重要的数据分析工具。随着现代统计技术发展，回归分析方法得到了极大改进。混合效应模型（Mixed effect model），即多水平模（Multilevel model）/分层模型(Hierarchical Model)/嵌套模…...

编程日记 2024/2/28 0:32:25

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2026/1/21 18:12:58

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。我们可以考虑用CNN来替代RNN，但是…...

编程新知 2026/1/14 15:49:57

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战：各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

高防服务器价格高原因分析

高防服务器的价格较高，主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因： 一、硬件与技术投入大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器，因此…...

编程新知 2025/12/8 14:33:23

React核心概念：State是什么？如何用useState管理组件自己的数据？

系列回顾： 在上一篇《React入门第一步》中，我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目，并修改了App.jsx组件，让页面显示出我们想要的文字。但是，那个页面是“死”的，它只是静态…...

编程新知 2025/11/3 8:29:51

验证redis数据结构

一、功能验证 1.验证redis的数据结构（如字符串、列表、哈希、集合、有序集合等）是否按照预期工作。 2、常见的数据结构验证方法： ①字符串（string） 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...

编程新知 2025/10/5 5:37:09

Linux中INADDR_ANY详解

在Linux网络编程中，INADDR_ANY 是一个特殊的IPv4地址常量（定义在 <netinet/in.h> 头文件中），用于表示绑定到所有可用网络接口的地址。它是服务器程序中的常见用法，允许套接字监听所有本地IP地址上的连接请求。关…...

编程新知 2025/11/8 15:35:49

相关文章：