Question

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

似乎像魅力一样......

Answer 3

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

(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文件的文档中没有头标记，请尝试body作为最后一个参数：

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

Answer 4

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

Answer 5

这些事情看似复杂，但很容易-

第一种检查员样式表：

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

转到元素标签，如果还没有，请参见样式标签，现在在右上角将显示 + 图标，单击它（或者长按该图标，如果它没有自动添加 inspector-stylesheet ），它将在当前元素旁边添加当前突出显示的元素的选择器选择器，将有一个链接/按钮 inspector-stylesheet ，单击它，将带您进入一个窗口，您可以在其中添加样式。

第二种方式，代码段：

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

转到来源标签，转到代码段标签，点击 +新代码段，将其命名为任意名称，然后添加此：

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

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

保存并运行它（ Cntrl + Enter ）。

在FireFox中更容易：

打开检查元素（ F12 ）

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

Answer 6

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

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

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

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

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

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

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

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

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

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

8 个答案: