用chrome开发者工具注入CSS？

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

---

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

这就是你想要的吗？：“如何在chrome中直接编辑源文件”

---

从该条中：

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

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

---

第3步：编辑并保存代码，刷新浏览器以查看您的更改。我不确定它是否有效，但您必须尝试一下

按F12/（Mac上的Cmd+opt+I）打开开发者控制台并转到控制台选项卡

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

$（document.head）.append（“”）；

或者，您可以编辑一个属性，使inspector-stylesheet.css由Chrome创建，并通过css源进行复制。

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

这将插入一个

使用href

//font.googleapis.com/css？family=Roboto

结账前

如果要向其中添加css文件的文档中没有head标记，请尝试将

body

作为最后一个参数：

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

---

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

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

---

看起来很有魅力…

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

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

---

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

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

转到元素选项卡（Ctrl+Shift+p并键入显示元素），如果您还没有，请查看样式选项卡，现在在右角看到，将有一个+图标，单击它（或长按该图标，如果它没有自动添加检查器样式表），它将添加当前高亮显示元素的选择器，就在选择器旁边，将有一个链接/按钮inspector样式表，单击它，它将显示一个窗口，您可以在其中添加样式

---

第二种方式，编辑为HTML

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

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

滚动到head元素，右键单击该元素并选择编辑为HTML，转到该元素的底部（Ctrl+End），在那里添加

元素在该元素中添加样式，然后按Ctrl+Enter

---

第三种方式，代码片段：

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

转到源选项卡，转到代码段选项卡，单击+新代码段，随意命名，然后添加以下内容：

创建新代码段Ctrl+Shift+p type创建新代码段按Enter键，如果需要，重命名代码段，然后添加以下内容（编辑样式）：

（函数（）{
让样式=`
/*在这里改变你的风格*/
身体{
显示：无；
}
`;
document.head.insertAdjacentHTML（“beforeed”，style）；
})();

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

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

若要编辑或查看代码段，请按住Ctrl+Shift+p组合键，键入“显示代码段”

---

在FireFox中更简单：

打开检查元件（F12）

---

转到样式编辑器，单击+图标，即可编辑样式；您还可以导入样式，只需单击+

旁边的图标即可。首先，这就是我使用Firefox进行教学和开发工作的原因之一。答案是内在的

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

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

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

document.head.insertAdjacentHTML（'beforeed'，'…'）；

也可以按如下方式添加外部样式表：

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

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

document.head.insertAdjacentHTML（'beforeed'，''；

beforeend参数用于帮助注入的CSS覆盖以前加载的样式

如果要重复执行此操作，则可以将其添加为bookmarklet，方法如下

---

该技术类似于我在JavaScript课程中教授的技术，我使用

afterbegin

注入一些默认CSS，但允许用户样式表覆盖默认值。

您可以使用Chrome开发工具中的代码片段注入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; }');

---

这似乎只允许我编辑js文件。。。我也可以用它来编辑CSS吗？CSS对我来说很好，不确定你的评论是过时的还是Chrome的改变。你不应该给出链接作为整个答案，因为如果那个页面不再存在怎么办。请打一份英文

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