使用 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 ）

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

---

第二种方式，编辑为 HTML

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

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

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

---

第三种方式，片段：

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

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

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

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

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

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

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

要编辑或查看您的片段，请按 Ctrl + Shift + P键入show snippets 。

---

在 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

为什么不是像这样的一种简单的框架不可知单行呢？

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

似乎很有魅力……

Answer 5

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

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

Answer 6

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

---

从那篇文章：

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

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

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

Answer 7

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

Answer 8

您可以使用 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; }');

Answer 9

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

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

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

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

Answer 10

AWD AW DAWD Q3 DQ WD AWDQ3R 2 2WA D34T W53 4YQ1