自定义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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/412300.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网络技术ensp 一个简单的交换机配置案例

由于工作调岗&#xff0c;转战网络运维了&#xff0c;第一次网络笔记 1.&#xff0c;目的&#xff1a;2台主机相互可以ping通&#xff0c;并且可以ping通网关地址&#xff0c;设备&#xff1a;2台主机&#xff0c;2台交换机 2网络拓扑图如下 3.主机pc1的配置信息 ip&#xff…

轻量级模型,重量级性能,TinyLlama、LiteLlama小模型火起来了,针对特定领域较小的语言模型是否与较大的模型同样有效?

轻量级模型&#xff0c;重量级性能&#xff0c;TinyLlama、LiteLlama小模型火起来了&#xff0c;针对特定领域较小的语言模型是否与较大的模型同样有效? 当大家都在研究大模型&#xff08;LLM&#xff09;参数规模达到百亿甚至千亿级别的同时&#xff0c;小巧且兼具高性能的小…

Springboot应用执行器Actuator源码分析

文章目录 一、认识Actuator1、回顾Actuator2、Actuator重要端点 二、源码分析1、Endpoint自动装配&#xff08;1&#xff09;自动配置入口&#xff08;2&#xff09;普通Endpoint自动装配&#xff08;3&#xff09;配置Web - Endpoint&#xff08;4&#xff09;注册Endpoint为M…

微信小程序-全局配置

个人笔记&#xff0c;仅供参考。 1.entryPagePath 代码&#xff1a; "entryPagePath": "pages/index/index" 具体用法&#xff1a; 2.pages 小程序中新增/减少页面&#xff0c;都需要对 pages 数组进行修改。 代码&#xff1a; "pages": [&…

设计模式系列文章-7个创建型模式更新已完结

其实从2019年开始就有些一套关于设计模式的系列文章&#xff0c;但是因为种种原因一直搁置到现在。直到2024年才又恢复更新。 24年1月份上旬一直在弄博客站&#xff1a;https://jaune162.blog 的搭建 24年1月份下旬弄专题站&#xff1a;https://books.jaune162.blog 的搭建。…

设计模式(十) - 工厂方式模式

前言 在此前的设计模式&#xff08;四&#xff09;简单工厂模式中我们介绍了简单工厂模式&#xff0c;在这篇文章中我们来介绍下工厂方法模式&#xff0c;它同样是创建型设计模式&#xff0c;而且又有些类似&#xff0c;文章的末尾会介绍他们之间的不同。 1.工厂方法模式简介 …

每日五道java面试题之spring篇(七)

目录&#xff1a; 第一题. 什么是Spring beans&#xff1f;第二题. 一个 Spring Bean 定义 包含什么&#xff1f;第三题. 如何给Spring 容器提供配置元数据&#xff1f;Spring有几种配置方式?第四题. Spring基于xml注入bean的几种方式?第五题&#xff1a;你怎样定义类的作用域…

性能优化问题思考总结

INP 是什么&#xff1f; Interaction to Next Paint (INP) INP是一项指标&#xff0c;通过观察用户在访问网页期间发生的所有点击、点按和键盘互动的延迟时间&#xff0c;评估网页对用户互动的总体响应情况。 互动是指在同一逻辑用户手势期间触发的一组事件处理脚本。例如&a…

酷开科技,让酷开系统成为现代生活的变革者

电视&#xff0c;从问世就一直受到人们的追捧。还记得小时候一家人围坐在电视机前的场景&#xff0c;小小的黑白屏幕&#xff0c;牢牢的吸引着大家的目光。随着科技的不断进步&#xff0c;我们的生活也发生了翻天覆地的变化。而电视&#xff0c;也从笨重的黑白电视变成了轻薄的…

jenkins + gitlab + nginx 自动部署(webhook)

一、意义 当代码仓库被更新时&#xff0c;Jenkins会自动拉取代码进行构建。 适用于测试环境 二、jenkins gitlab nginx 自动部署(webhook) 1.准备服务器 ①安装Jenkins&#xff08;Java17&#xff0c;tomcat9&#xff09; ②安装gitlab &#xff08;16&#xff09; ③…

深入理解Python中的JSON模块:基础大总结与实战代码解析【第102篇—JSON模块】

深入理解Python中的JSON模块&#xff1a;基础大总结与实战代码解析 在Python中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;模块是处理JSON数据的重要工具之一。JSON是一种轻量级的数据交换格式&#xff0c;广泛应用于Web开发、API通信等领域。本文将…

2023 re:Invent 用 Amazon Q 打造你的知识库

前言 随着 ChatGPT 的问世&#xff0c;我们迎来了许多创新和变革的机会。一年一度的亚马逊云科技大会 re:Invent 也带来了许多前言的技术&#xff0c;其中 Amazon CEO Adam Selipsky 在 2023 re:Invent 大会中介绍 Amazon Q 让我印象深刻&#xff0c;这预示着生成式 AI 的又一…

【wu-acw-client 使用】案例

wu-acw-client 使用 项目介绍&#xff0c;使用acw-client&#xff0c;创建对应Java项目的增删改查&#xff08;ORM&#xff1a;Lazy ORM、mybatis&#xff09;&#xff0c;项目模块架构&#xff1a;mvc、feign、ddd 演示项目环境&#xff1a;idea 、mac、mysql、jdk17 spring …

geotools解析shp 提示 opengis.*.SimpleFeatureType‘ 不在其界限内

问题:&#xff08; geotools.version&#xff1a;31-SNAPSHOT&#xff09; 解析shp文件时提示类型SimpleFeatureType不在其界限内 解决&#xff1a; 在引用处将org.opengis.feature.simple.SimpleFeatureType 改为 org.geotools.api.feature.simple.SimpleFeatureType

qt-C++笔记之使用QProcess去执行一个可执行文件时指定动态库所存放的文件夹lib的路径

qt-C笔记之使用QProcess去执行一个可执行文件时指定动态库所存放的文件夹lib的路径 参考博文&#xff1a; 1.C笔记之执行一个可执行文件时指定动态库所存放的文件夹lib的路径 2.Linux笔记之LD_LIBRARY_PATH详解 3.qt-C笔记之使用QProcess去执行一个可执行文件时指定动态库所存放…

LeetCode 0938.二叉搜索树的范围和:深度优先搜索(可中序遍历)

【LetMeFly】938.二叉搜索树的范围和&#xff1a;深度优先搜索&#xff08;可中序遍历&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/range-sum-of-bst/ 给定二叉搜索树的根结点 root&#xff0c;返回值位于范围 [low, high] 之间的所有结点的值的和。…

数一满分150分总分451东南大学920电子信息通信考研Jenny老师辅导班同学,真题大纲,参考书。

记录用来打破的&#xff0c;信息通信考研Jenny老师2024级辅导班同学&#xff0c;数一满分150分&#xff0c;专业课920专业基础综合143&#xff0c;总分451分&#xff0c;一位及其优秀的本科985报考东南大学信息学院的学生&#xff0c;东南大学920考研&#xff0c;东南大学信息科…

查看NGINX版本

查看Nginx版本有几种常用方法&#xff1a; 命令行&#xff1a; 在Linux或macOS系统中打开终端&#xff0c;然后输入以下命令之一&#xff1a; nginx -v 或者 nginx -V -v 参数将输出简短的nginx版本信息。 -V 参数&#xff08;大写&#xff09;将输出更详细的版本和配置信息&am…

Zoho ToDo 满足您的需求:任务管理满足隐私和安全要求

任务管理工具已经成为我们日常生活中不可或缺的一部分&#xff0c;它们帮助我们处理各种事务&#xff0c;从杂项和愿望清单到管理截止日期和资源。这些工具不仅仅是简单的任务列表&#xff0c;它们掌握了项目的蓝图、雄心勃勃的目标和完成的最后期限。然而随着这些工具的使用越…

【web APIs】1、(学习笔记)有案例!

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、概念二、使用步骤1.获取DOM对象2.操作元素内容3.属性修改3.1.常用属性修改3.2.控制样式属性3.3.操作类名(className) 操作CSS3.4.操作表单元素属性3.5.自定…