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

时间:2013-10-18 09:14:38

标签: css google-chrome developer-tools

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

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

8 个答案:

答案 0 :(得分:32)

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

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

复制粘贴以下代码(编辑路径):

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

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

答案 1 :(得分:3)

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

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

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

答案 2 :(得分:2)

这应该有效(粘贴到控制台,根据需要在最后一行编辑参数):

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

答案 3 :(得分:1)

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

答案 4 :(得分:1)

  

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

第一种检查员样式表:

打开检查元素( 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

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

答案 5 :(得分:1)

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

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

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

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

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

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

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

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

答案 6 :(得分:0)

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

答案 7 :(得分:-1)

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