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

Inject CSS with chrome developer tool?

提问by Dan Bolser

Where can I add CSS to the page I'm viewing? I don't want to add style to one element directly, I want to add a 'document' to a page to debug changes before editing the site's style.css.

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

Note, there are lots of questions here about 'injecting CSS from a chrome extension', but specifically I want to do it via the 'Chrome Developer Tools' thingy.

请注意，这里有很多关于“从 chrome 扩展程序注入 CSS”的问题，但特别是我想通过“Chrome 开发人员工具”来完成。

采纳答案by simonbell

Is this what you're after?: "How to Edit Source Files Directly in Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/

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

---

---

From that article:

从那篇文章：

Step 1: Launch Developer Tools. Go to View -> Developer -> Developer Tools. Navigate to "Sources"

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

Step 2: Click the Filesystem tab, then click + Add folder to workspace. You'll be prompted to locate your work folder and Chrome will ask you to confirm that you Allow access.

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

Step 3: Edit and Save Your Code and refresh the browser to see your changes

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

回答by larssy1

I'm not sure if it works, but you'd have to try.

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

Pressing F12/ (Cmd+ opt+ Ion Mac) to open up the Developer Console and go to the Console tab.

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

Copy paste the following code (edit the path):

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

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

Alternatively, you could edit one property so the inspector-stylesheet.css is created by Chrome, and copy past your CSS source there.

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

回答by Manngo

To begin with, this is one reason why I use Firefox for teaching and my own development work. The answer is built in.

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

As a variation to the above answers, using modern JavaScript, you can add a hard-coded style as follows:

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

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

or you can add an external style sheet as follows:

或者您可以添加一个外部样式表，如下所示：

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

The beforeendargument is to help the injected CSS to override previously loaded styles.

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

If you're going to do this repeatedly, you can then add it as a bookmarklet, using something like Bookmarklet Crunchinator.

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

The technique is similar to one I teach in a JavaScript class, where I use afterbeginto inject some default CSS, but allow user style sheets to override the defaults.

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

回答by Harry

There are multiple ways to do that, and they are also very easy.

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

---

---

First way, inspector-stylesheet:

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

Open Inspect Element (F12Or Ctrl+ Shift+I)

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

Go to Elementstab (Ctrl+ Shift+ Pand type show elements), if you are not already there, see the Stylestab, now see on right corner, there would be a +icon, click it (or long press that icon if it doesn't automatically add inspector-stylesheet), it will add selector of currently highlighted element, just next to the selector, there will a link/button inspector-stylesheet, click it, it will take you a window, where you can add styles.

转到元素选项卡（Ctrl+ Shift+P并键入show elements），如果您还没有在那里，请查看样式选项卡，现在在右上角看到，会有一个+图标，单击它（如果没有，请长按该图标） t 自动添加inspector-stylesheet），它会添加当前高亮元素的选择器，在选择器旁边，会有一个链接/按钮inspector-stylesheet，点击它，它会带你一个窗口，你可以在其中添加样式。

---

---

Second way, Edit as HTML

第二种方式，编辑为 HTML

Open Inspect Element (F12Or Ctrl+ Shift+I)

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

Go to element panel (Ctrl+ Shift+ pand type show element panel).

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

Scroll to the headelement right click on the element and choose Edit as HTML, go to the bottom of that element (Ctrl+ End), add your <style></style>element there add your style in that element, and hit Ctrl+ Enter.

滚动到head元素，右键单击该元素并选择Edit as HTML，转到该元素的底部 ( Ctrl+ End)，在<style></style>那里添加您的元素，在该元素中添加您的样式，然后点击Ctrl+ Enter。

---

---

Third way, Snippet:

第三种方式，片段：

Open Inspect Element (F12Or Ctrl+ Shift+I)

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

Go to the Sourcetab, go to the Snippetstab, click on the + New snippet, name it whatever you want, and add this:

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

Create new snippet Ctrl+ Shift+ Ptype Create new snippethit Enter, rename the snippet if you want to, and add this (edit the style) :

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

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

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

Save it, run it (Ctrl+Enter).

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

You can also run the snippets by doing this: Ctrl+ ptype !it will show your saved snippets, choose the one you want to run.

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

To edit or see your snippets, Ctrl+ Shift+ Ptype show snippets.

编辑或查看您的片断，Ctrl+ Shift+P类节目片段。

---

---

In FireFox it's even easier:

在 FireFox 中，它更容易：

Open Inspect Element (F12)

打开检查元素 ( F12)

Go to Style Editor, click the +icon and you will be able to edit the style; You can also, import styles, just by clicking the icon next to the +.

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

回答by Jonas Carlbaum

Why not a kind of simple framework agnostic one-liner like this?

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

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

Seems to work like a charm...

似乎很有魅力……

回答by stereobird

This should work (paste into console, edit arguments in the last line as needed):

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

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

This will insert a <link>

这将插入一个 <link>

with an href //fonts.googleapis.com/css?family=Roboto

带有一个href //fonts.googleapis.com/css?family=Roboto

before the closing </head>

闭幕前 </head>

If there's no head tag in the document you're trying to add a css file to, try bodyas the last argument:

如果您尝试向其中添加 css 文件的文档中没有 head 标记，请尝试body作为最后一个参数：

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

回答by Mike Baker

Go to the sources tab in dev tools and right click in the left column, then add folder to workspace and use file explorer to select the folder that contains your css file. You will have to allow to make changes, once you do this you will see your folder in the sources tree(MAKE SURE YOU SELECT FILESYSTEM TAB UNDER SOURCES TAB), open your folder find the file and right click on the your css file and select map to network resource. Once you map the file you can open and see it in the workspace and from that file any change made will affect the page styles. So basically your styles will over ride the served styles.

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

回答by Michael

You can inject CSS using snippets in Chrome Devtools. Save and execute the snippet and then invoke it in the console or in another snippet:

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