使用chrome开发人员工具注入CSS？

Question

我在哪里可以添加CSS到我正在查看的页面？我不想直接向一个元素添加样式,我想在编辑网站的style.css之前向页面添加"文档"以调试更改.

请注意,这里有很多关于"从Chrome扩展中注入CSS"的问题,但具体来说我想通过"Chrome开发者工具"来实现.

Answer 1

我不确定它是否有效,但你必须尝试.

按F12/(在Mac上为Cmd+ opt+ I)打开开发者控制台并转到"控制台"选项卡.

复制粘贴以下代码(编辑路径):

$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');

或者,您可以编辑一个属性,以便Chrome创建inspector-stylesheet.css,并在那里复制您的CSS源代码.

Answer 2

有多种方法可以做到这一点，而且它们也非常简单。

第一种方式，检查器样式表：

打开检查元素（F12或Ctrl+ Shift+ I）

转到Elements选项卡（Ctrl+ Shift+P并键入show elements），如果您还没有在那里，请查看Styles选项卡，现在在右上角看到，会有一个+图标，单击它（如果没有，请长按该图标） t 自动添加inspector-stylesheet），它会添加当前突出显示的元素的选择器，在选择器旁边，会有一个链接/按钮检查器样式表，点击它，它会带你一个窗口，你可以在其中添加样式。

第二种方式，编辑为 HTML

打开检查元素（F12或Ctrl+ Shift+ I）

转到元素面板（Ctrl+ Shift+p并键入show element panel）。

滚动到head元素，右键单击该元素并选择Edit as HTML，转到该元素的底部 ( Ctrl+ End)，在<style></style>那里添加您的元素在该元素中添加您的样式，然后点击Ctrl+ Enter。

第三种方式，片段：

打开检查元素（F12或Ctrl+ Shift+ I）

转到Source选项卡，转到Snippets选项卡，单击+ New snippet，随意命名，然后添加：

创建新代码段Ctrl+ Shift+P类型Create new snippet hit Enter，如果需要，重命名代码段，然后添加（编辑样式）：

(function(){
    let style = `<style>
/*change your style here*/
body{
        display:none;
    }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

保存它，运行它（Ctrl+ Enter）。

您还可以通过执行以下操作来运行代码段：Ctrl+ ptype ! 它将显示您保存的片段，选择您要运行的片段。

编辑或查看您的片断，Ctrl+ Shift+P类节目片段。

在 Firefox 中，它更容易：

打开检查元素 ( F12)

转到样式编辑器，单击+图标，您将能够编辑样式；您还可以导入样式，只需单击+旁边的图标即可。

Answer 3

首先，这就是我使用 Firefox 进行教学和我自己的开发工作的原因之一。答案是内置的。

作为上述答案的变体，使用现代 JavaScript，您可以添加如下硬编码样式：

document.head.insertAdjacentHTML('beforeend','<style> … </style>');

或者您可以添加一个外部样式表，如下所示：

document.head.insertAdjacentHTML('beforeend','<link rel="stylesheet" href="…">');

该beforeend参数是为了帮助注入的 CSS 覆盖先前加载的样式。

如果您要重复执行此操作，则可以使用Bookmarklet Crunchinator 之类的工具将其添加为书签。

该技术类似于我在 JavaScript 课程中教授的技术，我在该课程中afterbegin用于注入一些默认 CSS，但允许用户样式表覆盖默认值。

Answer 4

自 2018 年起，Chrome (65) 浏览器的集成 DevTools 具有一项名为Local Overrides 1 的功能。因此，不需要像 StyleBot、Stylish 或 Greasemonkey 这样的附加组件或扩展。

本地覆盖允许在任何实时站点上重写 CSS、JS 和 DOM。更改保存在本地文件夹中，并覆盖实时环境的内容。

这可以在下面访问Developer Tools > Sources >> Overrides

这允许您选择一个自定义本地文件夹，其中包含 CSS 和 JS，并将覆盖当前网站自己的 CSS 和 JS。