使用Chrome开发者工具注入CSS？

Question

我在查看的页面中想添加CSS，而不是直接向一个元素添加样式，我想在编辑网站的style.css之前添加一个“文档”来调试更改。

请注意，这里有很多关于“从chrome扩展注入CSS”的问题，但我特别想通过“Chrome开发者工具”来实现。

- Dan Bolser

---

这就是 FireFox 仍然是王者的地方。 - klewis

Answer 1

有多种方法可以实现，它们非常容易。

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

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

进入元素选项卡（Ctrl+Shift+P，输入“show elements”），如果您还没有到达那里，请查看“Styles”选项卡。现在看右上角，那里会有一个+图标，点击它（或长按该图标，如果它不会自动添加inspector-stylesheet），它将添加当前突出显示元素的选择器，就在选择器旁边，会有一个链接/按钮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）

创建新片段Ctrl+Shift+P，输入“Create new snippet”，按Enter，如果需要，请重命名代码片段并添加以下内容（编辑样式）：

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

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

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

您还可以通过以下方式运行片段：Ctrl+p键输入！，这将显示您保存的片段，选择要运行的片段即可。

要编辑或查看片段，请使用Ctrl+Shift+P键输入show snippets。

---

在FireFox中，这更加容易：

打开检查元素（F12）

转到样式编辑器，点击+图标，您将能够编辑样式。您还可以通过单击+旁边的图标导入样式。

- Harry

---

我尝试创建一个代码片段 - 当我输入cmd+enter时它可以工作，但是当我刷新页面后效果就消失了。有任何想法为什么会这样吗？谢谢！ - Drewdavid

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

谢谢，Stylus。我在其他地方没有遇到过这个。我想这些代码片段的目的是在不需要创建完整扩展的情况下跨会话保留！ - Drewdavid

我喜欢第二个选项，随意编辑。谢谢！ - ThanhPhanLe

Answer 2

我不确定它是否有效，但你需要试一下。

按下 F12 / (Mac 上的 Cmd + opt + I) 以打开开发者控制台并转到 Console 标签页。

复制并粘贴以下代码（编辑路径）：

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

或者，您可以编辑一个属性，使得 Chrome 创建 inspector-stylesheet.css 文件，然后将您的 CSS 源代码复制粘贴到那里。

- larssy1

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，但允许用户样式表覆盖默认值。

- Manngo

---

这太完美了，而且非常容易！ - Us3rAIpha8rav0

感谢提供一种使用原生JavaScript实现的方法。 - Paesano2000

在你的例子中，“stylesheet”被拼错成了rel="styleshet"。 - Paesano2000

@Paesano2000 很敏锐。谢谢你。如果你拼对了它会更好 :) - Manngo

Answer 4

自2018年起，在Chrome（65）中，浏览器集成的开发者工具有一个名为本地覆盖 1 的功能。因此，不需要像StyleBot、Stylish或Greasemonkey这样的插件或扩展程序。 本地覆盖 允许对任何实时站点上的CSS、JS和DOM进行重写。更改保存在本地文件夹中，并覆盖实时环境的内容。

可以在开发者工具 > 源代码 >> 覆盖下访问此功能。

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

- Eric Kigathi

Answer 5

为什么不使用这种简单且框架无关的一行代码呢？

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

看起来工作得很好...

- Jonas Carlbaum

Answer 6

以下代码应该有效（将其粘贴到控制台中，在最后一行编辑参数以满足需求）：

(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');

这将插入一个带有href为//fonts.googleapis.com/css?family=Roboto的<link>标签在闭合</head>标签之前。

如果您要向文档添加CSS文件，但没有标签，请尝试将body作为最后一个参数。

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

- stereobird

Answer 7

您可以使用Chrome Devtools中的代码片段来注入CSS。保存并执行代码片段，然后在控制台或另一个代码片段中调用它：

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

---

嗨，迈克尔，代码片段能否配置为在访问特定网页时自动运行，还是每次需要手动运行？我经常访问一个网页，希望每次访问时都可以自动地对我进行个性化的修改。 - Drewdavid

目前有一些 Chrome 扩展可以自动在任何页面上运行脚本。请查看 Custom JavaScript for Websites 2、TamperMonkey 等，或者像 Stylish 这样的酷扩展，让您从创建者社区中挑选和选择主题和样式。https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en - Michael

谢谢，我会研究一下这些内容。 - Drewdavid

Answer 8

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

---

从那篇文章中：

步骤1：启动开发者工具。转到“视图” -> “开发人员” -> “开发者工具”。导航到“源”

步骤2：单击文件系统选项卡，然后单击+添加文件夹到工作区。您将被提示定位您的工作文件夹，Chrome将要求您确认允许访问。

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

- simonbell

---

那似乎只允许我编辑js文件...我能用它来编辑CSS吗？ - Dan Bolser

CSS 对我来说运行良好，不确定你的评论是否已过时或 Chrome 进行了更改。 - NaturalBornCamper

不应该只给出链接作为整个答案，因为万一该页面不存在了呢。请完整地书写回复，并在底部注明来源来自sitepoint。 - Zachary Weixelbaum

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

Answer 9

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

- Mike Baker