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

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

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浏览器开发者工具默认的字体太小&#xff0c;想要修改但没有相关设置。 外观——字体可以自定义字体&#xff0c;但大小不可以调整。 github上有人给出了方法 整理为中文教程&#xff1a; 1.打开浏览器开发者工具&#xff0c;点开设置——实验&#xff0c;勾上红框设…...

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

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

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

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

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

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

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

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

Jmeter之内置函数__property和__P的区别

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

GPT润色指令

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 &#xff1a;你的句子…...

Ubuntu中matplotlib显示中文的方法

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

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

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

IDEA的LeetCode插件的设置

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

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

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

React htmlfor

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

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

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

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

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

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

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

网络编程中的问题总结

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

数据结构-关键路径

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

进程间通信学习笔记(共享内存)

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

ChatGPT学习第三周

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

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

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

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

【Qt】控件 QWidget

控件 QWidget 一. 控件概述二. QWidget 的核心属性可用状态&#xff1a;enabled几何&#xff1a;geometrywindows frame 窗口框架的影响 窗口标题&#xff1a;windowTitle窗口图标&#xff1a;windowIconqrc 机制 窗口不透明度&#xff1a;windowOpacity光标&#xff1a;cursor…...