用chrome开发工具注入CSS？

Posted 2023-02-15

【中文标题】用chrome开发工具注入CSS？

【英文标题】：Inject CSS with chrome developer tool?

【发布时间】：2013-10-27 01:45:30

【问题描述】：

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

请注意，这里有很多关于“从 chrome 扩展程序注入 CSS”的问题，但具体来说，我想通过“Chrome 开发人员工具”来解决。

【问题讨论】：

这就是 FireFox 仍然是王者的地方

【参考方案1】：

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

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

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

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

【参考方案2】：

这就是你所追求的吗？：“如何在 Chrome 中直接编辑源文件”http://www.sitepoint.com/edit-source-files-in-chrome/

---

来自那篇文章：

第 1 步：启动开发者工具。转到查看 -> 开发人员 -> 开发人员工具。导航到“来源”

第 2 步：单击文件系统选项卡，然后单击 + 将文件夹添加到工作区。系统会提示您找到工作文件夹，Chrome 会要求您确认是否允许访问。

第 3 步：编辑并保存您的代码并刷新浏览器以查看您的更改

【讨论】：

这似乎只允许我编辑js文件...我也可以用它来编辑CSS吗？

CSS 对我来说没问题，不确定您的评论是否已过时或 Chrome 已更改

您不应该将链接作为完整的答案，因为如果该页面不再存在怎么办。请输入完整的回复，在底部您可以说它来自站点点

这篇文章很棒，但正如 ZacharyWeixelbaum 解释的那样，我不得不投反对票。如果 OP 编辑​​他们的答案，我会投票赞成。

【参考方案3】：

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

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

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

或者您可以按如下方式添加外部样式表：

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

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

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

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

【讨论】：

这太完美了……而且很简单！

感谢您提供一种普通的 JavaScript 方式来执行此操作。

在您的示例中，“样式表”被拼写为 rel="styleshet"。

@Paesano2000 很好发现。谢谢。如果拼写正确，效果会更好:)

【参考方案4】：

您可以在 Chrome Devtools 中使用 sn-ps 注入 CSS。保存并执行 sn-p，然后在控制台或另一个 sn-p 中调用它：

function insertCss(code) 
  var style = document.createElement('style');
  style.type = 'text/css';

  if (style.styleSheet)   // IE
    style.styleSheet.cssText = code;
   else  // Other browsers
    style.innerHTML = code;
  
  document.getElementsByTagName("head")[0].appendChild( style );


// run the snippet as follows:
insertCss('span  color: red !important; ');

【讨论】：

嗨 Michael，sn-ps 可以配置为在访问特定网页时自动运行，还是每次都需要手动运行？有一个网页是我经常访问的，并且希望在我每次访问时自动更改。

目前有 chrome 扩展可以在任何页面上自动运行脚本。查看适用于网站 2 的自定义 JavaScript，TamperMonkey。或者有一些很酷的扩展，比如 Stylish，可以让你从创作者社区中挑选主题和风格。 chrome.google.com/webstore/detail/stylish-custom-themes-for/…

谢谢，我会调查这些。

【参考方案5】：

为什么不像这样一种简单的框架无关的单线？

document.body.appendChild(function() var el = document.createElement('link'); el.setAttribute('rel', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;())

看起来像一个魅力......

【参考方案6】：

有多种方法可以做到这一点，而且它们也很容易。

---

第一种方式，inspector-stylesheet：

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

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

---

第二种方式，编辑为 HTML

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

转到元素面板（Ctrl+ Shift+ p 并键入显示元素面板）。

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

---

第三种方式，片段：

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

进入Source标签，进入Snippets标签，点击+ New sn-p，命名无论你想要什么，然后添加：

Create new sn-p Ctrl+ Shift+ P type Create new sn-p hit Enter ，如果需要，重命名 sn-p，然后添加（编辑样式）：

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

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

保存，运行（Ctrl+Enter）。

您也可以通过以下方式运行 sn-ps：Ctrl+ p 键入 ! 它将显示您保存的 sn-ps，选择你要运行的那个。

要编辑或查看您的 sn-ps，Ctrl+ Shift+ P 键入 show sn-ps .

---

在 FireFox 中更简单：

打开检查元素 (F12)

进入样式编辑器，点击+图标，即可编辑样式；您也可以导入样式，只需单击 + 旁边的图标。

【讨论】：

我尝试创建一个 sn-p - 当我输入 cmd+enter 时它可以工作，但是当我刷新页面时效果消失了。知道为什么吗？谢谢！

@Drewdavid 我认为这是预期的行为，但是如果您想在每次访问页面时自动运行 CSS 或 JS，您可以使用一些扩展，例如：Stylus

嗯，谢谢 Stylus。我没有在任何地方遇到过这个。我想我认为这些 sn-ps 的目的是跨会话持续存在，而无需创建完整的扩展！

【参考方案7】：

转到开发工具中的源选项卡并右键单击左列，然后将文件夹添加到工作区并使用文件资源管理器选择包含您的 css 文件的文件夹。您必须允许进行更改，一旦您这样做，您将在源代码树中看到您的文件夹（确保您在源选项卡下选择文件系统选项卡），打开您的文件夹找到文件并右键单击您的 css 文件并选择映射到网络资源。映射文件后，您可以在工作区中打开并查看它，并且从该文件中所做的任何更改都会影响页面样式。所以基本上你的风格会覆盖服务的风格。

【参考方案8】：

我不确定它是否有效，但你必须尝试。

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

复制粘贴以下代码（修改路径）：

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

或者，您可以编辑一个属性，以便由 Chrome 创建inspector-stylesheet.css，然后复制您的 CSS 源代码。

【参考方案9】：

这应该可以工作（粘贴到控制台，根据需要在最后一行编辑参数）：

(function(i,n,j,e,c,t,css)
  css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;
  t.insertAdjacentElement('beforeend',css);)
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head');

这将插入一个<link>

带有一个 href //fonts.googleapis.com/css?family=Roboto

收盘前</head>

如果您尝试添加 css 文件的文档中没有 head 标签，请尝试将 body 作为最后一个参数：

(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');